/*
 * Chennai Home Guide — Locality detail page.
 *
 * Only enqueued on single Locality pages (Slice 5 — this page had no
 * dedicated pattern file before). Spec/card/detail-list/stat-grid
 * structure all come from assets/css/components/ and layout.css; this
 * file only has what's specific to this page: the hero and its neutral
 * (non-dark-band) stat color treatment, the same approach as
 * single-builder.css. See CLAUDE.md, "CSS Architecture."
 */

.chg-locality-hero {
	padding-block: var(--wp--preset--spacing--lg) var(--wp--preset--spacing--sm);
}

.chg-locality-hero .chg-stat-grid {
	margin-top: var(--wp--preset--spacing--sm);
}

.chg-locality-hero .chg-stat__number {
	color: var(--wp--preset--color--accent);
}

.chg-locality-hero .chg-stat__label {
	color: var(--wp--preset--color--muted);
}

.chg-locality-single__content {
	margin-top: var(--wp--preset--spacing--lg);
}

/*
 * Reuses the theme's existing "Callout" core/group block style
 * (registered once, sitewide, in inc/theme-setup.php — already used by
 * Blog articles for the same "highlight a note without a custom block"
 * need, styled in patterns/blog.css) rather than inventing a second,
 * differently-named but visually-identical mechanism. An editor who
 * already knows the one-click Styles-panel "Callout" from a Blog
 * article gets the identical treatment here — e.g. wrapping a
 * methodology note like "why we won't quote a single ₹/sq.ft. figure"
 * in a core/group block with this style applied, directly in
 * post_content, no heading-text parsing or render-time detection
 * involved.
 */
.chg-locality-single__content .is-style-callout {
	padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md);
	border-left: 3px solid var(--wp--preset--color--accent);
	border-radius: var(--wp--custom--radius--sm);
	background-color: var(--wp--preset--color--accent-tint);
}

.chg-locality-single__content .is-style-callout > *:first-child {
	margin-top: 0;
}

.chg-locality-single__content .is-style-callout > *:last-child {
	margin-bottom: 0;
}

/*
 * WordPress's native post-content block renders nothing at all — not
 * even an empty wrapper element — when a Locality has no body text
 * (confirmed by inspecting actual output, not assumed). :has() lets us
 * collapse the whole "Overview" section, heading included, only when
 * that's genuinely the case — a real presentational decision, not
 * content generation, so it doesn't carry the same accessibility risk
 * CSS-generated text would.
 */
.chg-overview-section:not(:has(.chg-locality-single__content)) {
	display: none;
}

/* --------------------------------------------------------------------------
   Locality V2 — Snapshot, Connectivity & Transport, Who This Locality May
   Suit, Buyer Considerations, What's Nearby, Sources & Last Verified.

   Each of these sections is backed by a render-only dynamic block
   (Content\LocalitySnapshot / LocalityConnectivity / LocalityWhoItSuits /
   LocalityBuyerConsiderations / LocalityNearbyPlacesDisplay /
   LocalitySources) that renders nothing at all — not even a wrapper div —
   when there's genuinely no content, same as post-content's own empty
   behavior above. The same :has() collapse technique applies throughout:
   a real presentational decision (no empty section, no empty heading),
   not content generation.
   -------------------------------------------------------------------------- */

.chg-snapshot-section:not(:has(.chg-snapshot)) {
	display: none;
}

.chg-connectivity-section:not(:has(.chg-connectivity-grid)) {
	display: none;
}

.chg-who-it-suits-section:not(:has(.chg-who-it-suits)) {
	display: none;
}

.chg-buyer-considerations-section:not(:has(.chg-buyer-considerations)) {
	display: none;
}

.chg-sources-section:not(:has(.chg-sources)) {
	display: none;
}

/* Snapshot — a quiet chip row directly under the hero stats, restating
   only facts that already exist elsewhere on the page (see
   Content\LocalitySnapshot). No heading — reads as a continuation of the
   hero's own stat row, not a new section. */
.chg-snapshot-section {
	padding-block: 0 var(--wp--preset--spacing--sm);
}

.chg-snapshot {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.chg-snapshot-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.4rem 0.75rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--pill, 999px);
	background-color: var(--wp--preset--color--background);
	font-size: var(--wp--preset--font-size--small);
}

.chg-snapshot-chip__label {
	color: var(--wp--preset--color--foreground);
}

/* Connectivity & Transport — a card per item, each with its own status
   chip. Two columns on wider viewports so "operating" and "under
   construction" items read side by side rather than one long stack. */
.chg-connectivity-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--sm);
}

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

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

.chg-connectivity-card__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem;
	flex-wrap: wrap;
}

.chg-connectivity-card__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--medium);
}

.chg-connectivity-card__desc {
	margin: 0.5rem 0 0;
	color: var(--wp--preset--color--foreground);
}

.chg-connectivity-card__source {
	margin: 0.5rem 0 0;
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--muted);
}

/* Positive/"operating" status pill — additive to the existing
   .chg-pill/.chg-pill--status/.chg-pill--verified family in
   components/project-card.css, reusable anywhere a lifecycle status
   needs a confirmed/live treatment (not scoped to Connectivity). */
.chg-pill--positive {
	background-color: var(--wp--preset--color--accent-tint);
	color: var(--wp--preset--color--accent-dark);
}

/* Who This Locality May Suit — a single callout, distinct from plain
   Overview prose. */
.chg-who-it-suits {
	padding: var(--wp--preset--spacing--sm);
	border-left: 3px solid var(--wp--preset--color--accent);
	background-color: var(--wp--preset--color--surface);
	border-radius: 0 var(--wp--custom--radius--md, 10px) var(--wp--custom--radius--md, 10px) 0;
}

.chg-who-it-suits p {
	margin: 0;
}

/* Buyer Considerations — Pros / Things to Verify side by side on wider
   viewports, stacked on mobile. A leading glyph per line (✓ / ⚠) keeps
   each list scannable without turning every line into its own card. */
.chg-buyer-considerations {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--md);
}

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

.chg-buyer-considerations__heading {
	margin: 0 0 var(--wp--preset--spacing--xs);
	font-size: var(--wp--preset--font-size--medium);
}

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

.chg-buyer-considerations__list li {
	padding-left: 1.5rem;
	position: relative;
	line-height: 1.5;
}

.chg-buyer-considerations__pro::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: var(--wp--preset--color--accent);
	font-weight: 700;
}

.chg-buyer-considerations__verify-item::before {
	content: "⚠";
	position: absolute;
	left: 0;
	color: var(--wp--preset--color--muted);
}

/* What's Nearby — chips (category + place name), replacing the old
   plain-text "Category: item, item" line. Same underlying data
   (LocalityNearbyPlaces), presentation only. */
.chg-nearby-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.chg-nearby-chip {
	display: inline-flex;
	align-items: baseline;
	gap: 0.4rem;
	padding: 0.4rem 0.75rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--pill, 999px);
	background-color: var(--wp--preset--color--background);
	font-size: var(--wp--preset--font-size--small);
}

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

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

/* Sources & Last Verified — compact provenance footer, visually
   separated from body content rather than reading as another
   paragraph. */
.chg-sources-section {
	border-top: 1px solid var(--wp--preset--color--border);
	padding-block: var(--wp--preset--spacing--sm);
}

.chg-sources-section .chg-section__title {
	font-size: var(--wp--preset--font-size--small);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--muted);
}

.chg-sources {
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--muted);
	line-height: 1.6;
}

.chg-sources__list,
.chg-sources__verified {
	margin: 0 0 0.35rem;
}

.chg-sources a {
	color: var(--wp--preset--color--accent-dark);
}