/*
 * Home page — loaded on the front page only.
 *
 * The design job here is depth and rhythm on a page that, until real
 * photography arrives, has almost no imagery to lean on. Three devices carry
 * it: a two-layer hero with the brand roofline as a watermark, a white search
 * panel and trust card that overlap section boundaries, and a consistent
 * section-head pattern so the page reads as chapters instead of a stack of
 * boxes. The accent stays a seasoning throughout (BRAND-GUIDELINES §3.5).
 */

/* =========================================================================
   Hero
   ========================================================================= */

/*
 * The hero is four stacked layers, painted back to front:
 *
 *   background-image   the colour field — a warm accent bloom top-right, a cool
 *                      teal bloom bottom-left, over a navy diagonal ramp
 *   ::before           a hairline grid, masked so it only shows in the middle
 *                      and never collides with the headline or the panel
 *   ::after            a vignette that darkens the corners and floor
 *   .smi-hero__mark    the roofline watermark (in the markup, aria-hidden)
 *
 * The two blooms are what stop this reading as a flat navy slab. They sit at
 * opposite corners on the diagonal so the field has a direction rather than
 * being uniformly "gradient-y" — warm where the eye enters, cool where it
 * leaves. Both are under .12 alpha; anything stronger and the white headline
 * starts losing contrast against the accent side.
 */
.smi-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background-color: var(--smi-navy);
	background-image:
		radial-gradient(ellipse 70% 55% at 88% -5%, rgba(var(--smi-accent-rgb), .16), transparent 62%),
		radial-gradient(ellipse 60% 50% at 5% 105%, rgba(var(--smi-teal-rgb), .22), transparent 60%),
		linear-gradient(160deg, #154974 0%, var(--smi-navy) 45%, #071C30 100%);
	color: var(--smi-white);
	padding-block: var(--smi-space-7) calc(var(--smi-space-8) + var(--smi-space-6));
}

/*
 * Hairline grid. 64px cells at 4% white — deliberately near the threshold of
 * visibility: it should register as texture, not as a drawn grid. The radial
 * mask fades it out at all four edges so it never terminates in a hard line
 * against the header above or the trust card overlapping below.
 */
.smi-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image:
		linear-gradient(to right, rgba(255, 255, 255, .04) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255, 255, 255, .04) 1px, transparent 1px);
	background-size: 64px 64px;
	mask-image: radial-gradient(ellipse 75% 65% at 50% 45%, #000 20%, transparent 78%);
	-webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 45%, #000 20%, transparent 78%);
}

/* Vignette — pulls the corners down so the centre reads as lit. */
.smi-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image:
		radial-gradient(ellipse 90% 75% at 50% 40%, transparent 40%, rgba(6, 18, 32, .45) 100%);
}

@media (min-width: 1024px) {
	.smi-hero {
		padding-block: var(--smi-space-8) calc(var(--smi-space-8) + var(--smi-space-7));
	}
}

.smi-hero .smi-eyebrow {
	color: var(--smi-accent);
}

.smi-hero__inner {
	position: relative;
	z-index: 1;
	max-inline-size: 780px;
}

.smi-hero__lead {
	font-size: var(--smi-text-body-lg);
	line-height: var(--smi-leading-loose);
	color: rgba(255, 255, 255, .82);
	max-inline-size: 56ch;
}

/*
 * The brand roofline as a watermark in the hero's dead right half.
 * Decorative only — aria-hidden in the markup.
 *
 * Two changes from the original treatment, both about the same problem: at
 * 52vw and .14 alpha the mark filled the whole right side as an ambiguous dark
 * shape, and a low-alpha accent over blue desaturates to a muddy grey — it
 * stopped reading as cyan at all. It is now smaller, sits higher, carries more
 * alpha, and has a accent bloom behind it so the colour survives.
 */
.smi-hero__mark {
	position: absolute;
	inset-block-end: 2%;
	inset-inline-end: -2%;
	inline-size: min(38vw, 470px);
	opacity: .5;
	pointer-events: none;
	color: var(--smi-accent);
	filter: drop-shadow(0 0 40px rgba(var(--smi-accent-rgb), .35));
}

/*
 * The icon helper emits fixed width/height attributes on the svg element —
 * without this override the mark stays at its intrinsic 64px no matter what
 * the wrapper is told to be.
 *
 * stroke-width matters as much as the size here. roofline.svg is authored at
 * stroke-width 5 in a 64-unit viewBox, which is right at 64px and becomes a
 * ~37px slab once scaled to 470 — that is why the watermark used to read as an
 * ambiguous dark blob rather than a line drawing. Overriding to 1.2 keeps the
 * scaled stroke around 9px: a drawn line, thin enough to carry cyan without
 * desaturating into grey.
 */
