/*
 * Chennai Home Guide — Project detail page (the flagship page).
 *
 * Phase 1 visual redesign (structure/hierarchy/spacing/typography only —
 * no new data, no schema change, no JS): four sequential top-level
 * regions, in DOM order:
 *
 *   .chg-project-identity        — name, builder/locality byline,
 *                                   verified badge. Full width, above
 *                                   the media hero (previously part of
 *                                   the hero, below the media — reversed
 *                                   this pass so identity establishes
 *                                   context before the image).
 *   .chg-project-media           — full-width hero image, standalone,
 *                                   unchanged functionality.
 *   .chg-project-body-shell      — Key Project Information (Content\
 *                                   ProjectQuickFacts — absorbs what
 *                                   used to be the hero's own price/
 *                                   status/configuration/RERA facts,
 *                                   plus data reused from the orphaned
 *                                   Content\ProjectResearchSidebar, never
 *                                   its old card markup), Configurations
 *                                   & Pricing, description, Amenities,
 *                                   Price History, Location, Floor Plans/
 *                                   Videos/Documents (left), paired with
 *                                   a presentation-only enquiry card that
 *                                   stays sticky for the whole shell
 *                                   (right). Two flat children —
 *                                   __identity (Key Info only now), __rail
 *                                   — plus __research, in that DOM order
 *                                   so the rail lands between Key
 *                                   Information and Configurations when
 *                                   stacked (mobile/tablet);
 *                                   grid-template-areas repositions it
 *                                   beside both regions at desktop widths
 *                                   without moving it in the DOM.
 *   .chg-project-discovery-zone  — Nearby + Related Projects, full width,
 *                                  its own column ratio, outside the
 *                                  shell entirely (so the rail can never
 *                                  reach it).
 *
 * Configurations & Pricing, Price History, and Location are now each
 * their own full-width-of-main-column standalone section (previously
 * Configurations/Price History and Research Snapshot/Location were
 * paired side-by-side rows) — deliberate informational separation per
 * this pass's direction, and it also gives Configurations the real
 * container width it needs to stay in its 4-column table form at more
 * viewport widths (see the container-query note further down). Amenities
 * moved earlier (before Price History/Location, was after); Price
 * History and Location both moved later (after Amenities, were paired
 * with each other right after the description).
 *
 * The typography roles locked in Design System Slice 2 (Display, Section
 * H2, Sidebar title, Card H3, Card/stat figure, Body, Metadata, Eyebrow,
 * Muted/unavailable) are preserved and reused throughout — this pass is
 * about composition and hierarchy, not the type scale itself.
 *
 * The generic pill/chip classes live in components/project-card.css
 * (shared with every card grid); the Amenities detail-block display
 * lives in components/detail-list.css (shared with Locality) — restyled
 * into a grid via a Project-scoped override in this file, not by editing
 * that shared file (same pattern already used below for Related
 * Projects' card typography); general section padding rhythm lives in
 * layout.css (shared sitewide). This file only has what's genuinely
 * specific to this page. See CLAUDE.md, "CSS Architecture."
 */

/* ---------- Entity detail shell ----------
 * Wider container than the sitewide default (theme.json's 60rem) plus a
 * warm page background, scoped to .chg-project-single only via local
 * custom-property overrides — not by editing theme.json or layout.css.
 * When Locality/Builder are eventually redesigned, their own pattern
 * files should copy this same recipe rather than reinventing it. */

.chg-project-single {
	--wp--style--global--content-size: 82rem;
	--wp--style--global--wide-size: 86rem;
	/* Density-audit revision: white canvas, not the warm page-bg tint —
	 * scoped to this page only, reusing the sitewide "background" token
	 * (already #ffffff) rather than inventing a new value. page-bg
	 * itself is left in theme.json's palette for now — it becomes
	 * unused by this change, but confirmed (grep, this pass) to have no
	 * other consumer; removing the token is a separate, later cleanup
	 * decision, not bundled into this visual pass. */
	background-color: var(--wp--preset--color--background);
}

/* The footer sits outside .chg-project-single's scope entirely (it's a
 * template part, not a descendant), so it can't inherit the
 * custom-property override above — matched instead via the
 * `single-chg_project` body class WordPress adds automatically.
 * Project-page-only: every other template's footer stays at layout.css's
 * sitewide 60rem. (The header previously had its own identical override
 * here too; it's now layout.css's sitewide default instead, so every
 * template's header matches without a page-specific rule.) */
body.single-chg_project .chg-site-footer__inner,
body.single-chg_project .chg-site-footer__bottom {
	max-width: 82rem;
}

/* Breadcrumbs and each top-level zone are already independently
 * centered to the width above (WordPress's own
 * :where(.is-layout-constrained) > * rule, since all are direct
 * children of <main>) — only the header/footer had explicit horizontal
 * padding, so this keeps every top-level section's left/right edges
 * consistent with each other and the header. */
.chg-project-single > .chg-breadcrumbs,
.chg-project-single > .chg-project-identity,
.chg-project-single > .chg-project-media,
.chg-project-single > .chg-project-body-shell,
.chg-project-single > .chg-project-discovery-zone {
	padding-inline: var(--wp--preset--spacing--sm);
}

/* WordPress's own global styles add an unconditional 24px
 * margin-block-start to every direct child of any `.is-layout-flow`/
 * `.is-layout-constrained` container (`:root :where(.is-layout-flow) >
 * *`, etc.) — confirmed present on <main>, .chg-project-body-shell,
 * and .chg-project-body-shell__identity on this page. That silently
 * stacks on top of every padding/gap value tuned below, and — worse —
 * only applies from the *second* child onward, so it also nudges the
 * second column out of alignment in any 2-up grid row on this page
 * (Nearby vs. Related, in the discovery zone). Neutralized here,
 * Project-scoped only: this page controls
 * its own rhythm entirely through explicit padding-block/gap, not
 * WordPress's automatic block spacing. Real class selectors (not
 * :where()) so this reliably outranks WordPress's own rule regardless
 * of stylesheet load order. */
.chg-project-single .is-layout-flow > *,
.chg-project-single .is-layout-constrained > * {
	margin-block-start: 0;
}

/* ---------- Section rhythm (Project page only — layout.css's shared
 * .chg-section stays untouched so Builder/Locality/homepage are
 * unaffected) ----------
 * Visual-calibration pass: the shared xl/2xl rhythm (48px/64px) reads as
 * excessive vertical whitespace against the approved reference's denser
 * composition — tightened here, Project-scoped only. */

/* Refinement pass: desktop default trimmed from xl(48px) to lg(32px) —
 * every standalone section was getting the same large padding envelope
 * regardless of how much content it actually held, and un-pairing
 * Configurations from Price History (an earlier, separate, approved
 * change) already meant more sections now carry this padding
 * independently than before, compounding the effect. Location gets its
 * own explicit override back up to xl below — it now carries a
 * substantially larger map and warrants the extra room; nothing else
 * does by default. */
.chg-project-single .chg-section {
	padding-block: var(--wp--preset--spacing--lg);
}

@media (min-width: 860px) {
	.chg-project-single .chg-section {
		padding-block: var(--wp--preset--spacing--lg);
	}
}

.chg-project-single .chg-section + .chg-section {
	border-top: 1px solid var(--wp--preset--color--border);
}

/* Section H2 role — the same chg-section__title class is reused,
 * unchanged, by every PHP-rendered block's own <h2> as well as the
 * static template sections (Amenities), so this one rule covers all of
 * them with no PHP/template split: Configurations & Pricing, Price
 * History, Nearby & Daily Life, and Related Projects all share this one
 * role, deliberately (no per-component heading sizes). Density-audit
 * revision: weight down from 700 to 600 — the hierarchy step comes from
 * size (large, materially bigger than the medium/16px Sidebar/module
 * title below it and the data-row titles beneath that) plus a lighter
 * weight, not from stacking size AND heavy boldness together. */
.chg-project-single .chg-section__title {
	margin-bottom: var(--wp--preset--spacing--sm);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	line-height: 1.2;
}

/* ---------- Project body shell (Key Project Information + Configurations/
 * description [early] + Amenities/Price History/Location/Floor Plans/
 * Videos/Documents [late], paired with a presentation-only enquiry card
 * that stays sticky for the whole shell) ----------
 *
 * Four flat children — __identity (Key Information only, since Project
 * Identity itself now lives outside this shell entirely, above the media
 * hero), __research-early, __rail, __research-late — in that exact DOM
 * order. This specific DOM order is load-bearing, not cosmetic: the
 * mobile/tablet stacking sequence must put the enquiry form after
 * Configurations & Pricing and the description, never before them (an
 * explicit product requirement — the visitor should understand the
 * property before being asked to convert). grid-template-areas
 * repositions __rail beside both research regions at desktop widths,
 * spanning all three rows, without moving it in the DOM — so desktop
 * keeps its single sticky sidebar while mobile gets the correct reading
 * order, from the same markup. */

.chg-project-body-shell {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas:
		"top"
		"early"
		"rail"
		"late";
	gap: var(--wp--preset--spacing--lg);
}

@media (min-width: 1024px) {
	.chg-project-body-shell {
		/* Refinement pass: rail narrowed 22rem -> 19rem so the sidebar
		 * reads as clearly secondary/separated, not an equal-weight
		 * second column (see .chg-enquiry-card below for the matching
		 * reduction in the card's own visual weight). row-gap trimmed
		 * lg -> md as part of addressing the measured compounding gap
		 * between adjacent research regions (grid gap + each section's
		 * own padding stacking up) — see .chg-project-single .chg-section's
		 * own comment for the other half of that fix.
		 *
		 * column-gap bug fix: this was `var(--wp--preset--spacing--2xl)`,
		 * which silently resolved to nothing — WordPress generates
		 * `--wp--preset--spacing--2-xl` (hyphenated) for the "2xl"
		 * spacing slug, not `--wp--preset--spacing--2xl` — so the
		 * research column and the enquiry rail had *zero* gap between
		 * them at every desktop width until now, regardless of what this
		 * comment said. `lg` (2rem/32px) is the correct token for the
		 * ~24–32px gutter the two surfaces need to read as separate;
		 * the same `--spacing--2xl` typo exists in layout.css and
		 * front-page.css but is out of scope for this page-focused pass. */
		grid-template-columns: minmax(0, 1fr) 19rem;
		grid-template-areas:
			"top   rail"
			"early rail"
			"late  rail";
		column-gap: var(--wp--preset--spacing--lg);
		row-gap: var(--wp--preset--spacing--md);
		align-items: start;
	}
}

