/*
 * The sections below the listings (compare promo, new project, neighbourhoods,
 * calculator, agents, guides, FAQ, closing): the few rules the reference
 * stylesheet (home.css, generated by tools/scope-css.py) does not have.
 * Hand-written; regenerating home.css leaves this file alone.
 */

/* The reference's guide cards and planning links are buttons; here they are links to the CRM's articles. Same rules, for <a>. */
.lh .planning-links a{display:flex;align-items:center;gap:12px;padding:16px 0;border-bottom:1px solid #e5ebf3;width:100%;text-align:left}
.lh .planning-links a:last-child{border:0}
.lh .planning-links a>.ic{width:18px;height:18px;color:var(--blue)}
.lh .planning-links a>.ic:last-child{width:14px;height:14px;margin-left:auto;color:#a4b0c0}
.lh .guide-grid>a{text-align:left;border:1px solid var(--line);border-radius:12px;padding:25px;background:#fff;transition:background .2s,transform .2s}
.lh .guide-grid>a:hover{background:#f9fbff;transform:translateY(-3px)}
.lh .guide-grid>a>div{display:flex;align-items:center;justify-content:space-between;font-size:9px;color:#748ba9;border-top:1px solid var(--line);padding-top:17px}
@media(max-width:1024px){
	.lh .planning-links a{gap:9px}
	.lh .planning-links a>.ic{width:16px;height:16px}
	.lh .guide-grid>a{padding:22px}
	.lh .guide-grid>a>div{font-size:8px}
}
@media(max-width:800px) and (min-width:701px){
	.lh .guide-grid>a{padding:18px}
}
@media(max-width:700px){
	.lh .planning-links a{padding:13px 0}
	.lh .planning-links a>.ic{width:16px;height:16px}
	.lh .guide-grid>a{padding:22px}
	.lh .guide-grid>a>div{font-size:9px;padding-top:14px}
	.lh .guide-grid>a>div{font-size:10px}
}
@media(min-width:1025px){
	.lh .guide-grid>a>div{font-size:11px}
}

/* A project or a city with no picture: the plain placeholder fills the frame. */
.lh .launch-feature>.no-photo{position:absolute;inset:0;background:linear-gradient(135deg,#27405f,#162a47);color:#7f98b8}
.lh .launch-feature>.no-photo .ic{width:64px;height:64px;stroke-width:1}
.lh .area-picture .no-photo .ic{width:40px;height:40px}
.lh .area-note{font-size:10px;line-height:1.6;color:#9aa5b4;max-width:260px;text-align:right}
@media(max-width:700px){.lh .area-note{text-align:left;max-width:none}}
/* a long project name must not push the comparison table around */
.lh .compare-col{min-width:0}
.lh .mini-property{max-width:100%}
.lh .mini-property b,.lh .mini-property small{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lh .mini-property .no-photo{width:70px;height:48px;border-radius:5px}
.lh .mini-property .no-photo .ic{width:22px;height:22px}
/* The theme capitalises every heading; the reference's headings are sentences ("Which one?" not "Which One?"). */
.lh h1,.lh h2,.lh h3,.lh h4,.lh h5{text-transform:none}
/* "% p.a." and "years" stay on one line; the box gives way instead */
.lh .money-input>span{white-space:nowrap}
.lh .money-input input{min-width:0}

/* The theme's Bootstrap gives every .container 15px side padding and a max-width; the reference's container is just its width, so the sections sat 15px further in on each side. */
.lh .container{padding:0;max-width:none}

/*
 * The agent-search plugin (listin-agent-suggest) puts a chip container in front of the search input. Empty, it
 * still took a grid column on a phone (the input got squeezed to the right and its placeholder cut off); out of
 * the way until there is a chip, and then a row of its own under the input.
 */
.lh .search-input-wrap>.listin-chips:empty{display:none!important}
@media(max-width:700px){.lh .search-input-wrap>.listin-chips{grid-column:1/-1;grid-row:2;margin:0!important}}

/* 1.12.3: Popular buildings (templates/sections/buildings.php) */
.lh .lh-building-rail{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.lh .lh-building-rail a{display:flex;flex-direction:column;gap:4px;position:relative;padding:16px 36px 16px 18px;border:1px solid var(--line);border-radius:12px;background:#fff;text-align:left;transition:background .2s,transform .2s}
.lh .lh-building-rail a:hover{background:#f9fbff;transform:translateY(-2px)}
.lh .lh-building-rail b{font-size:14px;color:#1f3550;font-weight:600}
.lh .lh-building-rail span{font-size:11px;color:#748ba9}
.lh .lh-building-rail .ic{position:absolute;top:18px;right:16px;width:13px;height:13px;color:#a4b0c0}
@media(max-width:1024px){.lh .lh-building-rail{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.lh .lh-building-rail{grid-template-columns:repeat(2,1fr);gap:10px}.lh .lh-building-rail a{padding:13px 30px 13px 14px}}
@media(max-width:420px){.lh .lh-building-rail{grid-template-columns:1fr}}