/* ==========================================================================
   Reviews Themes (neilkelly/reviews-themes)
   Figma: 17 — Homeowner Stories / Zone4 WhatHomeownersSay (2013:1738)
   Token-driven, plain CSS. Muted band: heading + lead + themed clusters; each
   cluster is a red label above a 3-up grid of pull-quote cards, each a third wide.
   Wrapper: .wp-block-neilkelly-reviews-themes.nk-reviews-themes
   ========================================================================== */
.wp-block-neilkelly-reviews-themes.nk-reviews-themes {
	background: var(--wp--preset--color--surface-section);
	font-family: var(--wp--preset--font-family--inter);
	padding-block: var(--wp--preset--spacing--gutter);
	box-sizing: border-box;
}

.wp-block-neilkelly-reviews-themes .nk-reviews-themes__inner {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--4);
	width: 100%;
	max-width: var(--wp--custom--layout--max-width);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--gutter);
	box-sizing: border-box;
}

.wp-block-neilkelly-reviews-themes .nk-reviews-themes__heading {
	/* Headline measure — three quarters of the content column, theme-wide (Shawn, 2026-08-18). */
	max-width: var(--wp--custom--layout--headline-measure);
	/* Size + case come from the shared .nk-headline--structural class (mapped in
	   render.php) — xl, sentence case. They were re-declared here as xxl +
	   uppercase, which outranked the shared class by specificity and made the
	   class on the h2 decorative. Don't restate either property here. */
	margin: 0;
	font-weight: var(--wp--custom--font-weight--bold);
	line-height: var(--wp--custom--line-height--none);
	color: var(--wp--preset--color--ink-primary);
}

.wp-block-neilkelly-reviews-themes .nk-reviews-themes__lead {
	margin: 0;
	font-size: var(--wp--preset--font-size--base);
	font-weight: var(--wp--custom--font-weight--regular);
	line-height: var(--wp--custom--line-height--none);
	color: var(--wp--preset--color--ink-secondary);
}

.wp-block-neilkelly-reviews-themes .nk-reviews-themes__clusters {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--10);
	padding-top: var(--wp--preset--spacing--6);
}

.wp-block-neilkelly-reviews-themes .nk-reviews-themes__cluster {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--4);
}

/* The deeper red, not brand-red, for WCAG 1.4.3: at 13px this is body text needing
   4.5:1, and brand-red (#d9281e) manages only 4.09:1 against the surface-section band
   — it clears 4.92:1 on white, so it is the grey band that costs it. brand-red-hover
   (#b81f17) gives 5.38:1 and still reads as the brand red. It is nominally a hover
   token doing resting-state duty; if red-on-grey comes up again it wants a token of
   its own. */
.wp-block-neilkelly-reviews-themes .nk-reviews-themes__label {
	margin: 0;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: var(--wp--custom--font-weight--semibold);
	line-height: var(--wp--custom--line-height--none);
	letter-spacing: var(--wp--custom--components--reviews--cluster-label-tracking);
	text-transform: uppercase;
	color: var(--wp--preset--color--brand-red-hover);
}

/* Three fixed columns, not a flex row that divides itself. Every card measures a third
   of the cluster whatever the quote count, so card width is constant down the section
   instead of a one-quote cluster spanning full width and a two-quote cluster splitting
   in half. Requested 2026-08-04. Counts above three wrap into further rows of three —
   a cluster is curated by hand and can hold any number, which the old flex row would
   have squeezed into a single line of slivers.

   Cards in a row share the height of the tallest — grid items stretch by default, so
   there is deliberately no declaration here: __item stretches to its row, and __card
   fills __item.

   This departs from Figma, which sizes each card to its own content: in
   cluster--craftsmanship the three cards sit at the same y but measure 135 / 135 / 161
   tall (2013:1769, 2013:1775, 2570:1062). Levelling them was requested on 2026-08-04 —
   a ragged row of card bottoms reads as broken rather than intentional. Don't "fix" this
   back to content height from the Figma frame alone. */
.wp-block-neilkelly-reviews-themes .nk-reviews-themes__cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--preset--spacing--6);
	margin: 0;
	padding: 0;
	list-style: none;
}

.wp-block-neilkelly-reviews-themes .nk-reviews-themes__item {
	display: flex;
	min-width: 0;
}

/* Card design adopted wholesale from nk-location-reviews__card (2026-08-06): the same
   padding, radius, subtle border and body/meta split, so a homeowner quote looks the
   same on the reviews hub as it does on a location page. The one departure is the
   source logo, which this block keeps in the meta row (see __source-logo below) —
   location-reviews has no per-card logo to place.

   `justify-content: space-between` is what pins the meta row to the card's bottom edge
   (the cards in a row share the tallest one's height — see __cards above), replacing the
   `margin-top: auto` the meta carried before. */
.wp-block-neilkelly-reviews-themes .nk-reviews-themes__card {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--6);
	width: 100%;
	margin: 0;
	padding: var(--wp--preset--spacing--8);
	background: var(--wp--preset--color--surface-card);
	border: 1px solid var(--wp--preset--color--border-subtle);
	border-radius: var(--wp--custom--radius--card);
	box-sizing: border-box;
}

.wp-block-neilkelly-reviews-themes .nk-reviews-themes__card-body {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--4);
}

.wp-block-neilkelly-reviews-themes .nk-reviews-themes__stars {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--1);
	color: var(--wp--preset--color--utility-yellow);
}