/* container-type here lets Configurations (early) and Amenities/Price
 * History/Location (late) react to their own real column width, not the
 * viewport's — needed because the rail permanently removes 22rem+gap
 * starting at 1024px, which a plain viewport media query has no way to
 * know. All three main-column regions share the same container name, so
 * existing container-query CSS elsewhere needed zero changes. */
.chg-project-body-shell__identity {
	grid-area: top;
	display: flex;
	flex-direction: column;
	min-width: 0;
	container-type: inline-size;
	container-name: chg-project-main;
}

.chg-project-body-shell__research-early {
	grid-area: early;
	display: flex;
	flex-direction: column;
	min-width: 0;
	container-type: inline-size;
	container-name: chg-project-main;
}

.chg-project-body-shell__research-late {
	grid-area: late;
	display: flex;
	flex-direction: column;
	min-width: 0;
	container-type: inline-size;
	container-name: chg-project-main;
}

.chg-project-body-shell__rail {
	grid-area: rail;
}

@media (min-width: 1024px) {
	.chg-project-body-shell__rail {
		position: sticky;
		/* .chg-site-header is itself position:sticky, top:0, and renders
		 * at 86px tall at this width tier (verified in earlier responsive
		 * checks) — this keeps the rail just below it, not overlapping.
		 * Scoped to this grid only: sticky positioning is naturally
		 * bounded by the grid row's own height (top + early + late, plus
		 * gaps), so the rail releases once the shell ends — it
		 * structurally cannot follow the page into the discovery zone
		 * below, since that zone is a separate sibling entirely outside
		 * this grid. No JS involved. */
		top: calc(86px + var(--wp--preset--spacing--md));
	}
}

/* ---------- Sparse Project structural collapse ----------
 * When a Project has neither Key Project Information nor Configurations
 * & Pricing (both render nothing when their own data is absent — no
 * class toggle, this detects the real DOM state via :has()), there is no
 * meaningful research content for a sidebar to sit beside. Rather than
 * keep forcing the full two-column sticky-sidebar composition around
 * whatever's left (which makes the enquiry form look like the page's
 * dominant content purely because everything else is empty), the shell
 * collapses to one natural column and the rail stops being sticky/
 * full-height, sitting at its own natural size instead. No new copy, no
 * hidden enquiry form — the form still renders, just not stretched into
 * false prominence.
 *
 * Second condition (Explorer + Location both absent): a Project can
 * still have a genuinely thin Key Project Information card (a
 * configuration summary line, a verification badge or two — no price,
 * no fact list) without tripping the rule above, since Key Facts itself
 * did render something. Explorer and Location are this page's two
 * tallest "late"/"early" sections in practice — when a Project has
 * neither, the main column has nothing left to give it real height, and
 * the same blank-gap-beside-a-full-height-sidebar problem reappears.
 * Same fix, same reasoning, just a second, independent trigger for it —
 * confirmed against Casagrand Royale/Savoye (thin Key Facts, no
 * Explorer, no Location), which is exactly this shape. */
@media (min-width: 1024px) {
	.chg-project-body-shell:not(:has(.chg-project-keyinfo)):not(:has(.chg-project-configurations)),
	.chg-project-body-shell:not(:has(.chg-explorer)):not(:has(.chg-project-location)) {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"top"
			"early"
			"rail"
			"late";
	}

	.chg-project-body-shell:not(:has(.chg-project-keyinfo)):not(:has(.chg-project-configurations)) .chg-project-body-shell__rail,
	.chg-project-body-shell:not(:has(.chg-explorer)):not(:has(.chg-project-location)) .chg-project-body-shell__rail {
		position: static;
		max-width: 26rem;
	}
}

/* ---------- Enquiry card ----------
 * Project enquiry form is provided by the embedded HubSpot form.
 * Styling is scoped to this card's own wrapper (never the .hs-* form
 * internals) so HubSpot form presentation does not affect forms
 * elsewhere on the site, and so the HubSpot embed itself is never
 * touched. Refinement pass: padding trimmed md -> sm and the title
 * dropped one type step, so the card reads as a supporting, secondary
 * element next to the research column, not an equal-weight second
 * panel — a modest visual weight reduction, not a redesign of the form. */
.chg-enquiry-card {
	padding: var(--wp--preset--spacing--sm);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--lg);
	background-color: var(--wp--preset--color--background);
}

.chg-enquiry-card__title {
	margin: 0 0 var(--wp--preset--spacing--xs);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.3;
}

.chg-enquiry-card__subtitle {
	margin: 0 0 var(--wp--preset--spacing--sm);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

/* HubSpot form */
.chg-enquiry-card__form .hs-form-field {
	margin-bottom: var(--wp--preset--spacing--sm);
}

.chg-enquiry-card__form label {
	display: block;
	margin-bottom: 0.35rem;
	color: var(--wp--preset--color--foreground);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
}

.chg-enquiry-card__form .hs-input {
	width: 100% !important;
	min-height: 2.75rem;
	padding: 0.65rem 0.75rem;
	box-sizing: border-box;
	border: 1px solid var(--wp--preset--color--border) !important;
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--preset--color--background) !important;
	color: var(--wp--preset--color--foreground) !important;
	font: inherit;
}

.chg-enquiry-card__form .hs-input:focus {
	border-color: var(--wp--preset--color--accent) !important;
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 1px;
}

.chg-enquiry-card__form .hs-button {
	width: 100%;
	min-height: 2.75rem;
	border-radius: var(--wp--custom--radius--md);
	cursor: pointer;
	font: inherit;
	font-weight: 600;
}

/* ---------- Project Identity ----------
 * Full width, above the media hero (Phase 1 reorder — previously this
 * was the hero's own top tier, below the media). Name, builder/locality
 * byline, and the aggregate verified badge only — deliberately not
 * overloaded with every project fact; price/status/configuration/RERA
 * now live in Key Project Information below, where they belong alongside
 * the rest of this Project's researched facts. */

.chg-project-identity {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--xs);
	padding-block: var(--wp--preset--spacing--lg) var(--wp--preset--spacing--sm);
	min-width: 0;
}

.chg-project-identity h1 {
	font-size: var(--wp--preset--font-size--display);
	line-height: 1.08;
	letter-spacing: -0.02em;
}

.chg-project-identity__byline {
	gap: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md);
	margin: var(--wp--preset--spacing--xs) 0 0;
}

.chg-project-identity__byline-item {
	gap: 0.375rem;
	align-items: center;
}

.chg-project-identity__byline-item .chg-icon {
	color: var(--wp--preset--color--muted);
}

.chg-project-identity__byline-item p {
	margin: 0;
	font-size: var(--wp--preset--font-size--medium);
}

.chg-project-identity__byline-item a {
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.chg-project-identity__byline-item a:hover {
	border-color: var(--wp--preset--color--accent);
}

/* Aggregate trust signal (Content\ProjectFieldBindings::
 * verified_project_badge() — RERA + Builder + Locality all verified).
 * The bound paragraph is empty whenever the rule is false; :empty
 * collapses it entirely, so an unverified Project shows no badge and no
 * leftover chrome. */
.chg-project-identity__verified-badge:empty {
	display: none;
}

.chg-verified-project-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	margin-top: var(--wp--preset--spacing--xs);
	color: var(--wp--preset--color--accent);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

/* A compact "Source · Checked date" line — used beside the price and RERA
 * facts in Key Project Information below. Kept scoped to this page for
 * now since nothing else consumes it yet. */
.chg-provenance-chip {
	display: block;
	margin: 0.125rem 0 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.chg-provenance-chip:empty {
	display: none;
}

/* ---------- Key Project Information (Content\ProjectQuickFacts) ----------
 * Refinement pass: price/status headline, then a single condensed
 * "configurations · project type" summary line (was two separate flat
 * facts before — folded up here so they read as "what this project is,"
 * not more data-table rows), then supporting facts in a 2-column
 * definition grid at wider widths (single column on mobile), then a
 * restrained trust-signals line. Builder/Locality are deliberately not
 * repeated here since both already appear in the Project Identity
 * byline above. */

.chg-project-single .chg-project-keyinfo {
	padding-block: var(--wp--preset--spacing--md) var(--wp--preset--spacing--lg);
}

.chg-keyinfo {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--xs);
}

.chg-keyinfo__headline {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.75rem 1rem;
}

.chg-keyinfo__price {
	margin: 0;
	color: var(--wp--preset--color--foreground);
	font-size: var(--wp--preset--font-size--figure);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.01em;
}

.chg-keyinfo__price-suffix {
	margin-left: 0.375rem;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
}

/* .chg-pill/.chg-pill--status (components/project-card.css) supplies
 * the pill shape/color — reused as-is, not overridden here. */

.chg-keyinfo__summary {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--medium);
}

/* 2-column definition grid at wider widths — each cell keeps its own
 * hairline top divider (a lighter-weight echo of the previous full-width
 * row dividers, appropriate now that a "row" is only half as wide).
 * Single column below the container threshold, so mobile gets one clean
 * readable stack rather than a compressed 2-up grid. */
