/*
 * Single listing page — PRD §8.4.
 *
 * Loaded only on `smi_property` and `smi_rental` singulars. One layout serves
 * both types; the [S] and [R] sections are shown or hidden in PHP, not here.
 *
 * Mobile-first vertical stack; from 1024px a two-column layout with a sticky
 * sidebar that follows the visitor down the whole page.
 */

/* -- Layout -------------------------------------------------------------- */

.smi-listing {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--smi-space-5);
	/* Bottom gap to the footer comes from main.wrap (base.css). */
}

@media (min-width: 1024px) {
	.smi-listing {
		grid-template-columns: minmax(0, 1fr) 360px;
		gap: var(--smi-space-6);
		align-items: start;
	}
}

.smi-listing__aside {
	display: none;
}

@media (min-width: 1024px) {
	.smi-listing__aside {
		display: block;
		position: sticky;
		/* Clears Kadence's sticky header. */
		inset-block-start: 96px;
	}
}

/*
 * Below 1024px the sidebar's job is done by the fixed bottom action bar, so
 * the page ends with breathing room rather than a duplicate CTA block — and
 * needs padding so the bar never covers the last section.
 */
@media (max-width: 1023px) {
	.smi-listing {
		/* Clearance for the fixed action bar ONLY — the page's own bottom gap
		   is main.wrap's job now, so this is the bar's height and nothing more.
		   Leaving the old +space-6 here stacked to ~130px against that gap. */
		padding-block-end: var(--smi-tap);
	}
}

.smi-listing__section + .smi-listing__section {
	margin-block-start: var(--smi-space-6);
	padding-block-start: var(--smi-space-6);
	border-block-start: 1px solid var(--smi-border);
}

/*
 * The in-body price block mirrors the sticky sidebar word for word. Below
 * 1024px the sidebar is hidden and this is the only place the price policy
 * appears; from 1024px both are on screen at once, so only the sidebar keeps it.
 */
@media (min-width: 1024px) {
	.smi-listing__section--price {
		display: none;
	}
}

.smi-listing__section h2 {
	font-size: var(--smi-text-h3);
}

/* -- Title block --------------------------------------------------------- */

/*
 * h2 scale, not h1. The display size is meant for a page whose title IS the
 * message; here the photograph carries that job and the title is a label for
 * it, so at 44px it was pushing the address, reference and key facts down the
 * page without earning the room. Still a clear step above the section
 * headings, which sit on the h3 scale below.
 */
.smi-listing__title {
	font-size: var(--smi-text-h2);
	margin-block-end: var(--smi-space-2);
}

.smi-listing__address {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--smi-muted);
	margin-block-end: var(--smi-space-3);
}

.smi-listing__ref {
	font-family: var(--smi-font-body);
	font-size: var(--smi-text-small);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.04em;
	color: var(--smi-muted);
}

/* -- Gallery ------------------------------------------------------------- */

.smi-gallery {
	position: relative;
	border-radius: var(--smi-radius-card);
	overflow: hidden;
	background-color: var(--smi-surface);
}

.smi-gallery__hero {
	aspect-ratio: 4 / 3;
}

/*
 * 4:3 on the wide desktop column is ~650px tall, which pushed the title, the
 * key facts and the CTA entirely below the fold. 3:2 keeps the photograph
 * dominant without the first screen being nothing but photograph.
 */
@media (min-width: 1024px) {
	.smi-gallery__hero {
		aspect-ratio: 3 / 2;
	}
}

.smi-gallery__hero img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
}

.smi-gallery__count {
	position: absolute;
	inset-block-end: var(--smi-space-2);
	inset-inline-end: var(--smi-space-2);
	padding: 4px 10px;
	border-radius: var(--smi-radius-pill);
	background-color: rgba(var(--smi-navy-rgb), .78);
	color: var(--smi-white);
	font-size: var(--smi-text-small);
	font-variant-numeric: tabular-nums;
}

.smi-gallery__thumbs {
	display: flex;
	gap: var(--smi-space-2);
	margin-block-start: var(--smi-space-2);
	overflow-x: auto;
	scrollbar-width: thin;
	padding-block-end: var(--smi-space-1);
}

.smi-gallery__thumb {
	flex: 0 0 96px;
	aspect-ratio: 4 / 3;
	border: 2px solid transparent;
	border-radius: var(--smi-radius-btn);
	overflow: hidden;
	padding: 0;
	background: none;
	cursor: pointer;
}

.smi-gallery__thumb[aria-current="true"] {
	border-color: var(--smi-accent);
}

.smi-gallery__thumb img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

/* Status ribbon over the gallery, same treatment as the card. */
.smi-gallery .smi-card__ribbon {
	inset-block-start: 30px;
	inset-inline-end: -44px;
	inline-size: 200px;
}

/* -- Lightbox ------------------------------------------------------------ */

.smi-lightbox {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgba(var(--smi-navy-rgb), .94);
}

.smi-lightbox[hidden] {
	display: none;
}

.smi-lightbox__image {
	max-inline-size: 94vw;
	max-block-size: 82vh;
	object-fit: contain;
}