.smi-hero__mark svg {
	inline-size: 100%;
	block-size: auto;
	stroke-width: 1.2;
}

/* The second path is authored a step thinner; hold that ratio. */
.smi-hero__mark svg path + path {
	stroke-width: 1;
}

@media (max-width: 767px) {
	.smi-hero__mark {
		inline-size: 80vw;
		inset-inline-end: -26%;
		inset-block-end: -4%;
		opacity: .10;
		filter: none;
	}

	/* The grid reads as moiré at phone widths, where the cells land near the
	   device pixel ratio. Cheaper and cleaner to drop it. */
	.smi-hero::before {
		display: none;
	}
}

/* -- Search panel ---------------------------------------------------------
   A white card, not controls floating on navy. The Buy | Rent toggle sits on
   its top edge so the first decision reads as part of the search, and the
   panel overlaps into the trust band below to stitch the two sections.
   ------------------------------------------------------------------------ */

.smi-hero-search {
	position: relative;
	z-index: 2;
	margin-block-start: var(--smi-space-5);
	max-inline-size: 860px;
}

/* True glass — this one sits directly on the navy field, so it can be. */
.smi-hero-search .smi-switch {
	background-color: var(--smi-glass-dark-bg);
	border-color: var(--smi-glass-dark-border);
	margin-block-end: var(--smi-space-3);
	backdrop-filter: var(--smi-glass-blur);
	-webkit-backdrop-filter: var(--smi-glass-blur);
	box-shadow: var(--smi-shadow-md), var(--smi-edge-light-dark);
}

.smi-hero-search .smi-switch__option {
	color: rgba(255, 255, 255, .85);
}

.smi-hero-search .smi-switch__option[aria-current="true"] {
	background-color: var(--smi-white);
	color: var(--smi-navy);
	box-shadow: var(--smi-shadow-xs);
}

.smi-hero-search .smi-switch__option--rent[aria-current="true"] {
	background-color: var(--smi-teal);
	background-image: var(--smi-grad-teal);
	color: var(--smi-white);
}

/*
 * The search panel is frosted white, not transparent glass.
 *
 * It holds two <select>s and the primary CTA — the one place on the page where
 * legibility outranks the effect. At .10 alpha over a moving gradient the
 * option text loses AA, so the frost sits at .90 and the glassiness comes from
 * the blur, the saturation lift and the lit top edge rather than from
 * transparency. Same visual family as .smi-btn--glass-light, honest contrast.
 */
.smi-hero-search__panel {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--smi-space-2);
	padding: var(--smi-space-3);
	background-color: rgba(255, 255, 255, .90);
	border: 1px solid rgba(255, 255, 255, .55);
	border-radius: var(--smi-radius-lg);
	backdrop-filter: var(--smi-glass-blur);
	-webkit-backdrop-filter: var(--smi-glass-blur);
	box-shadow:
		0 24px 64px -12px rgba(4, 14, 26, .55),
		inset 0 1px 0 rgba(255, 255, 255, .9);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.smi-hero-search__panel {
		background-color: var(--smi-white);
	}
}

.smi-hero-search__panel label {
	flex: 1 1 210px;
}

.smi-hero-search__panel .smi-sort {
	inline-size: 100%;
	min-block-size: var(--smi-tap);
	border-color: var(--smi-border);
	background-color: var(--smi-surface);
	border-radius: var(--smi-radius-btn);
}

.smi-hero-search__panel .smi-btn {
	flex: 0 0 auto;
}

@media (max-width: 639px) {
	.smi-hero-search__panel .smi-btn {
		inline-size: 100%;
	}
}

/* =========================================================================
   Trust bar — a card overlapping out of the hero
   ========================================================================= */

.smi-trust {
	position: relative;
	z-index: 3;
	margin-block-start: calc(-1 * var(--smi-space-7));
	margin-block-end: var(--smi-space-6);
}

/*
 * This card straddles the hero/page boundary, so it is the one surface on the
 * home page seen against both navy and white at once. It gets the top of the
 * elevation ladder — anything less and the half hanging over the navy looks
 * pasted on rather than floating.
 */
.smi-trust__card {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	background-color: var(--smi-white);
	background-image: var(--smi-grad-card);
	border: 1px solid var(--smi-border);
	border-radius: var(--smi-radius-lg);
	box-shadow: var(--smi-shadow-xl), var(--smi-edge-light);
	overflow: hidden;
}