.chg-keyinfo__facts {
	display: grid;
	grid-template-columns: 1fr;
	margin: var(--wp--preset--spacing--xs) 0 0;
}

@supports (container-type: inline-size) {
	@container chg-project-main (min-width: 30rem) {
		.chg-keyinfo__facts {
			grid-template-columns: repeat(2, 1fr);
			column-gap: var(--wp--preset--spacing--lg);
		}
	}
}

@supports not (container-type: inline-size) {
	@media (min-width: 860px) {
		.chg-keyinfo__facts {
			grid-template-columns: repeat(2, 1fr);
			column-gap: var(--wp--preset--spacing--lg);
		}
	}
}

.chg-keyinfo__fact {
	padding-block: 0.5rem;
	border-top: 1px solid var(--wp--preset--color--border);
}

.chg-keyinfo__fact dt {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.chg-keyinfo__fact dd {
	margin: 0.125rem 0 0;
	color: var(--wp--preset--color--foreground);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-align: left;
}

.chg-keyinfo__fact dd .chg-provenance-chip {
	margin-top: 0.125rem;
	font-weight: 400;
}

.chg-keyinfo__signals {
	list-style: none;
	margin: var(--wp--preset--spacing--xs) 0 0;
	padding: var(--wp--preset--spacing--xs) 0 0;
	border-top: 1px solid var(--wp--preset--color--border);
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
}

.chg-keyinfo__signals li {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	color: var(--wp--preset--color--foreground);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.chg-keyinfo__signals .chg-icon {
	flex-shrink: 0;
	color: var(--wp--preset--color--accent);
}

/* ---------- Key Project Details (Content\ProjectKeyDetails) ----------
 * A compact facts grid between Key Project Information and the
 * Configuration & Cost Explorer — 1 column mobile, 2 tablet, 3 desktop.
 * Same muted-label/strong-value typography and hairline-divider
 * treatment as .chg-keyinfo__fact above, for visual consistency, but
 * its own grid (3 columns, not 2) and no provenance chips/icons — a
 * plainer, quieter fact list by design (CLAUDE.md-aligned: no
 * unnecessary icons, no excessive borders). */

.chg-project-single .chg-project-keydetails {
	padding-block: 0 var(--wp--preset--spacing--lg);
}

.chg-keydetails__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	margin: 0;
}

@supports (container-type: inline-size) {
	@container chg-project-main (min-width: 30rem) {
		.chg-keydetails__grid {
			grid-template-columns: repeat(2, 1fr);
			column-gap: var(--wp--preset--spacing--lg);
		}
	}

	@container chg-project-main (min-width: 55rem) {
		.chg-keydetails__grid {
			grid-template-columns: repeat(3, 1fr);
		}
	}
}

@supports not (container-type: inline-size) {
	@media (min-width: 860px) {
		.chg-keydetails__grid {
			grid-template-columns: repeat(2, 1fr);
			column-gap: var(--wp--preset--spacing--lg);
		}
	}

	@media (min-width: 1200px) {
		.chg-keydetails__grid {
			grid-template-columns: repeat(3, 1fr);
		}
	}
}

.chg-keydetails__fact {
	padding-block: 0.625rem;
	border-top: 1px solid var(--wp--preset--color--border);
}

.chg-keydetails__fact dt {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.chg-keydetails__fact dd {
	margin: 0.125rem 0 0;
	color: var(--wp--preset--color--foreground);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

/* ---------- Configuration & Cost Explorer (Content\ProjectConfigurationCards) ----------
 * A permanently-locked LEFT vertical selector on desktop (never top
 * tabs — see CLAUDE.md/the implementation brief this pass followed)
 * that becomes a horizontally-scrollable chip row on narrow viewports
 * — the same underlying markup and data at every width, only the CSS
 * layout direction changes. All groups/variants render fully expanded
 * in the server HTML; assets/js/project-configuration-explorer.js is
 * what collapses this down to one visible group/variant and wires the
 * buttons — see that file for why nothing here depends on JS having
 * run for the content itself to be readable.
 *
 * The desktop/mobile split below is a plain viewport @media query, not
 * a container query: an earlier revision tried making `.chg-explorer`
 * a container that queried its own size to switch its own
 * flex-direction, which does not reliably restyle the querying element
 * itself (only its descendants) — the visible symptom was the left
 * nav's items correctly going vertical while the nav column never
 * moved beside the panel, leaving a tall empty-looking box above the
 * content. This component always spans the main content column's full
 * width (it never sits in a narrower nested layout), so a viewport
 * breakpoint is both simpler and correct here. */
.chg-explorer {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--preset--color--background);
	overflow: hidden;
}

.chg-explorer:not(.chg-explorer--single) {
	display: flex;
	flex-direction: column;
}

.chg-explorer__nav {
	position: relative;
	flex-shrink: 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
	background-color: var(--wp--preset--color--surface);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* Mobile-only edge hint that the chip row scrolls further — a plain
 * decorative fade, not scroll-position-aware (that would need JS this
 * component doesn't otherwise need). It's always shown at mobile
 * widths rather than only once genuinely scrolled, which is a
 * deliberate, acceptable simplification: the common case (more than a
 * couple of configurations) does overflow, and the fade is subtle
 * enough not to mislead when it occasionally doesn't. Hidden entirely
 * at desktop, where the rail never scrolls. */
.chg-explorer__nav::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 1.5rem;
	background: linear-gradient(to right, transparent, var(--wp--preset--color--surface));
	pointer-events: none;
}

.chg-explorer__nav-label {
	/* Desktop-only heading for the left rail (see the @media block
	 * below) — on the mobile horizontally-scrolling chip row the
	 * section title immediately above the Explorer already provides
	 * this context, so a second label here would be redundant; it's
	 * also aria-hidden in the PHP since the <nav>'s own aria-label
	 * already states the same thing to assistive tech. */
	display: none;
	margin: 0;
	padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--sm) var(--wp--preset--spacing--xs);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.chg-explorer__nav-list {
	display: flex;
	list-style: none;
	margin: 0;
	padding: var(--wp--preset--spacing--xs);
	gap: var(--wp--preset--spacing--xs);
}

.chg-explorer__nav-item {
	flex-shrink: 0;
	padding: 0.5rem var(--wp--preset--spacing--sm);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px;
	background-color: var(--wp--preset--color--background);
	color: var(--wp--preset--color--foreground);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	cursor: pointer;
}

.chg-explorer__nav-item--active {
	border-color: var(--wp--preset--color--accent);
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--background);
}

.chg-explorer__panels {
	flex: 1;
	min-width: 0;
}

.chg-explorer__panel {
	padding: var(--wp--preset--spacing--md);
}

/* Only ever visible pre-JS (every panel expanded, stacked in document
 * order) or when a browser genuinely lacks JS — once
 * project-configuration-explorer.js runs, every non-active panel
 * carries the native [hidden] attribute, so this divider only ever
 * separates two panels that are both actually on screen. */
.chg-explorer__panel + .chg-explorer__panel {
	border-top: 1px solid var(--wp--preset--color--border);
}

/* Right-panel header hierarchy: the configuration name reads as a
 * plain editorial heading; price is the strongest thing in the panel
 * (bigger than the heading itself, on its own line so it's never
 * competing with the area figure for attention); area is clearly
 * secondary — smaller, muted, immediately beneath. "3 BHK / ₹1.45 Cr –
 * ₹1.61 Cr / 1,588 – 1,782 sq.ft", each on its own line. */
.chg-explorer__panel-title {
	margin: 0 0 var(--wp--preset--spacing--xs);
	color: var(--wp--preset--color--foreground);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
}

.chg-explorer__panel-header {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	margin-bottom: var(--wp--preset--spacing--sm);
}

.chg-explorer__panel-price {
	margin: 0;
	color: var(--wp--preset--color--foreground);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.chg-explorer__panel-area {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	font-variant-numeric: tabular-nums;
}

.chg-explorer__variants-label {
	margin: 0 0 var(--wp--preset--spacing--xs);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.chg-explorer__variant-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--xs);
	margin-bottom: var(--wp--preset--spacing--sm);
}

.chg-explorer__variant-button {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.0625rem;
	padding: 0.5rem var(--wp--preset--spacing--sm);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--sm);
	background-color: var(--wp--preset--color--background);
	color: var(--wp--preset--color--foreground);
	font-size: var(--wp--preset--font-size--small);
	font-variant-numeric: tabular-nums;
	line-height: 1.3;
	cursor: pointer;
}

.chg-explorer__variant-button--active {
	border-color: var(--wp--preset--color--accent);
	background-color: var(--wp--preset--color--accent-tint);
	color: var(--wp--preset--color--accent-dark);
}

/* When a variant button shows both a source-supplied label and its
 * area ("Type A" + "1,588 sq.ft"), the label carries the emphasis and
 * the area reads as a lighter-weight, secondary detail beneath it —
 * same relationship as the panel price/area hierarchy above, at chip
 * scale. A button with only one of the two just shows that one span at
 * full weight (font-weight isn't set on the shared .chg-explorer__
 * variant-button-label/-area rule below on its own; see the label rule
 * for the always-bold treatment and the area rule for when it's dimmed). */
.chg-explorer__variant-button-label {
	font-weight: 600;
}

.chg-explorer__variant-button-area {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--xs);
}

/* A button with an area span but no label span needs that area to
 * carry full weight/size on its own — it's the only content, not a
 * secondary detail under something else. */
.chg-explorer__variant-button-area:only-child {
	color: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.chg-explorer__nav-item:focus-visible,
.chg-explorer__variant-button:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

.chg-explorer__details-title {
	margin: 0 0 var(--wp--preset--spacing--xs);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* Responsive facts grid — auto-fit means the column count adapts to
 * however many facts this row genuinely has (2, 3, 4+), never leaving
 * an awkward empty cell just to fill a fixed grid, and collapses
 * naturally to 1–2 columns on narrow containers/mobile once there
 * isn't room for a 9rem-minimum column beside another. */
.chg-explorer__details {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax(9rem, 1fr) );
	gap: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md);
	margin: 0 0 var(--wp--preset--spacing--sm);
	padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md);
	background-color: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--sm);
}