.smi-lightbox__control {
	position: absolute;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: var(--smi-tap);
	block-size: var(--smi-tap);
	border: 0;
	border-radius: var(--smi-radius-pill);
	background-color: rgba(255, 255, 255, .12);
	color: var(--smi-white);
	cursor: pointer;
}

.smi-lightbox__control:hover {
	background-color: rgba(255, 255, 255, .24);
}

.smi-lightbox__control--close {
	inset-block-start: var(--smi-space-3);
	inset-inline-end: var(--smi-space-3);
}

.smi-lightbox__control--prev {
	inset-inline-start: var(--smi-space-3);
}

.smi-lightbox__control--next {
	inset-inline-end: var(--smi-space-3);
}

.smi-lightbox__counter {
	position: absolute;
	inset-block-end: var(--smi-space-4);
	color: var(--smi-white);
	font-size: var(--smi-text-small);
	font-variant-numeric: tabular-nums;
}

/* -- Key facts strip ----------------------------------------------------- */

/*
 * Borders live on the items, not on a 1px grid gap over a coloured container.
 * The gap trick leaves any unfilled cell in the last row showing as a solid
 * grey block — and the fact count varies by listing type and by how much the
 * admin filled in, so a ragged last row is the normal case, not the exception.
 */
.smi-facts {
	display: grid;
	/* 190px, not 160 — "Bachelors (Male), Students" and "Fully furnished" are
	   normal values here and wrap to three lines in a narrower track. */
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	margin: 0;
	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);
	overflow: hidden;
}

/*
 * Each cell draws its own top and left rule with a box-shadow rather than a
 * border, so the lines sit outside the box and the container's overflow:hidden
 * clips the outermost ones. No negative margins, and an incomplete last row
 * simply has no cells to draw.
 *
 * Flex column with a gap rather than margins on the children: the <dd> ships
 * with a 27px UA bottom margin that nothing here reset, which padded every
 * cell with dead space and — because grid cells stretch to the tallest —
 * dragged the whole strip ~30px taller than its content. Owning the spacing
 * here means the label sits on a clean row across cells and the value column
 * ends where the text ends.
 */
.smi-facts__item {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: var(--smi-space-2) var(--smi-space-3);
	box-shadow: -1px -1px 0 0 var(--smi-border);
}

@media (min-width: 640px) {
	.smi-facts__item {
		padding: var(--smi-space-3);
	}
}

.smi-facts__label {
	display: block;
	margin: 0;
	font-size: 0.6875rem;
	font-weight: 600;
	/* 1.2, not the inherited 1.6 — at 11px that leading added 7px of air per
	   cell for no legibility gain, and the strip is a scan bar, not prose. */
	line-height: 1.2;
	letter-spacing: var(--smi-track-label);
	text-transform: uppercase;
	color: var(--smi-muted);
}

.smi-facts__value {
	margin: 0;
	font-family: var(--smi-font-head);
	font-size: var(--smi-text-body);
	font-weight: 600;
	/* 1.25 rather than the inherited 1.6: "Residential Plot" and "Fully
	   furnished" wrap to two lines as a matter of course here, and body
	   leading makes that pair read as two separate facts. */
	line-height: 1.25;
	color: var(--smi-navy);
	font-variant-numeric: tabular-nums;
	/* Splits "Bachelors (Male), Students" evenly instead of stranding one
	   word on the second line. */
	text-wrap: balance;
}

/* -- Price block --------------------------------------------------------- */

/*
 * The price policy is explained plainly, once, without apology — and the
 * explanation sits directly under the "on Request" line so it reads as
 * personal service rather than evasion (BRAND-GUIDELINES §1.3, §6.1).
 */
/* The accent edge stays a BORDER, not a gradient bar: it is the one structural
   use of the accent on this page and it has to survive Windows high-contrast mode,
   which drops background images but keeps borders. */
.smi-price-block {
	padding: var(--smi-space-5);
	background-color: var(--smi-surface);
	background-image: linear-gradient(135deg, rgba(var(--smi-accent-rgb), .07) 0%, var(--smi-surface) 45%);
	border: 1px solid var(--smi-border);
	border-inline-start: 4px solid var(--smi-accent);
	border-radius: var(--smi-radius-card);
	box-shadow: var(--smi-shadow), var(--smi-edge-light);
	margin-top: 25px;
}

.smi-price-block__line {
	font-family: var(--smi-font-head);
	font-size: var(--smi-text-h3);
	font-weight: 600;
	/* Navy, never the accent — cyan on this surface is 2.4:1. */
	color: var(--smi-navy);
	margin-block-end: var(--smi-space-2);
}

.smi-price-block__note {
	color: var(--smi-muted);
	margin-block-end: var(--smi-space-3);
	max-inline-size: var(--smi-measure);
}

/* -- Specification table (§8.4 #7) ---------------------------------------- */

.smi-specs {
	inline-size: 100%;
	border-collapse: collapse;
}

.smi-specs tr {
	border-block-end: 1px solid var(--smi-border);
}

.smi-specs th,
.smi-specs td {
	padding: 12px var(--smi-space-2);
	text-align: start;
	vertical-align: top;
	font-size: var(--smi-text-small);
}