@media (min-width: 768px) {
	.smi-trust__card {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.smi-trust__item {
	position: relative;
	padding: var(--smi-space-5) var(--smi-space-3);
	text-align: center;
	/* Same shadow-rule trick as the facts strip: outer edges clip away. */
	box-shadow: -1px -1px 0 0 var(--smi-border);
	transition: background-color var(--smi-duration) var(--smi-ease);
}

.smi-trust__item:hover {
	background-color: rgba(var(--smi-accent-rgb), .05);
}

.smi-trust__number {
	display: block;
	font-family: var(--smi-font-head);
	font-size: var(--smi-text-h2);
	font-weight: 700;
	line-height: 1.1;
	color: var(--smi-navy);
	font-variant-numeric: tabular-nums;
}

/* The accent rule under each figure widens on hover — the accent moves, so the
   number does not have to change colour to acknowledge the pointer. Gold as
   type on white would be 2.4:1; the accent as a rule is how it appears. */
.smi-trust__number::after {
	content: "";
	display: block;
	inline-size: 24px;
	block-size: 3px;
	margin: var(--smi-space-2) auto 6px;
	background-image: var(--smi-grad-accent);
	border-radius: var(--smi-radius-pill);
	transition: inline-size var(--smi-duration-mid) var(--smi-ease-spring);
}

.smi-trust__item:hover .smi-trust__number::after {
	inline-size: 44px;
}

.smi-trust__label {
	font-size: var(--smi-text-small);
	color: var(--smi-muted);
}

/* =========================================================================
   Section head — one pattern for every band
   ========================================================================= */

.smi-section__head--row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--smi-space-3);
}

.smi-section__head--row h2 {
	margin-block-end: 0;
}

.smi-link-more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-block-size: var(--smi-tap);
	font-size: var(--smi-text-button);
	font-weight: 600;
	color: var(--smi-navy);
	text-decoration: none;
	white-space: nowrap;
}

.smi-link-more:hover {
	text-decoration: underline;
}

.smi-link-more svg {
	inline-size: 16px;
	block-size: 16px;
	transition: translate var(--smi-duration) var(--smi-ease);
}

.smi-link-more:hover svg {
	translate: 3px 0;
}

/* =========================================================================
   City carousel — Browse by city
   =========================================================================
   Same carousel engine as the featured listings and news bands. Tiles are
   uniform slides; the most active market keeps a accent glow as the lead.
   ========================================================================= */

/* Slide sizing: shorter tiles than listing cards, four-up on wide screens. */
.smi-city-track > * {
	flex: 0 0 clamp(220px, calc((100% - 3 * var(--smi-space-4)) / 4), 340px);
}

@media (max-width: 639px) {
	.smi-city-track > * {
		flex-basis: 64%;
	}
}

.smi-city-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-block-size: 210px;
	padding: var(--smi-space-4);
	overflow: hidden;
	background-color: var(--smi-navy);
	background-image: linear-gradient(150deg, #17538A 0%, var(--smi-navy) 55%, #081F37 100%);
	border: 1px solid rgba(255, 255, 255, .07);
	border-radius: var(--smi-radius-card);
	text-decoration: none;
	box-shadow: var(--smi-shadow), var(--smi-edge-light-dark);
	transition:
		box-shadow var(--smi-duration-mid) var(--smi-ease),
		border-color var(--smi-duration-mid) var(--smi-ease),
		transform var(--smi-duration-mid) var(--smi-ease-spring);
}

/* City image, set per city from Cities > Edit city — the gradient above
   becomes a dark overlay in the inline style so tile text stays readable. */
.smi-city-tile--photo {
	background-size: cover;
	background-position: center;
}

/*
 * Gold bloom that grows from the top-right corner on hover.
 *
 * A separate layer rather than a background-image swap, because background
 * images cannot be transitioned — swapping them pops. Opacity on an overlay
 * gives the tile a light that comes up smoothly, which is the whole effect.
 */
.smi-city-tile::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: radial-gradient(ellipse 75% 65% at 92% 6%, rgba(var(--smi-accent-rgb), .30), transparent 62%);
	opacity: 0;
	transition: opacity var(--smi-duration-mid) var(--smi-ease);
}

/* The lead tile: biggest market, so it carries the glow at rest. */
.smi-city-tile--feature::before {
	opacity: .55;
}