.chg-explorer__detail {
	display: flex;
	flex-direction: column;
	gap: 0.1875rem;
}

.chg-explorer__detail dt {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--xs);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.chg-explorer__detail dd {
	margin: 0;
	color: var(--wp--preset--color--foreground);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* Cost scaffold — Base Price plus a plain-language "not yet available"
 * note, deliberately not styled as a warning/error: this is an honest,
 * expected state for most Projects today, not a fault. See the PHP
 * class docblock for why no statutory figures are computed here. */
.chg-explorer__cost {
	padding-top: var(--wp--preset--spacing--sm);
	border-top: 1px dashed var(--wp--preset--color--border);
}

.chg-explorer__cost-title {
	margin: 0 0 var(--wp--preset--spacing--xs);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.chg-explorer__cost-base {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--wp--preset--spacing--sm);
	margin: 0 0 var(--wp--preset--spacing--xs);
	font-variant-numeric: tabular-nums;
}

.chg-explorer__cost-base span {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.chg-explorer__cost-base strong {
	color: var(--wp--preset--color--foreground);
	font-size: var(--wp--preset--font-size--medium);
}

/* Left vertical selector — the permanent desktop treatment. A genuine
 * two-column flex row: the nav column and the panel content become
 * flex siblings sitting side by side, both starting at the same
 * vertical position — not a wide nav block stacked above the panel
 * (see the class docblock above for why this is a viewport @media
 * query, not a container query). Styled to read as a clean settings-
 * style nav list (block rows, left-aligned, a left accent border on
 * the active item) rather than pill buttons floating in an otherwise
 * empty column. */
@media (min-width: 48rem) {
	.chg-explorer:not(.chg-explorer--single) {
		flex-direction: row;
		align-items: stretch;
	}

	.chg-explorer__nav {
		flex: 0 0 13.5rem;
		border-bottom: none;
		border-right: 1px solid var(--wp--preset--color--border);
		overflow-x: visible;
	}

	/* The mobile scroll-edge fade has nothing to indicate once the rail
	 * is a fixed vertical column — it never scrolls at this width. */
	.chg-explorer__nav::after {
		display: none;
	}

	.chg-explorer__nav-label {
		display: block;
	}

	.chg-explorer__nav-list {
		flex-direction: column;
		align-items: stretch;
		padding: 0 var(--wp--preset--spacing--xs) var(--wp--preset--spacing--sm);
		gap: 0.25rem;
	}

	.chg-explorer__nav-item {
		padding: 0.75rem var(--wp--preset--spacing--sm);
		border: none;
		border-left: 3px solid transparent;
		border-radius: 0 var(--wp--custom--radius--sm) var(--wp--custom--radius--sm) 0;
		background-color: transparent;
		color: var(--wp--preset--color--foreground);
		font-weight: 500;
		text-align: left;
		white-space: normal;
		transition: background-color 0.12s ease, border-left-color 0.12s ease;
	}

	.chg-explorer__nav-item:hover {
		background-color: var(--wp--preset--color--background);
		border-left-color: var(--wp--preset--color--border);
	}

	.chg-explorer__nav-item--active,
	.chg-explorer__nav-item--active:hover {
		border-left-color: var(--wp--preset--color--accent);
		background-color: var(--wp--preset--color--accent-tint);
		color: var(--wp--preset--color--accent-dark);
		font-weight: 600;
	}

	.chg-explorer__panel + .chg-explorer__panel {
		border-top: none;
	}
}

/* ---------- Price History (Content\ProjectPriceHistoryChart) ---------- */

.chg-price-history__grid {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--sm);
}

/* Secondary metric (e.g. price/sq.ft) — real data, kept behind this
 * disclosure so only the primary chart dominates initially. Same
 * treatment as .chg-config-expand's "View all configurations". */
.chg-price-history__more > summary {
	cursor: pointer;
	list-style: none;
	color: var(--wp--preset--color--accent-dark);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.chg-price-history__more > summary::-webkit-details-marker {
	display: none;
}

.chg-price-history__more > summary:hover {
	color: var(--wp--preset--color--accent);
}

.chg-price-history__more[open] > summary {
	margin-bottom: var(--wp--preset--spacing--sm);
}

.chg-price-history__card {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	padding: var(--wp--preset--spacing--sm);
	background-color: var(--wp--preset--color--background);
}

.chg-price-history__card--single {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

/* Rendered server-side, not this template — can't receive a className
 * addition, so the .chg-eyebrow recipe is matched here directly. */
.chg-price-history__series-title {
	margin: 0;
	color: var(--wp--preset--color--muted);
	text-transform: uppercase;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.05em;
}

.chg-price-history__card-header {
	margin-bottom: var(--wp--preset--spacing--sm);
}

.chg-price-history__summary {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.625rem;
	margin-top: 0.25rem;
}

/* Card/stat figure role. Rendered server-side, not this template. */
/* Restored to the figure token (24px) — see the matching note on
 * .chg-config-row__price for why this is being reinstated after the
 * earlier density pass shrank it to "large", which had tied it visually
 * with Section H2. */
.chg-price-history__summary-current {
	color: var(--wp--preset--color--foreground);
	font-size: var(--wp--preset--font-size--figure);
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
	letter-spacing: -0.01em;
}

.chg-price-history__summary-current-label {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	text-transform: none;
	letter-spacing: normal;
}

.chg-price-history__change {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* Direction only, not a value judgement — a price decrease isn't
 * automatically bad for a buyer. Both directions use the site's own
 * neutral text/accent tones (no red/green semantics); the +/- sign
 * already present in the derived percentage text carries the actual
 * direction. */
.chg-price-history__change--down {
	color: var(--wp--preset--color--foreground);
}

.chg-price-history__change--up {
	color: var(--wp--preset--color--accent-dark);
}

.chg-price-history__tracked-since {
	margin: 0.125rem 0 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

/* Card/stat figure role, consolidated — see the note on
 * .chg-price-history__summary-current above. */
.chg-price-history__single-value {
	font-size: var(--wp--preset--font-size--figure);
	font-weight: 800;
	color: var(--wp--preset--color--foreground);
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
	letter-spacing: -0.01em;
}

.chg-price-history__single-date {
	margin-left: 0.5rem;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.chg-price-history__chart {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.chg-price-history__gridline {
	stroke: var(--wp--preset--color--border);
	stroke-width: 1;
}

.chg-price-history__line {
	stroke: var(--wp--preset--color--accent);
	stroke-width: 2;
	stroke-linejoin: round;
	stroke-linecap: round;
}

.chg-price-history__point {
	fill: var(--wp--preset--color--background);
	stroke: var(--wp--preset--color--muted);
	stroke-width: 1.5;
}

.chg-price-history__point--verified {
	fill: var(--wp--preset--color--accent);
	stroke: var(--wp--preset--color--accent-dark);
}

.chg-price-history__point--current {
	stroke: var(--wp--preset--color--accent-dark);
	stroke-width: 2.5;
}

.chg-price-history__axis-label {
	fill: var(--wp--preset--color--muted);
	font-size: 11px;
	font-family: var(--wp--preset--font-family--system, sans-serif);
}

.chg-price-history__axis-label--end {
	text-anchor: end;
}

/* "View details" — restyled from small muted text to a proper link,
 * matching Configurations' "View all" affordance. */
.chg-price-history__table-toggle {
	margin-top: var(--wp--preset--spacing--sm);
}

.chg-price-history__table-toggle summary {
	cursor: pointer;
	list-style: none;
	color: var(--wp--preset--color--accent-dark);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.chg-price-history__table-toggle summary::-webkit-details-marker {
	display: none;
}

.chg-price-history__table-toggle summary:hover {
	color: var(--wp--preset--color--accent);
}

.chg-price-history__table {
	margin-top: var(--wp--preset--spacing--sm);
	border-collapse: collapse;
	width: 100%;
}

.chg-price-history__table th,
.chg-price-history__table td {
	padding: 0.375rem 0.625rem;
	text-align: left;
	border-bottom: 1px solid var(--wp--preset--color--border);
	font-size: var(--wp--preset--font-size--small);
}

.chg-price-history__table th {
	color: var(--wp--preset--color--muted);
	font-weight: 600;
	text-transform: uppercase;
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.04em;
}

/* ---------- Amenities ----------
 * Hide the entire section when there's genuinely nothing sourced yet —
 * a research portal shouldn't devote a major public-facing section to
 * its own "being researched" state. */

.chg-project-single section:has(> .chg-detail-block:empty) {
	display: none;
}

.chg-detail-group {
	display: block;
}

/* ---------- Amenities & Project Highlights (Content\ProjectAmenitiesDisplay) ----------
 * Replaces the old comma-joined .chg-detail-block/.chg-detail-group
 * rendering for this section only — components/detail-list.css's
 * shared .chg-detail-group rules (still used by Nearby Places) are
 * untouched; these are new, differently-named classes. One card per
 * category: icon + name + a real <ul> checklist, not a paragraph. */

/* Project Highlights — a compact grid above the amenity cards.
 * auto-fit/minmax rather than a hardcoded 3-6 column count: reads well
 * at the visually-intended 3-6 items but never hard-blocks an editor
 * from adding more (extra items simply wrap to another row at the
 * same compact size). */
.chg-highlights__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
	gap: var(--wp--preset--spacing--sm);
	margin: 0 0 var(--wp--preset--spacing--md);
}

.chg-highlights__item {
	padding: var(--wp--preset--spacing--sm);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--preset--color--surface);
	text-align: center;
}

.chg-highlights__value {
	display: block;
	color: var(--wp--preset--color--accent-dark);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 800;
	line-height: 1.2;
}

.chg-highlights__label {
	display: block;
	margin-top: 0.125rem;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.chg-amenities__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--sm);
}

@media (min-width: 640px) {
	.chg-amenities__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.chg-amenities__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.chg-amenities__card {
	padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
}

.chg-amenities__category {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 0.625rem;
	font-size: var(--wp--preset--font-size--medium);
}

.chg-amenities__category-icon {
	display: inline-flex;
	flex-shrink: 0;
	color: var(--wp--preset--color--accent);
}

.chg-amenities__list {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.chg-amenities__list li {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--wp--preset--color--foreground);
	font-size: var(--wp--preset--font-size--small);
}

.chg-amenities__check {
	display: inline-flex;
	flex-shrink: 0;
	color: var(--wp--preset--color--accent);
}

.chg-amenities__check svg {
	width: 1rem;
	height: 1rem;
}

.chg-detail-group strong {
	display: block;
	margin-bottom: 0.125rem;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* ---------- Floor Plans, Documents, Videos (Content\ProjectFloorPlans/
 * ProjectDocuments/ProjectVideos — Publishing System V1, Slice 2) ----------
 * All three are real PHP dynamic blocks that return '' when empty, so
 * (unlike Amenities above) no :has()/:empty collapse rule is needed —
 * the section is simply absent from the DOM. */

.chg-floor-plans__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--sm);
	margin: 0;
	padding: 0;
	list-style: none;
}

.chg-floor-plans__item {
	width: 160px;
}

.chg-floor-plans__item a {
	display: block;
	text-decoration: none;
}

.chg-floor-plans__image {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--preset--color--background);
	border: 1px solid var(--wp--preset--color--border);
}

.chg-floor-plans__label {
	display: block;
	margin-top: 0.375rem;
	color: var(--wp--preset--color--foreground);
	font-size: var(--wp--preset--font-size--small);
}

.chg-documents__list {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.chg-documents__item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	padding: 0.875rem 1rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.chg-documents__item:hover {
	border-color: var(--wp--preset--color--accent);
	background-color: var(--wp--preset--color--accent-tint);
}

.chg-documents__icon {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: var(--wp--custom--radius--sm);
	background-color: var(--wp--preset--color--accent-tint);
	color: var(--wp--preset--color--accent-dark);
}

.chg-documents__content {
	display: flex;
	flex: 1 1 12rem;
	flex-direction: column;
	min-width: 0;
	gap: 0.125rem;
}

.chg-documents__label {
	color: var(--wp--preset--color--foreground);
	font-weight: 600;
	line-height: 1.3;
}

.chg-documents__descriptor {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

/*
 * Shared visual treatment for both the plain ungated <a> link and the
 * gated <button data-chg-gated-asset> trigger — deliberately identical
 * appearance, so a visitor can't tell which assets are gated just by
 * looking; the only functional difference (modal vs. direct
 * open/download) only becomes apparent on click, matching the feature's
 * "research-first, not a spammy lead wall" design brief. Full-width on
 * narrow viewports for a comfortable tap target; auto-width and
 * right-aligned from 640px up (see the @media block below).
 */
.chg-documents__action {
	display: inline-flex;
	flex-shrink: 0;
	width: 100%;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	padding: 0.625rem 1rem;
	border: 1px solid var(--wp--preset--color--accent);
	border-radius: var(--wp--custom--radius--pill);
	background: none;
	color: var(--wp--preset--color--accent-dark);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.chg-documents__action:hover {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--background);
}

.chg-documents__action-arrow {
	transition: transform 0.15s ease;
}

.chg-documents__action:hover .chg-documents__action-arrow {
	transform: translateX(2px);
}

@media (min-width: 640px) {
	.chg-documents__item {
		flex-wrap: nowrap;
	}

	.chg-documents__action {
		width: auto;
	}
}

/* ---------- Project Walkthrough (Content\ProjectVideos) ----------
 * Independent of the Media Hero's own video-mode facade CSS
 * (.chg-media-hero__video-*) — same visual language, deliberately
 * separate classes/rules so this section can't be broken by (or
 * break) hero changes. See Content\ProjectVideos' class docblock. */

.chg-walkthrough__primary {
	position: relative;
	aspect-ratio: 16 / 9;
	max-width: 50rem;
	border-radius: var(--wp--custom--radius--md);
	overflow: hidden;
	background-color: #111820;
}

.chg-walkthrough__facade {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	color: #fff;
	text-decoration: none;
}

.chg-walkthrough__facade-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.chg-walkthrough__placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	background-color: var(--wp--preset--color--surface);
}

.chg-walkthrough__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: inline-flex;
}

.chg-walkthrough__facade-label {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	margin: 0;
	padding: var(--wp--preset--spacing--md) var(--wp--preset--spacing--sm) var(--wp--preset--spacing--sm);
	background: linear-gradient(to top, rgba(0, 0, 0, 0.72), transparent);
	color: #fff;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
}

.chg-walkthrough__facade:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* The live embedded player, injected by JS on click, replacing the
 * facade <a> entirely inside .chg-walkthrough__primary. Plain block
 * sizing (not absolute) since the parent already establishes the 16:9
 * box via aspect-ratio. */
.chg-walkthrough__embed {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.chg-walkthrough__thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: var(--wp--preset--spacing--sm);
	max-width: 50rem;
}

.chg-walkthrough__thumb {
	position: relative;
	display: block;
	width: 9rem;
	aspect-ratio: 4 / 3;
	border-radius: var(--wp--custom--radius--sm);
	overflow: hidden;
	background-color: #111820;
	color: #fff;
	text-decoration: none;
	outline: 2px solid transparent;
	outline-offset: 2px;
	transition: outline-color 0.15s ease;
}

.chg-walkthrough__thumb--active {
	outline-color: var(--wp--preset--color--accent);
}

.chg-walkthrough__thumb:focus-visible {
	outline-color: var(--wp--preset--color--accent);
}

.chg-walkthrough__thumb-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.chg-walkthrough__placeholder--thumb {
	font-size: var(--wp--preset--font-size--small);
}

.chg-walkthrough__thumb-label {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0;
	padding: 0.375rem;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.72), transparent);
	color: #fff;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ---------- Prominent Brochure CTA (Content\ProjectBrochureCta) ----------
 * A visually stronger card than the equivalent row in
 * .chg-documents__item — restrained, not a "sales banner": a plain
 * bordered panel with generous padding, no gradient/imagery, no
 * urgency language (see class docblock). */

.chg-brochure-cta__panel {
	width: 100%;
	max-width: none;
	padding: var(--wp--preset--spacing--md);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--preset--color--background);
	text-align: center;
}

.chg-brochure-cta__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	margin-bottom: var(--wp--preset--spacing--xs);
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--accent-tint);
	color: var(--wp--preset--color--accent-dark);
}