.smi-specs th {
	inline-size: 45%;
	font-weight: 500;
	color: var(--smi-muted);
}

.smi-specs td {
	font-weight: 500;
	color: var(--smi-ink);
}

@media (min-width: 768px) {
	.smi-specs {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--smi-space-5);
	}

	.smi-specs tbody {
		display: contents;
	}

	.smi-specs tr {
		display: grid;
		grid-template-columns: minmax(0, 45%) minmax(0, 1fr);
	}
}

/* -- Amenities ----------------------------------------------------------- */

.smi-amenities {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--smi-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

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

.smi-amenities li {
	display: flex;
	align-items: center;
	gap: var(--smi-space-2);
	font-size: var(--smi-text-small);
}

.smi-amenities svg {
	inline-size: 18px;
	block-size: 18px;
	color: var(--smi-teal);
	flex-shrink: 0;
}

/* -- [R] Rental terms panel (§8.4 #9) -------------------------------------
   States arrangements only — never amounts. "Maintenance: Extra" is correct;
   a rupee figure here would break the price-privacy model (PRD §7.3, §13).
   ------------------------------------------------------------------------ */

.smi-rental-terms {
	padding: var(--smi-space-4);
	background-color: var(--smi-white);
	border: 1px solid var(--smi-border);
	border-radius: var(--smi-radius-card);
}

.smi-rental-terms__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--smi-space-3);
	margin: 0;
}

@media (min-width: 640px) {
	.smi-rental-terms__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* -- [R] What's included checklist (§8.4 #10) ----------------------------- */

.smi-furnishing {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--smi-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.smi-furnishing li {
	display: flex;
	align-items: center;
	gap: var(--smi-space-2);
	font-size: var(--smi-text-small);
}

.smi-furnishing li::before {
	content: "✓";
	color: var(--smi-new);
	font-weight: 700;
}

/* -- [S] Legal & approvals ------------------------------------------------ */

.smi-trust-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border: 1px solid var(--smi-new);
	border-radius: var(--smi-radius-pill);
	color: var(--smi-new);
	font-size: var(--smi-text-small);
	font-weight: 600;
}

/* -- Video facade (§8.4 #13) ----------------------------------------------
   The YouTube iframe is not loaded until the visitor clicks. An eagerly
   embedded player is ~800KB of third-party JavaScript and is the most common
   single cause of a failing mobile LCP on a page like this.
   ------------------------------------------------------------------------ */

.smi-video-facade {
	position: relative;
	aspect-ratio: 16 / 9;
	inline-size: 100%;
	padding: 0;
	border: 0;
	border-radius: var(--smi-radius-card);
	overflow: hidden;
	cursor: pointer;
	background-color: var(--smi-navy);
}

.smi-video-facade img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	opacity: .8;
}

.smi-video-facade__play {
	position: absolute;
	inset: 50% auto auto 50%;
	translate: -50% -50%;
	inline-size: 64px;
	block-size: 64px;
	display: grid;
	place-items: center;
	border-radius: var(--smi-radius-pill);
	background-color: var(--smi-accent);
	color: var(--smi-navy);
}

.smi-video-embed {
	aspect-ratio: 16 / 9;
	inline-size: 100%;
	border: 0;
	border-radius: var(--smi-radius-card);
}

/* -- Map ------------------------------------------------------------------ */

.smi-map {
	aspect-ratio: 16 / 9;
	inline-size: 100%;
	border: 1px solid var(--smi-border);
	border-radius: var(--smi-radius-card);
	overflow: hidden;
}

.smi-map iframe {
	inline-size: 100%;
	block-size: 100%;
	border: 0;
}

/* -- Sticky sidebar card -------------------------------------------------- */

/*
 * The conversion card. It follows the visitor down the whole page, so it earns
 * a step more elevation than the content beside it — it should read as sitting
 * ON the page rather than in the column, which is also why it keeps its own
 * accent top rule rather than borrowing the section rhythm.
 */
.smi-agent-card {
	position: relative;
	padding: var(--smi-space-5);
	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-lg), var(--smi-edge-light);
	overflow: hidden;
}

/*
 * A flat bar here gets clipped by the 20px corner radius into a shape with two
 * hard tapered ends, which reads as a rendering glitch. Fading the gradient to
 * transparent across the outer 18% means the bar has already gone before the
 * curve starts, so the taper is never visible.
 */
.smi-agent-card::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-start: 0;
	block-size: 3px;
	background-image: linear-gradient(
		to right,
		transparent 0%,
		var(--smi-accent) 18%,
		var(--smi-accent-300) 50%,
		var(--smi-accent) 82%,
		transparent 100%
	);
}

.smi-agent-card__head {
	display: flex;
	align-items: center;
	gap: var(--smi-space-3);
	margin-block-end: var(--smi-space-3);
}

.smi-agent-card__avatar {
	inline-size: 56px;
	block-size: 56px;
	border-radius: var(--smi-radius-pill);
	object-fit: cover;
}

.smi-agent-card__actions {
	display: flex;
	flex-direction: column;
	gap: var(--smi-space-2);
}