.smi-city-tile:hover::before,
.smi-city-tile:focus-visible::before {
	opacity: 1;
}

.smi-city-tile:hover,
.smi-city-tile:focus-visible {
	box-shadow: var(--smi-shadow-xl), var(--smi-edge-light-dark);
	border-color: rgba(var(--smi-accent-rgb), .35);
	transform: translateY(-6px);
}

@media (prefers-reduced-motion: reduce) {
	.smi-city-tile:hover {
		transform: none;
	}
}

/*
 * Roofline watermark. Gold explicitly — currentColor here inherits the page's
 * navy link colour, invisible on a navy tile. Tilts on hover, like a nod.
 *
 * stroke-width is thinned for the same reason as the hero mark: roofline.svg
 * is authored at 5 units in a 64-unit viewBox, so at 120px it renders a ~9px
 * stroke that fills in as a solid shape rather than a drawn line, and cyan
 * that thick over blue desaturates to grey. At 2 it stays a line and stays
 * cyan, which lets the opacity go up instead of down.
 */
.smi-city-tile > svg {
	position: absolute;
	inset-block-start: -8px;
	inset-inline-end: -12px;
	inline-size: 120px;
	block-size: auto;
	opacity: .38;
	color: var(--smi-accent);
	stroke-width: 2;
	pointer-events: none;
	transition:
		transform var(--smi-duration-slow) var(--smi-ease-spring),
		opacity var(--smi-duration-mid) var(--smi-ease);
}


.smi-city-tile:hover > svg {
	transform: rotate(-6deg) scale(1.08);
	opacity: .6;
}

@media (prefers-reduced-motion: reduce) {
	.smi-city-tile:hover > svg {
		transform: none;
	}
}

.smi-city-tile__body {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--smi-space-2);
}

.smi-city-tile__name {
	font-family: var(--smi-font-head);
	font-size: var(--smi-text-h4);
	font-weight: 600;
	line-height: 1.2;
	color: var(--smi-white);
}


/* One combined availability figure per tile, as a quiet glass chip. */
.smi-city-tile__count {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	padding: 5px 13px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	border-radius: var(--smi-radius-pill);
	border: 1px solid var(--smi-glass-dark-border);
	background-color: var(--smi-glass-dark-bg);
	backdrop-filter: var(--smi-glass-blur);
	-webkit-backdrop-filter: var(--smi-glass-blur);
	box-shadow: var(--smi-edge-light-dark);
	color: var(--smi-white);
	font-variant-numeric: tabular-nums;
	transition: background-color var(--smi-duration) var(--smi-ease);
}

.smi-city-tile:hover .smi-city-tile__count {
	background-color: var(--smi-glass-dark-bg-hover);
}

/* Arrow chip — materialises from the corner on hover, the "go" affordance. */
.smi-city-tile__arrow {
	position: absolute;
	inset-inline-end: var(--smi-space-3);
	inset-block-end: var(--smi-space-3);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 34px;
	block-size: 34px;
	border-radius: var(--smi-radius-pill);
	background-color: var(--smi-accent);
	color: var(--smi-navy);
	opacity: 0;
	transform: translateX(6px);
	transition:
		opacity var(--smi-duration) var(--smi-ease),
		transform var(--smi-duration) var(--smi-ease);
}

.smi-city-tile__arrow svg {
	inline-size: 16px;
	block-size: 16px;
}

.smi-city-tile:hover .smi-city-tile__arrow,
.smi-city-tile:focus-visible .smi-city-tile__arrow {
	opacity: 1;
	transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
	.smi-city-tile__arrow {
		transform: none;
	}
}

/* =========================================================================
   Why SMI — icon cards
   ========================================================================= */

.smi-value {
	position: relative;
	padding: var(--smi-space-5) var(--smi-space-4);
	background-color: var(--smi-white);
	background-image: var(--smi-grad-card);
	border: 1px solid var(--smi-border);
	border-radius: var(--smi-radius-card);
	box-shadow: var(--smi-shadow), var(--smi-edge-light);
	transition:
		box-shadow var(--smi-duration-mid) var(--smi-ease),
		transform var(--smi-duration-mid) var(--smi-ease-spring);
}

/* Gold bar that draws in along the top edge on hover. Inset so it follows the
   card's radius instead of overhanging the rounded corners. */
.smi-value::before {
	content: "";
	position: absolute;
	inset-block-start: -1px;
	inset-inline-start: var(--smi-space-4);
	inline-size: 0;
	block-size: 3px;
	border-radius: var(--smi-radius-pill);
	background-image: var(--smi-grad-accent);
	transition: inline-size var(--smi-duration-mid) var(--smi-ease-spring);
}