.chg-brochure-cta__icon svg {
	width: 1.5rem;
	height: 1.5rem;
}

.chg-brochure-cta__title {
	margin: 0 0 0.375rem;
	font-size: var(--wp--preset--font-size--large);
}

.chg-brochure-cta__desc {
	margin: 0 0 var(--wp--preset--spacing--sm);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.chg-brochure-cta__action .chg-documents__action {
	width: 100%;
	padding: 0.75rem 1.5rem;
	font-size: var(--wp--preset--font-size--medium);
}

@media (min-width: 640px) {
	.chg-brochure-cta__panel {
		display: grid;
		grid-template-columns: auto 1fr auto;
		align-items: center;
		column-gap: var(--wp--preset--spacing--sm);
		text-align: left;
	}

	.chg-brochure-cta__icon {
		grid-column: 1;
		grid-row: 1 / 3;
		margin-bottom: 0;
	}

	.chg-brochure-cta__title {
		grid-column: 2;
		grid-row: 1;
		margin: 0;
	}

	.chg-brochure-cta__desc {
		grid-column: 2;
		grid-row: 2;
		margin: 0 0 0.125rem;
	}

	.chg-brochure-cta__action {
		grid-column: 3;
		grid-row: 1 / 3;
	}

	.chg-brochure-cta__action .chg-documents__action {
		width: auto;
	}
}

/* ---------- Discovery zone (Nearby + Related Projects) ----------
 * Independent of the hero zone's sidebar entirely — full page width,
 * its own two-column split, reclaiming the space the sidebar occupied
 * above once the sidebar's own content has ended. */

.chg-project-discovery-zone {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--lg);
	padding-block: var(--wp--preset--spacing--xl);
	border-top: 1px solid var(--wp--preset--color--border);
}

@media (min-width: 860px) {
	.chg-project-discovery-zone {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--xl);
	}
}

@media (min-width: 1280px) {
	.chg-project-discovery-zone {
		padding-block: var(--wp--preset--spacing--2xl);
	}
}

.chg-project-discovery-zone__nearby,
.chg-project-discovery-zone__related {
	min-width: 0;
}

.chg-discovery-section-header {
	margin-bottom: var(--wp--preset--spacing--sm);
}

.chg-discovery-section-header .chg-section__title {
	margin-bottom: 0;
}

.chg-discovery-section-header__link a,
.chg-discovery-section-header__link {
	color: var(--wp--preset--color--accent-dark);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-decoration: none;
}

.chg-discovery-section-header__link a:hover {
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
}

/* ---------- Nearby & Daily Life (Content\ProjectNearbyPlacesDisplay) ----------
 * Zero-JS tabs: every radio input is a direct child of .chg-nearby-tabs
 * (same parent as .chg-nearby-tabs__panels), which is what makes the
 * :checked ~ sibling selector below able to reach the matching panel. */