/* Amber-deep outline on the stars: the yellow fill alone is 1.63:1 on the white card and
   fails WCAG 1.4.11 for a graphic conveying the rating; the stroke supplies the 5.02:1
   boundary. Same treatment as nk-location-reviews__star and nk-reviews-feed__star. */
.wp-block-neilkelly-reviews-themes .nk-reviews-themes__star {
	display: block;
	width: var(--wp--preset--font-size--base);
	height: var(--wp--preset--font-size--base);
	flex-shrink: 0;
	stroke: var(--wp--preset--color--utility-amber-deep);
}

.wp-block-neilkelly-reviews-themes .nk-reviews-themes__quote {
	margin: 0;
	padding: 0;
	border: 0;
	quotes: none;
	font-size: var(--wp--preset--font-size--base);
	font-weight: var(--wp--custom--font-weight--medium);
	line-height: var(--wp--custom--line-height--md);
	color: var(--wp--preset--color--ink-primary);
}

/* Attribution left, source logo right, both sitting on the card's bottom edge —
   `align-items: flex-end` levels the logo with the last attribution line rather than
   centring it against the two-line block. */
.wp-block-neilkelly-reviews-themes .nk-reviews-themes__meta {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--3);
}

.wp-block-neilkelly-reviews-themes .nk-reviews-themes__attribution {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--1);
	min-width: 0;
}

.wp-block-neilkelly-reviews-themes .nk-reviews-themes__author {
	font-size: var(--wp--preset--font-size--ui-nav);
	font-style: normal;
	font-weight: var(--wp--custom--font-weight--bold);
	line-height: var(--wp--custom--line-height--snug);
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-primary);
}

/* City · Project Type on one line — the project type joins the location here rather than
   running on from the name, requested 2026-08-06. */
.wp-block-neilkelly-reviews-themes .nk-reviews-themes__detail {
	font-size: var(--wp--preset--font-size--sm);
	font-weight: var(--wp--custom--font-weight--regular);
	line-height: var(--wp--custom--line-height--snug);
	color: var(--wp--preset--color--ink-secondary);
}

/* Source lockup from Theme Settings → Reviews, in the card's bottom-right corner —
   kept there when the card took the location-reviews design (2026-08-06). The __source
   pill below is the fallback for a source with no logo uploaded. Sized to 19px — Figma's
   badge--source height on this frame — rather than the 27px the carousel used, so the
   logo reads as card furniture next to the attribution instead of dominating it.

   The meta row's `space-between` already parts attribution from logo; `margin-inline-start:
   auto` is what still holds the logo at the trailing edge on a card with no attribution
   at all, where it would otherwise be the row's only (and so leading) item. Applied to
   the pill fallback too, so both variants land in the same place. */
.wp-block-neilkelly-reviews-themes .nk-reviews-themes__source-logo,
.wp-block-neilkelly-reviews-themes .nk-reviews-themes__source {
	margin-inline-start: auto;
}

.wp-block-neilkelly-reviews-themes .nk-reviews-themes__source-logo {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	height: var(--wp--custom--components--reviews--cluster-logo-height);
}

.wp-block-neilkelly-reviews-themes .nk-reviews-themes__source-logo img {
	display: block;
	width: auto;
	height: 100%;
	object-fit: contain;
}

.wp-block-neilkelly-reviews-themes .nk-reviews-themes__source {
	display: inline-flex;
	align-items: center;
	padding: var(--wp--preset--spacing--0-5) var(--wp--preset--spacing--2-5);
	border: 1px solid var(--wp--preset--color--border-default);
	border-radius: var(--wp--custom--radius--full);
	font-size: var(--wp--preset--font-size--ui-label);
	font-weight: var(--wp--custom--font-weight--medium);
	line-height: var(--wp--custom--line-height--none);
	color: var(--wp--preset--color--ink-secondary);
	white-space: nowrap;
}

/* Three columns need ~1200px. Below that the row squeezes __attribution far enough
   (82px at 1024) that a long author name or a full "City · Project Type" detail line
   overflows its own box and runs across the meta row's 12px gap into the source logo,
   which cannot shrink. Widening the gap does not help — the overflow is unbounded, so
   it just moves where the collision starts. Stepping down to two columns gives the
   attribution the width it needs instead. Ordered above the 767px rule so the single
   column still wins on phones. */
@media (max-width: 1199px) {
	.wp-block-neilkelly-reviews-themes .nk-reviews-themes__cards {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 767px) {
	.wp-block-neilkelly-reviews-themes.nk-reviews-themes {
		padding-block: var(--wp--preset--spacing--16);
	}
	.wp-block-neilkelly-reviews-themes .nk-reviews-themes__inner {
		padding-inline: var(--wp--preset--spacing--6);
	}
	.wp-block-neilkelly-reviews-themes .nk-reviews-themes__cards {
		grid-template-columns: 1fr;
	}
	/* Steps down from the shared structural size (xl), matching the other
	   structural headings that set a mobile size — locations and
	   locservice-related-services both use lg-xl. It was xxl-sm, the step-down for
	   a --content heading, which is now LARGER than this heading's desktop size. */
	.wp-block-neilkelly-reviews-themes .nk-reviews-themes__heading {
		font-size: var(--wp--preset--font-size--lg-xl);
	}
}

/* No block-gap seam between full-bleed sections. */
.wp-block-neilkelly-reviews-themes { margin-block: 0; }