.smi-value:hover {
	transform: translateY(-4px);
	box-shadow: var(--smi-shadow-lg), var(--smi-edge-light);
}

.smi-value:hover::before {
	inline-size: 52px;
}

@media (prefers-reduced-motion: reduce) {
	.smi-value:hover {
		transform: none;
	}
}

/*
 * The icon tile reads as a raised chip: accent-tinted gradient face, a hairline
 * ring, and a small ambient shadow. The rest of the card is white-on-white, so
 * this is the only place the eye can land — worth the extra depth.
 */
.smi-value__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 50px;
	block-size: 50px;
	margin-block-end: var(--smi-space-3);
	border-radius: var(--smi-radius-sm);
	background-image: linear-gradient(145deg, rgba(var(--smi-accent-rgb), .28) 0%, rgba(var(--smi-accent-rgb), .10) 100%);
	box-shadow:
		inset 0 0 0 1px rgba(var(--smi-accent-rgb), .30),
		inset 0 1px 0 rgba(255, 255, 255, .8),
		0 4px 10px -4px rgba(var(--smi-accent-rgb), .45);
	color: var(--smi-navy);
	transition: transform var(--smi-duration-mid) var(--smi-ease-spring);
}

.smi-value:hover .smi-value__icon {
	transform: translateY(-2px) rotate(-4deg);
}

@media (prefers-reduced-motion: reduce) {
	.smi-value:hover .smi-value__icon {
		transform: none;
	}
}

.smi-value__icon svg {
	inline-size: 22px;
	block-size: 22px;
}

.smi-value h3 {
	font-size: var(--smi-text-h4);
	margin-block-end: var(--smi-space-2);
}

/* =========================================================================
   How it works — numbered path
   ========================================================================= */

.smi-steps {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--smi-space-4);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: smi-step;
}

@media (min-width: 768px) {
	.smi-steps {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.smi-steps li {
	position: relative;
	counter-increment: smi-step;
	padding-block-start: var(--smi-space-6);
}

.smi-steps li::before {
	content: counter(smi-step, decimal-leading-zero);
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 42px;
	block-size: 42px;
	border-radius: var(--smi-radius-pill);
	background-image: var(--smi-grad-accent);
	color: var(--smi-navy);
	font-family: var(--smi-font-body);
	font-size: var(--smi-text-small);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	/* Raised coin: lit top edge, own contact shadow, accent aura. */
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .55),
		0 4px 12px -3px rgba(var(--smi-accent-rgb), .55);
	transition: transform var(--smi-duration-mid) var(--smi-ease-spring);
}

.smi-steps li:hover::before {
	transform: scale(1.08);
}

@media (prefers-reduced-motion: reduce) {
	.smi-steps li:hover::before {
		transform: none;
	}
}

/* Connecting rule between steps on desktop. */
@media (min-width: 768px) {
	/* Centred on the 42px coin above: 42/2 - 1 = 20 from the top, 42 + 12 = 54
	   from the left. Retune both if the coin size changes. */
	.smi-steps li:not(:last-child)::after {
		content: "";
		position: absolute;
		inset-block-start: 20px;
		inset-inline-start: 54px;
		inset-inline-end: calc(-1 * var(--smi-space-4) + 8px);
		block-size: 2px;
		background-image: linear-gradient(to right, var(--smi-border) 60%, transparent 0);
		background-size: 10px 2px;
	}
}

.smi-steps h3 {
	font-size: var(--smi-text-h4);
	margin-block-end: var(--smi-space-2);
}

/* =========================================================================
   Four listings per row (desktop, homepage only)
   =========================================================================
   This file is enqueued only under is_front_page(), so these rules cannot
   reach the archives or the "Similar properties" grid on a listing page —
   those deliberately stay at three across, where the cards sit in a narrower
   column beside the filter sidebar.

   Below 1024px nothing changes: base.css already steps 1 → 2 columns, and a
   four-up row on a tablet would put the card body under 200px. */

@media (min-width: 1024px) {
	.smi-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	/*
	 * The featured carousel shows four at a time to match the grids below it.
	 * Only the listing track: the "Browse by city" tiles and the articles
	 * carousel keep their own three-up rhythm.
	 */
	.smi-listing-track > * {
		flex-basis: clamp(230px, calc((100% - 3 * var(--smi-space-4)) / 4), 340px);
	}
}