.chg-nearby-tabs__input {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.chg-nearby-tabs__input:focus-visible ~ .chg-nearby-tabs__list {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

.chg-nearby-tabs__list {
	display: flex;
	gap: 1.25rem;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin-bottom: var(--wp--preset--spacing--md);
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.chg-nearby-tabs__label {
	flex-shrink: 0;
	display: inline-flex;
	align-items: baseline;
	gap: 0.375rem;
	padding: 0.625rem 0.125rem;
	margin-bottom: -1px;
	border-bottom: 2px solid transparent;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.chg-nearby-tabs__label:hover {
	color: var(--wp--preset--color--foreground);
}

.chg-nearby-tabs__count {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 400;
}

.chg-nearby-tabs__panel {
	display: none;
}

/* A compact row — up to 3 cards, plus a "View all" details tile that
 * expands the rest of this category's places in place. 2 columns on
 * mobile, 3 on desktop; the "more" tile always occupies its own cell. */
.chg-nearby-cards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	align-items: stretch;
	gap: var(--wp--preset--spacing--sm);
}

@media (min-width: 640px) {
	.chg-nearby-cards {
		grid-template-columns: repeat(3, 1fr);
	}
}

.chg-nearby-card {
	display: flex;
	flex-direction: column;
	padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--sm);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--sm);
	background-color: var(--wp--preset--color--background);
}

/* Scoped down from Card-H3's usual medium(16px) — a Nearby tile is a
 * compact discovery utility, not a card-level heading; the general
 * Card-H3 role elsewhere (related project titles) is unchanged.
 * min-height reserves exactly two lines (line-height 1.25 × 2) whether
 * a name takes one line or two, so .chg-nearby-card__meta below always
 * starts at the same vertical position across every tile in a row —
 * names are never truncated to force this instead. */
.chg-nearby-card__name {
	margin: 0;
	min-height: calc(1.25em * 2);
	color: var(--wp--preset--color--foreground);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	line-height: 1.25;
}

/* Metadata role — one combined "2.4 km away · School" line, replacing
 * the earlier separate bold-distance-row + tag-pill-row treatment.
 * margin-top:auto (the card is a flex column, stretched to match its
 * row's tallest sibling by .chg-nearby-cards' align-items:stretch)
 * anchors this line to the card's bottom edge — a secondary polish on
 * top of the title's own min-height, which is what actually guarantees
 * this line starts at the same offset regardless of a one- or two-line
 * name. */
.chg-nearby-card__meta {
	margin: auto 0 0;
	padding-top: 0.25rem;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	font-variant-numeric: tabular-nums;
}

/* The "View all" tile — a <details> element used directly as a grid
 * item: closed, it's a normal tile among the row; opened, it spans the
 * full row width so its expanded content isn't crammed into one
 * narrow column. Density-audit revision: no border/tinted background —
 * a restrained text link (matching "View all configurations"/"View
 * more price history" elsewhere on this page), not a fourth bordered
 * card competing with the real Nearby cards beside it. */
.chg-nearby-cards__more {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: var(--wp--preset--spacing--xs) 0;
}

.chg-nearby-cards__more[open] {
	grid-column: 1 / -1;
}

.chg-nearby-cards__more > summary {
	cursor: pointer;
	list-style: none;
}

.chg-nearby-cards__more > summary::-webkit-details-marker {
	display: none;
}

.chg-nearby-cards__more:hover .chg-nearby-cards__more-label {
	color: var(--wp--preset--color--accent);
}

.chg-nearby-cards__more-label {
	display: block;
	color: var(--wp--preset--color--accent-dark);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.chg-nearby-cards__more-sub {
	display: block;
	margin-top: 0.125rem;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.chg-nearby-cards--expanded {
	margin-top: var(--wp--preset--spacing--sm);
}

/* One :checked ~ rule per known bucket key — shows the matching panel
 * and highlights the matching label. */
#chg-nearby-tab-schools:checked ~ .chg-nearby-tabs__panels [data-tab="schools"],
#chg-nearby-tab-hospitals:checked ~ .chg-nearby-tabs__panels [data-tab="hospitals"],
#chg-nearby-tab-metro:checked ~ .chg-nearby-tabs__panels [data-tab="metro"],
#chg-nearby-tab-employment:checked ~ .chg-nearby-tabs__panels [data-tab="employment"],
#chg-nearby-tab-shopping:checked ~ .chg-nearby-tabs__panels [data-tab="shopping"],
#chg-nearby-tab-more:checked ~ .chg-nearby-tabs__panels [data-tab="more"] {
	display: block;
}

#chg-nearby-tab-schools:checked ~ .chg-nearby-tabs__list label[for="chg-nearby-tab-schools"],
#chg-nearby-tab-hospitals:checked ~ .chg-nearby-tabs__list label[for="chg-nearby-tab-hospitals"],
#chg-nearby-tab-metro:checked ~ .chg-nearby-tabs__list label[for="chg-nearby-tab-metro"],
#chg-nearby-tab-employment:checked ~ .chg-nearby-tabs__list label[for="chg-nearby-tab-employment"],
#chg-nearby-tab-shopping:checked ~ .chg-nearby-tabs__list label[for="chg-nearby-tab-shopping"],
#chg-nearby-tab-more:checked ~ .chg-nearby-tabs__list label[for="chg-nearby-tab-more"] {
	border-bottom-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-dark);
}

/* ---------- Related Projects ----------
 * Image-led cards (components/project-card.css is shared with the
 * homepage/Builder grids, so its title/meta typography roles are
 * brought in via a Project-scoped override here rather than editing the
 * shared file — Homepage/Builder card typography is untouched). */

.chg-project-single .chg-project-card__title {
	font-weight: 700;
	line-height: 1.3;
}

.chg-project-single .chg-project-card__meta {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	text-transform: none;
	letter-spacing: normal;
}

.chg-project-discovery-zone__related .chg-project-grid {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--md);
}

.chg-project-discovery-zone__related .chg-project-grid > li {
	flex: 1 1 100%;
	list-style: none;
}

@media (min-width: 480px) {
	.chg-project-discovery-zone__related .chg-project-grid > li {
		flex: 0 1 calc(50% - var(--wp--preset--spacing--md) / 2);
	}
}

/* The whole card is a real click target (previously only the title
 * text was), via the standard accessible "stretched link" pattern: one
 * real <a> (the title's), extended over the card with ::after. No
 * duplicate links, no markup restructuring. */
.chg-project-discovery-zone__related .chg-project-card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 0;
	overflow: hidden;
	/* Density-audit revision: resets components/card.css's shared 3px
	 * accent top-border (a deliberate "research entry" treatment on
	 * Locality/Builder cards, and the homepage/archive Project grid) to
	 * a plain neutral border here only — the prototype's Related
	 * Projects cards carry no accent stripe. Homepage/Builder/Locality/
	 * archive grids keep the accent border unchanged; this override is
	 * scoped to the Project Detail discovery zone alone. */
	border-top: 1px solid var(--wp--preset--color--border);
}

.chg-project-discovery-zone__related .chg-project-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.chg-project-card__image {
	margin: 0 0 var(--wp--preset--spacing--sm);
}

.chg-project-card__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* No image on this Project — the badges/title/meta content simply
 * starts at the card's own padding, never a fake photo. */
.chg-project-discovery-zone__related .chg-project-card__badges,
.chg-project-discovery-zone__related .chg-project-card__title,
.chg-project-discovery-zone__related .chg-project-card__meta,
.chg-project-discovery-zone__related .chg-project-card__config,
.chg-project-discovery-zone__related .chg-project-card__price {
	margin-left: var(--wp--preset--spacing--sm);
	margin-right: var(--wp--preset--spacing--sm);
}

/* wp:post-featured-image renders nothing at all (not an empty element)
 * when there's no featured image, so ":empty" can't detect its absence —
 * ":first-child" does: badges only need the card's own top padding when
 * there's no image directly before them. */
.chg-project-discovery-zone__related .chg-project-card > .chg-project-card__badges:first-child {
	margin-top: var(--wp--preset--spacing--sm);
}

/* Plain text on this card type (approved visual reference), not the
 * pill shape components/project-card.css's shared .chg-project-card__config
 * rule normally gives it elsewhere (Homepage/Builder grids) — explicitly
 * reset here rather than just omitting the .chg-pill class, since the
 * shared rule's own background/border would otherwise still apply.
 * margin-bottom only (not the `margin` shorthand): this selector has
 * the exact same specificity as the badges/title/meta/config/price
 * bundle above that sets margin-left/right:sm for the card's shared
 * content inset — a shorthand `margin: 0 0 xs` here would silently
 * reset margin-left/right to 0 (same specificity, later in the file
 * wins), which was the actual cause of the configuration line starting
 * at the card's outer edge instead of lining up with title/meta/price. */
.chg-project-discovery-zone__related .chg-project-card__config {
	background-color: transparent;
	border: none;
	padding: 0;
	margin-bottom: var(--wp--preset--spacing--xs);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.4;
}

/* Missing override, found during the root-cause pass: this card's price
 * was still inheriting components/project-card.css's shared large(20px)
 * size — never scoped down the way title/meta already were for this
 * specific card context. Deliberately not touching margin-top here:
 * components/project-card.css's shared .chg-project-card__price rule
 * already sets margin:auto 0 0, which — combined with .chg-project-card
 * having height:100% (card.css) inside a stretch-aligned flex grid
 * (.chg-project-grid) — pins price to the bottom of the card regardless
 * of how much content (title/meta/config) sits above it. Content above
 * price flows naturally (no reserved min-heights) — a one-line and a
 * two-line title/config produce a small, real difference in how much
 * "auto" space price's own margin consumes, not an artificial gap. */
.chg-project-discovery-zone__related .chg-project-card__price {
	margin-bottom: var(--wp--preset--spacing--sm);
	font-size: var(--wp--preset--font-size--medium);
}

