/*
 * Chennai Home Guide — Project card.
 *
 * Layers on top of components/card.css. Shared by the homepage's demo
 * project section and the real /projects/ archive (Slice 10) — one
 * definition, not duplicated per page. See CLAUDE.md, "CSS Architecture."
 */

.chg-project-card {
	border-top: 3px solid var(--wp--preset--color--accent);
}

/*
 * Image-led card (Project Detail's Related Projects, Slice V2
 * refinement): the shared .chg-project-card padding (components/
 * card.css) moves onto .chg-project-card__body instead, so a featured
 * image can sit flush against the card's own edges/border-radius —
 * scoped to .chg-project-card only, the shared card.css rule itself is
 * untouched so every other card type (tool/locality/guide/builder/
 * search-result) keeps its original uniform padding. overflow:hidden
 * clips the image's top corners to match the card's own radius.
 * .chg-project-card__body's own padding covers every side, so a card
 * with no featured image (the block renders nothing at all — no empty
 * placeholder box) still gets identical breathing room around its text,
 * not a title flush against the top border.
 */
.chg-project-card {
	padding: 0;
	overflow: hidden;
}

.chg-project-card__image {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/*
 * "Photos not yet available" fallback (Content\ProjectCardImage) — the same
 * .chg-project-card__image class above already gives this div the exact
 * geometry (16:9, full width) a real cover image would have, so no card
 * ever shifts layout depending on which state renders. Deliberately
 * quiet/secondary — never mistakable for genuine Project photography.
 */
.chg-project-card__image-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	background-color: var(--wp--preset--color--surface);
	border-bottom: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--muted);
}

.chg-project-card__image-placeholder .chg-icon {
	width: 28px;
	height: 28px;
	opacity: 0.5;
}

.chg-project-card__image-placeholder-text {
	font-size: var(--wp--preset--font-size--xs, 0.75rem);
	font-weight: 500;
}

/* The placeholder's wrapping link (Content\ProjectCardImage): its text is
 * a status note, not link text, so no underline. */
.chg-project-card__image-link--placeholder {
	text-decoration: none;
}

.chg-project-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: var(--wp--preset--spacing--md);
}

.chg-project-card__meta {
	margin: 0 0 var(--wp--preset--spacing--xs);
	padding-bottom: var(--wp--preset--spacing--xs);
	border-bottom: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--muted);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.chg-project-card__price {
	margin: auto 0 0;
	padding-top: var(--wp--preset--spacing--xs);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--accent);
}

/*
 * RERA — only ever populated when Content\ProjectFieldBindings'
 * rera_number_if_verified case resolves (Data\FieldVerification status
 * is actually Verified, not just "a number happens to be filled in").
 * :empty collapses the row entirely for every not-yet-verified Project,
 * same idiom as .chg-pill--verified:empty above — never a "Not
 * available" row cluttering every card in a grid.
 */
.chg-project-card__rera {
	margin: 0.35rem 0 0;
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--muted);
}

.chg-project-card__rera:empty {
	display: none;
}

/*
 * Unset locality / builder / configuration: the card bindings use
 * emptyOk, so the line renders empty and collapses here instead of
 * showing "Not available" (same idiom as the RERA row above).
 */
.chg-project-card__meta:empty,
.chg-project-card__config:empty {
	display: none;
}

/*
 * Unset price: ProjectFieldBindings' emptyText "price" renders "Price
 * not yet verified". Quiet and smaller than a real price, so it never
 * reads as a figure; the row keeps its bottom alignment.
 */
.chg-project-card__price .chg-unavailable--price {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	font-style: normal;
	font-variant-numeric: normal;
}

/*
 * Card CTA — the native core/read-more block, so its href always
 * resolves to the current Query Loop item's real permalink (no
 * hardcoded/placeholder link). Styled as a quiet text link, not a full
 * .btn — the whole card is already a link via the image/title.
 */
.chg-project-card__cta.wp-block-read-more {
	display: inline-block;
	margin-top: 0.6rem;
	padding-top: 0.5rem;
	border-top: 1px solid var(--wp--preset--color--border);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--accent-dark);
	text-decoration: none;
}

.chg-project-card__cta.wp-block-read-more:hover,
.chg-project-card__cta.wp-block-read-more:focus-visible {
	text-decoration: underline;
}

/*
 * Badge/pill row — for real, non-decorative status signals only
 * (never a bare "Verified" badge — see CLAUDE.md's "Content Trust").
 * Currently unused by any card (its one prior consumer, a Verified
 * pill, was removed sitewide in the V2 refinement pass); kept for a
 * future genuine status badge rather than deleted, since the pattern
 * (a wrapping row + :empty-safe .chg-pill children) is still correct.
 */
.chg-project-card__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
	margin: 0 0 var(--wp--preset--spacing--xs);
}

/*
 * A "Verified" pill that resolves to '' (the fact isn't verified) must
 * disappear, not render as a blank rounded chip — this is a general
 * rule, not scoped to one container, since chg-pill--verified is now
 * used across the homepage cards, the Project hero byline/price, and
 * the spec sheet (Slice 3).
 */
.chg-pill--verified:empty,
.chg-pill--status:empty {
	display: none;
}

.chg-pill {
	display: inline-block;
	border-radius: var(--wp--custom--radius--pill, 999px);
	padding: 0.1875rem 0.625rem;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	line-height: 1.4;
}

.chg-pill--verified {
	background-color: var(--wp--preset--color--accent-tint);
	color: var(--wp--preset--color--accent-dark);
}

.chg-pill--status {
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--foreground);
	border: 1px solid var(--wp--preset--color--border);
}

/*
 * Configurations shown as a pill rather than the plain meta line —
 * used on the homepage's Featured Projects and the Builder detail
 * page's project grid (Slice 4). .chg-pill--config (V3 Foundation
 * Slice 1) is an additive generic alias for the same treatment, named
 * for reuse by any future card type (Locality/Builder/Blog), not just
 * Project cards -- .chg-project-card__config itself is unchanged and
 * still valid, so no existing template needs to change.
 */
.chg-pill--config,
.chg-project-card__config {
	align-self: flex-start;
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--muted);
	border: 1px solid var(--wp--preset--color--border);
	margin: 0 0 var(--wp--preset--spacing--xs);
}