/* ---------- Project Overview (post_content, editorial treatment) ----------
 * Phase 1 revision: flat running text, not a bordered panel — the
 * description reads as editorial content in its own right, not one more
 * boxed research module. Readable measure (~38em, the standard prose
 * line-length target) rather than stretching to the full main-column
 * width, generous paragraph rhythm, body-copy color/size instead of the
 * muted/small treatment a data module gets. Hidden entirely when a
 * Project has no description at all — a heading over nothing is worse
 * than no section, same discipline as Amenities' own empty-state rule
 * below.
 *
 * wp:post-content renders no wrapper element at all when post_content
 * is empty (confirmed directly — same "nothing, not an empty element"
 * behavior already documented for wp:post-featured-image elsewhere in
 * this file), so a plain :has(...:empty) never matches: there's no
 * element to be empty. :not(:has(...)) catches that case (the div is
 * absent); :has(...:empty) is kept alongside it to also cover the case
 * where core ever does render a present-but-empty div. */
.chg-project-overview:not(:has(.chg-project-single__content)),
.chg-project-overview:has(.chg-project-single__content:empty) {
	display: none;
}

.chg-project-single__content {
	max-width: 38em;
	color: var(--wp--preset--color--foreground);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.7;
}

.chg-project-single__content > * + * {
	margin-top: var(--wp--preset--spacing--md);
}

.chg-project-single__content h2,
.chg-project-single__content h3,
.chg-project-single__content h4 {
	margin-top: var(--wp--preset--spacing--lg);
	color: var(--wp--preset--color--foreground);
	font-weight: 600;
	line-height: 1.3;
}

.chg-project-single__content h2 {
	font-size: var(--wp--preset--font-size--large);
}

.chg-project-single__content h3 {
	font-size: var(--wp--preset--font-size--medium);
}

/* ---------- Research Snapshot card (Content\ProjectResearchSidebar) ----------
 * Dead CSS as of Phase 1 (and already unreferenced before it): this
 * block's chg/project-research-sidebar is registered but not used
 * anywhere in templates/single-chg_project.html — it was already
 * orphaned when this pass began. Phase 1 reuses that class's underlying
 * DATA (RERA/Builder/Locality verified signals, price provenance) inside
 * the new Key Project Information panel (Content\ProjectQuickFacts), but
 * deliberately does not resurrect this card's own markup — per explicit
 * direction, its old visual structure was not to be revived unchanged.
 * Left in place rather than deleted, since removing it is outside this
 * pass's approved scope (template/CSS/ProjectQuickFacts.php only). CHG's
 * own research positioning — no agent photo, no salesperson identity, no
 * builder branding, no scarcity language. */

.chg-research-card {
	padding: var(--wp--preset--spacing--sm);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--preset--color--background);
}

/* Rendered server-side, not this template. */
.chg-research-card__brand {
	margin: 0;
	color: var(--wp--preset--color--muted);
	text-transform: uppercase;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.05em;
}

/* Module title role — shared by Research Snapshot and Location,
 * deliberately its own role, one step quieter than Section H2 (medium
 * vs. large, per the density-audit hierarchy: H1 > hero price > Section
 * title > module title > data-row title > metadata). Class name
 * predates Step 2's move out of the old sidebar column into the main
 * research column (layout-only pass, not renamed here) — the "sidebar"
 * in the name is now just history, not a positioning claim. */
.chg-sidebar-module__title {
	margin: 0.1875rem 0 0;
	color: var(--wp--preset--color--foreground);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	line-height: 1.3;
}

/* Density-audit revision: no longer a second bordered/tinted box nested
 * inside the already-bordered .chg-research-card shell (a literal
 * card-in-card). The checkmark icon on each .chg-research-card__signal
 * plus this list's own spacing now carry the "grouped evidence" reading
 * on their own — the outer Research Snapshot module boundary is the
 * only border this section still needs. */
.chg-research-card__signals {
	list-style: none;
	margin: var(--wp--preset--spacing--sm) 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.chg-research-card__signal {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--wp--preset--color--foreground);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.4;
}

.chg-research-card__signal .chg-icon {
	flex-shrink: 0;
	color: var(--wp--preset--color--accent);
}

/* Approved neutral fallback when there are genuinely no verified
 * signals yet — never an empty box, never "in progress" wording. */
.chg-research-card__empty-signals {
	margin: var(--wp--preset--spacing--md) 0 0;
	padding: var(--wp--preset--spacing--md);
	border-radius: var(--wp--custom--radius--sm);
	background-color: var(--wp--preset--color--background);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	font-style: italic;
}

.chg-research-card__clarity {
	margin-top: var(--wp--preset--spacing--xs);
	padding-top: var(--wp--preset--spacing--xs);
	border-top: 1px solid var(--wp--preset--color--border);
}

.chg-research-card__clarity-title {
	margin: 0 0 var(--wp--preset--spacing--sm);
	color: var(--wp--preset--color--foreground);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
}

.chg-research-card__clarity-list {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.chg-research-card__clarity-row {
	display: flex;
	justify-content: space-between;
	gap: 0.75rem;
}

.chg-research-card__clarity-row dt {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.chg-research-card__clarity-row dd {
	margin: 0;
	color: var(--wp--preset--color--foreground);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-align: right;
}

/* A real, solid-teal primary action — anchors to #project-research (the
 * top of the main research column), valid regardless of which optional
 * modules are present. */
.chg-research-card__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	margin-top: var(--wp--preset--spacing--xs);
	padding: 0.625rem 1.25rem;
	border-radius: var(--wp--custom--radius--sm);
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--background);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	text-decoration: none;
	transition: background-color 0.15s ease;
}

.chg-research-card__cta:hover {
	background-color: var(--wp--preset--color--accent-dark);
	color: var(--wp--preset--color--background);
}

.chg-research-card__verify-link {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	margin-top: var(--wp--preset--spacing--xs);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--xs);
	text-decoration: none;
}

.chg-research-card__verify-link:hover {
	color: var(--wp--preset--color--accent-dark);
}

/* ---------- Project Media Hero (Content\ProjectMedia) ----------
 * Step 2: a single unified hero surface covering Photos, Floor Plans,
 * and Videos (Documents stays separate — see Content\ProjectDocuments).
 * Renders nothing at all — no grey placeholder box — when the Project
 * has no media in any mode; see Content\ProjectMedia::render() for the
 * exact rule. When there's genuinely no media, the identity block below
 * inherits extra top padding and a subtle tint instead (see the
 * sibling-selector rule further down), so it visibly absorbs the hero
 * role rather than looking like an image failed to load.
 *
 * PROGRESSIVE ENHANCEMENT, same discipline as .chg-explorer above: the
 * PHP renders every mode's every item fully visible, stacked in normal
 * document flow — see Content\ProjectMedia's class docblock. Every rule
 * in this section that depends on JS having actually run is scoped
 * under .chg-media-hero--ready, a class assets/js/project-media-hero.js
 * adds once it wires real switching behaviour. Before that point (no
 * JS, JS still loading, or JS blocked/failing): every panel and every
 * item is plainly visible, and the prev/next/count/thumbnail/mode
 * controls stay hidden rather than rendering non-functional — they only
 * make sense once a single active item/panel actually exists. */

.chg-project-media {
	padding-block: var(--wp--preset--spacing--md) 0;
}

.chg-media-hero {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--sm);
}

/* Only ever visible pre-JS/no-JS (every panel stacked, all shown) or
 * once JS has hidden every panel but the active one — in the latter
 * case there is never a second visible panel for this rule to apply
 * between, same reasoning as .chg-explorer__panel + .chg-explorer__panel
 * above. */
.chg-media-hero__panel + .chg-media-hero__panel {
	margin-top: var(--wp--preset--spacing--md);
	padding-top: var(--wp--preset--spacing--md);
	border-top: 1px solid var(--wp--preset--color--border);
}

/* Only rendered by the PHP at all when >1 mode exists — labels the
 * stacked pre-JS content ("Floor Plans (3)") since the richer mode
 * selector nav isn't visible yet to serve that purpose. Once JS marks
 * the hero ready, the mode selector takes over that job. */
.chg-media-hero__panel-title {
	margin: 0 0 var(--wp--preset--spacing--xs);
	color: var(--wp--preset--color--foreground);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
}

.chg-media-hero--ready .chg-media-hero__panel-title {
	display: none;
}

.chg-media-hero__stage {
	position: relative;
	border-radius: var(--wp--custom--radius--lg);
	overflow: hidden;
	background-color: var(--wp--preset--color--surface);
}

/* No explicit `display` here, deliberately — a div's default display
 * is already block, and setting it explicitly would override the
 * browser's native `[hidden]` UA rule (both are (0,1,0)-specificity;
 * an explicit class rule loaded after the UA stylesheet would win the
 * cascade and defeat `item.hidden = true` in project-media-hero.js).
 * Same reasoning as .chg-explorer__panel above, which never sets
 * `display` for the same reason. */
.chg-media-hero__item {
	aspect-ratio: 16 / 9;
	background-color: var(--wp--preset--color--background);
}

.chg-media-hero__item + .chg-media-hero__item {
	margin-top: var(--wp--preset--spacing--xs);
}

.chg-media-hero__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Floor plans are never cropped — a cut-off room label or wall would
 * destroy the one thing this image exists to communicate. A neutral
 * white backdrop (rather than the surface token) reads correctly
 * against typical floor-plan source images, which are themselves
 * white/near-white. */
.chg-media-hero__panel[data-chg-media-panel="floor_plans"] .chg-media-hero__image {
	object-fit: contain;
	background-color: #fff;
}

.chg-media-hero__caption {
	margin: var(--wp--preset--spacing--xs) 0 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	text-align: center;
}

/* Video facade — a real link to the original YouTube/Vimeo URL (works
 * with zero JS); assets/js/project-media-hero.js intercepts the click
 * and injects a real iframe using data-chg-video-embed-url instead of
 * navigating away. See Content\ProjectMedia's class docblock and
 * Support\VideoEmbed::thumbnail_url(). */
.chg-media-hero__video-facade {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	background-color: #111820;
	color: #fff;
	text-decoration: none;
}

.chg-media-hero__video-thumb {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Vimeo has no key-free static thumbnail URL — see
 * Support\VideoEmbed::thumbnail_url()'s docblock — so it gets a
 * polished neutral facade instead of a guessed/fetched image. */
.chg-media-hero__video-placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	background-color: var(--wp--preset--color--surface);
}

.chg-media-hero__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: inline-flex;
}

.chg-media-hero__video-label {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	margin: 0;
	padding: var(--wp--preset--spacing--md) var(--wp--preset--spacing--sm) var(--wp--preset--spacing--sm);
	background: linear-gradient(to top, rgba(0, 0, 0, 0.72), transparent);
	color: #fff;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
}

.chg-media-hero__video-facade:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* The live embedded player, injected by JS on click, replacing the
 * facade <a> entirely inside .chg-media-hero__item — never present in
 * server-rendered markup. Plain block sizing (not absolute) since the
 * item itself already establishes the 16:9 box via aspect-ratio. */
.chg-media-hero__video-embed {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Prev/Next/Count/Thumbnails/Mode selector — hidden until JS marks the
 * hero ready. Pre-JS, every item in every panel is already stacked and
 * visible in document flow (see .chg-media-hero__item above), so
 * overlay navigation controls sized for a single active item would be
 * both non-functional and visually broken against a tall stack of
 * images; the mode selector would likewise do nothing without the JS
 * that switches panels. */
.chg-media-hero__prev,
.chg-media-hero__next,
.chg-media-hero__count,
.chg-media-hero__thumbs,
.chg-media-hero__modes {
	display: none;
}

.chg-media-hero--ready .chg-media-hero__prev,
.chg-media-hero--ready .chg-media-hero__next {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 50%;
	z-index: 2;
	width: 2.5rem;
	height: 2.5rem;
	transform: translateY(-50%);
	border: none;
	border-radius: 999px;
	background-color: rgba(17, 24, 28, 0.6);
	color: #fff;
	cursor: pointer;
}

.chg-media-hero--ready .chg-media-hero__prev {
	left: var(--wp--preset--spacing--sm);
}

.chg-media-hero--ready .chg-media-hero__next {
	right: var(--wp--preset--spacing--sm);
}

.chg-media-hero__prev:hover,
.chg-media-hero__next:hover {
	background-color: rgba(17, 24, 28, 0.8);
}

.chg-media-hero--ready .chg-media-hero__count {
	position: absolute;
	right: var(--wp--preset--spacing--sm);
	bottom: var(--wp--preset--spacing--sm);
	z-index: 2;
	margin: 0;
	padding: 0.375rem 0.75rem;
	border-radius: var(--wp--custom--radius--sm);
	background-color: rgba(27, 31, 34, 0.72);
	color: #fff;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.chg-media-hero--ready .chg-media-hero__thumbs {
	display: flex;
	gap: var(--wp--preset--spacing--xs);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 0.25rem;
}

.chg-media-hero__thumb {
	flex-shrink: 0;
	width: 4.5rem;
	height: 3.375rem;
	padding: 0;
	border: 2px solid transparent;
	border-radius: var(--wp--custom--radius--sm);
	overflow: hidden;
	background-color: var(--wp--preset--color--surface);
	cursor: pointer;
}

.chg-media-hero__thumb img,
.chg-media-hero__thumb-placeholder {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.chg-media-hero__panel[data-chg-media-panel="floor_plans"] .chg-media-hero__thumb img {
	object-fit: contain;
	background-color: #fff;
}

.chg-media-hero__thumb-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--wp--preset--color--surface);
}

.chg-media-hero__thumb--active {
	border-color: var(--wp--preset--color--accent);
}

.chg-media-hero__thumb:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

.chg-media-hero--ready .chg-media-hero__modes {
	display: block;
}

.chg-media-hero__modes-list {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: var(--wp--preset--spacing--xs);
}

.chg-media-hero__mode {
	padding: 0.5rem var(--wp--preset--spacing--sm);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px;
	background-color: var(--wp--preset--color--background);
	color: var(--wp--preset--color--foreground);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	cursor: pointer;
}

.chg-media-hero__mode--active {
	border-color: var(--wp--preset--color--accent);
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--background);
}

.chg-media-hero__mode:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* Mobile: the thumbnail rail adds clutter beneath an already-compact
 * hero without adding real navigation value once prev/next and count
 * cover that need — hidden below the tablet breakpoint regardless of
 * ready state. Mode chips become a single horizontally-scrolling row,
 * same treatment as .chg-explorer__nav-list at mobile widths. */
@media (max-width: 47.9375rem) {
	.chg-media-hero__thumbs,
	.chg-media-hero--ready .chg-media-hero__thumbs {
		display: none;
	}

	.chg-media-hero__modes-list {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 0.25rem;
	}

	.chg-media-hero__mode {
		flex-shrink: 0;
		white-space: nowrap;
	}
}

/* No media at all — Content\ProjectMedia::render() returns '', so
 * .chg-project-body-shell becomes the element immediately after
 * .chg-project-identity instead of .chg-project-media. That structural
 * fact is what this selector detects (not a class toggle) — Project
 * Identity then picks up the visual weight the hero would otherwise
 * carry, via a subtle tint and extra bottom padding, rather than a
 * jarring plain gap where an image would normally be. */
.chg-project-identity:has(+ .chg-project-body-shell) {
	padding-bottom: var(--wp--preset--spacing--xl);
	padding-inline: var(--wp--preset--spacing--md);
	background-color: var(--wp--preset--color--background);
	border-radius: var(--wp--custom--radius--md);
}

/* ---------- Location (Content\ProjectLocation) ----------
 * Phase 1: elevated from a small paired-row utility card to one of the
 * page's major research sections — same visual weight as Configurations/
 * Amenities/Price History, a substantially larger map, no other change
 * to the existing coordinates/embed/directions functionality. The PHP
 * still renders its own heading with the .chg-sidebar-module__title
 * class (name predates this move, unchanged — ProjectLocation.php is
 * out of scope for this pass); upgraded to Section H2 weight here via a
 * scoped override rather than touching that file. */

.chg-project-location .chg-location-header .chg-sidebar-module__title {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	line-height: 1.2;
}

/* Spacing refinement pass: Location is a "large section" (a
 * substantially bigger map than any other module on the page) and
 * deliberately keeps the fuller xl(48px) breathing room the sitewide
 * .chg-project-single .chg-section rule no longer provides by default
 * (trimmed to lg(32px) generally — see that rule's own comment). This
 * is the one explicit exception, not a reversion. */
@media (min-width: 860px) {
	.chg-project-location {
		padding-block: var(--wp--preset--spacing--xl);
	}
}

/* align-items: flex-start (not baseline) — the heading side can now be
 * two lines (heading + locality context), and baseline alignment would
 * pin "View on map" to the first line's baseline, reading as
 * misaligned/floating once a second line is present. */
.chg-location-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.5rem;
	margin-bottom: var(--wp--preset--spacing--sm);
}

.chg-location-header__heading {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	min-width: 0;
}

/* Locality context beneath the heading — existing
 * ProjectRelationships::get_locality_name() data only, never a
 * fabricated postal address; absent entirely (no empty line) when the
 * Project has no Locality linked. */
.chg-location-header__context {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.chg-location-header__link {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	color: var(--wp--preset--color--accent-dark);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.chg-location-header__link:hover {
	color: var(--wp--preset--color--accent);
}

/* The frame belongs only to the map itself — the one element in this
 * module that genuinely needs a visual boundary. Attribution/locality/
 * actions sit unboxed beneath it. .chg-location-card itself carries no
 * box styling — it exists purely as the markup grouping.
 *
 * Phase 1: substantially taller aspect ratio (was 2.2/1, a short strip
 * suited to a narrow paired-row card) now that Location is a major
 * full-width section in its own right — more map, less letterboxing,
 * at every width. Capped max-height on very wide viewports so the map
 * doesn't grow unreasonably tall just because the column got wide. */
.chg-location-card__map {
	position: relative;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	overflow: hidden;
	aspect-ratio: 16 / 9;
	max-height: 32rem;
	background-color: var(--wp--preset--color--background);
}

@media (min-width: 640px) {
	.chg-location-card__map {
		aspect-ratio: 2 / 1;
	}
}

.chg-location-card__map iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.chg-location-card__attribution {
	margin: 0.375rem 0 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--xs);
}

.chg-location-card__attribution a {
	color: inherit;
}

.chg-location-card__actions {
	display: flex;
	gap: 0.5rem;
	margin-top: var(--wp--preset--spacing--sm);
}

/* Short connective line to "Nearby & Daily Life" further down the page
 * — only ever rendered by the PHP when that section genuinely has
 * something to show for this Project (see ProjectLocation::
 * nearby_teaser()), so this is never a dangling promise pointing at
 * nothing. Deliberately plain text, not a link/button — it's page
 * orientation, not another action competing with Get Directions/Street
 * View above it. */
.chg-location-card__nearby-teaser {
	margin: var(--wp--preset--spacing--sm) 0 0;
	padding-top: var(--wp--preset--spacing--sm);
	border-top: 1px dashed var(--wp--preset--color--border);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.chg-location-card__action {
	flex: 1 1 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	padding: 0.5rem 0.875rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--sm);
	color: var(--wp--preset--color--foreground);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-decoration: none;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.chg-location-card__action:hover {
	border-color: var(--wp--preset--color--accent);
	background-color: var(--wp--preset--color--accent-tint);
}

.chg-location-card__action--primary {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-dark);
	background-color: var(--wp--preset--color--accent-tint);
}