/* ==========================================================================
   Badges & Awards, v2. Listing strip, per-home page, public archive/award
   pages, dashboard tab.
   Retokenised onto the reskin design system (assets/css/reskin.css :root,
   locked rule 12, ONE design system sitewide). No new fonts, no colours
   outside the token palette, flat fields + hairline borders, responsive grids.
   Scoped under .ych-badges-* / .ych-dashboard-* to avoid leaking into the
   parent theme or the rest of the child theme.
   ========================================================================== */

/* --------------------------------------------------------------------------
   01 · Listing strip (single listing pages)
   -------------------------------------------------------------------------- */
.ych-badges-strip {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 12px 0 4px;
	align-items: center;
}

.ych-award-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border-radius: 999px;
	background: var(--mint-pale);
	color: var(--mint-deep);
	border: 1px solid var(--mint);
	text-decoration: none;
	font-size: 13px;
	line-height: 1.2;
	font-weight: 700;
	transition: transform 120ms ease, box-shadow 120ms ease;
}

.ych-award-chip:hover,
.ych-award-chip:focus {
	text-decoration: none;
	transform: translateY(-1px);
	box-shadow: 0 2px 8px rgba(14, 122, 85, 0.18);
	color: var(--mint-deep);
}

.ych-award-chip__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--mint-deep);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	flex: 0 0 18px;
}

.ych-award-chip__label {
	white-space: nowrap;
}

/* Gold accent: regulator (Outstanding/Good) + top-rated-in-area badges.
   Sparingly: gold reads as "award" sitewide, so it's reserved for the
   regulator-sourced and ranking badges, not every type. */
.ych-award-chip--regulator-outstanding,
.ych-award-chip--regulator-good,
.ych-award-chip--top-rated-area {
	background: #fbf6e3;
	border-color: var(--sun-deep);
	color: #6b5d2e;
}
.ych-award-chip--regulator-outstanding .ych-award-chip__icon,
.ych-award-chip--regulator-good .ych-award-chip__icon,
.ych-award-chip--top-rated-area .ych-award-chip__icon {
	background: var(--sun-deep);
}

/* Neutral ink treatment: Platinum Reviews sits a level above Gold, so it's
   deliberately not colour-coded green/gold; a calmer, premium neutral. */
.ych-award-chip--reviews-platinum {
	background: #eef1ef;
	border-color: var(--line);
	color: var(--ink-soft);
}
.ych-award-chip--reviews-platinum .ych-award-chip__icon {
	background: var(--ink);
}

/* Mint-glow: Most Enquired (engagement signal, not a quality rating). */
.ych-award-chip--most-enquired {
	background: rgba(23, 194, 133, 0.1);
	border-color: rgba(23, 194, 133, 0.32);
	color: var(--mint-glow);
}
.ych-award-chip--most-enquired .ych-award-chip__icon {
	background: var(--mint-glow);
}

.ych-badges-strip-link {
	margin: 0 0 16px;
	font-size: 13.5px;
}
.ych-badges-strip-link a {
	color: var(--mint-deep);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   02 · Shared card + button primitives (dashboard tab + public pages)
   -------------------------------------------------------------------------- */
.ych-copy-btn {
	display: inline-block;
	margin-top: 8px;
	padding: 8px 16px;
	background: #fff;
	color: var(--ink);
	border: 1.5px solid var(--line);
	border-radius: 999px;
	cursor: pointer;
	font-family: var(--sans);
	font-weight: 700;
	font-size: 13px;
	transition: .2s;
}
.ych-copy-btn:hover { border-color: var(--mint-deep); color: var(--mint-deep); }

.ych-badges-btn {
	display: inline-block;
	margin-top: 10px;
	padding: 10px 18px;
	background: var(--sun);
	color: #231d04;
	border: none;
	border-radius: 999px;
	cursor: pointer;
	font-family: var(--sans);
	font-weight: 800;
	font-size: 13.5px;
	text-decoration: none;
	transition: .2s;
}
.ych-badges-btn:hover { filter: brightness(.96); color: #231d04; text-decoration: none; }

.ych-dashboard-empty {
	padding: 24px;
	text-align: center;
	color: var(--ink-soft);
	border: 1px dashed var(--line);
	border-radius: var(--radius);
}

/* --------------------------------------------------------------------------
   03 · Dashboard tab (/my-account/badges-awards/)
   -------------------------------------------------------------------------- */
.ych-dashboard-listing {
	margin: 24px 0;
	border-top: 1px solid var(--line);
	padding-top: 24px;
}
.ych-dashboard-listing h3 {
	margin: 0 0 8px;
	font-family: var(--serif);
	font-size: 19px;
}
.ych-dashboard-listing-url {
	margin: 0 0 16px;
	font-size: 13px;
	color: var(--ink-soft);
}
.ych-dashboard-listing-url a { color: var(--mint-deep); }

.ych-dashboard-badges {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 16px;
}
.ych-dashboard-badges--locked { margin-top: 16px; }

.ych-dashboard-badge-card {
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 18px;
	background: #fff;
}
.ych-dashboard-badge-card h3 {
	margin: 0 0 8px;
	font-family: var(--serif);
	font-size: 16px;
}
.ych-dashboard-badge-card .ych-badge-preview {
	display: block;
	width: 120px;
	height: 120px;
	margin: 0 auto 12px;
}
.ych-dashboard-badge-card pre {
	background: var(--mint-pale);
	padding: 10px;
	border-radius: 8px;
	font-size: 11px;
	overflow-x: auto;
	white-space: pre-wrap;
	word-break: break-all;
	color: var(--ink-soft);
}
.ych-dashboard-badge-card--locked {
	opacity: .62;
	border-style: dashed;
	background: var(--cream);
}

/* --------------------------------------------------------------------------
   04 · Public badges pages: shared shell (/badges/, /badges/{type}/,
        /badges/{type}/{place}/{period}/)
   -------------------------------------------------------------------------- */
/* Sizing/gutters come from .ych-wrap (also on <main> in every template that
   includes this shell) — max-width, horizontal padding and margin are
   deliberately NOT re-declared here. They used to be (max-width:960px,
   margin:48px auto, padding:0 16px), but ych-badges CSS is enqueued at the
   default wp_enqueue_scripts priority (10) while ych-reskin (which defines
   .ych-wrap) is enqueued at priority 100 in functions.php's
   ych_enqueue_assets() — so reskin.css prints AFTER badges.css and silently
   won every one of those conflicting properties (equal specificity, later
   source wins). The 48px top margin in particular was fully dead: .ych-wrap's
   margin:0 auto zeroed it, which is why there was no gap under the sticky
   header. .ych-badges-hero below owns the top gap instead, via padding-top
   (a property .ych-wrap never sets, so nothing can silently cancel it). */
.ych-badges-page {
	font-family: var(--sans);
	color: var(--ink);
	padding-bottom: 84px;
}
.ych-badges-hero {
	padding-top: 60px;
}
.ych-badges-page h1 {
	font-family: var(--serif);
	font-size: clamp(28px, 4vw, 40px);
	margin: 0 0 14px;
	color: var(--ink);
}
.ych-badges-page h2 {
	font-family: var(--serif);
	font-size: clamp(22px, 2.8vw, 28px);
	color: var(--ink);
}
.ych-badges-page .lede {
	font-size: 17px;
	line-height: 1.6;
	color: var(--ink-soft);
	margin: 0 0 32px;
	max-width: 42em;
}
.ych-badges-back {
	display: inline-block;
	margin-bottom: 16px;
	color: var(--mint-deep);
	text-decoration: none;
	font-size: 14px;
	font-weight: 700;
}
.ych-badges-back:hover { text-decoration: underline; }

.ych-badges-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 20px;
	margin-bottom: 48px;
}
.ych-badges-card {
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 24px;
	background: #fff;
}
.ych-badges-card h2 {
	margin: 0 0 4px;
	font-size: 20px;
}
.ych-badges-card .subtitle {
	color: var(--ink-soft);
	font-size: 14px;
	margin: 0 0 12px;
}
.ych-badges-card .meta {
	font-size: 13px;
	color: var(--ink-soft);
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--line);
}
.ych-badges-card .meta strong { color: var(--ink); }
.ych-badges-card-more a {
	color: var(--mint-deep);
	text-decoration: none;
	font-weight: 700;
}
.ych-badges-card-more a:hover { text-decoration: underline; }

.ych-badges-detail {
	background: var(--mint-pale);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 32px;
	margin-bottom: 16px;
}
.ych-badges-detail h2 { margin: 0 0 8px; font-size: 28px; }
.ych-badges-detail .subtitle { color: var(--ink-soft); font-size: 16px; margin: 0 0 16px; }
.ych-badges-detail p { max-width: 70ch; }

.ych-badges-methodology-link { font-size: 13px; }
.ych-badges-methodology-link a { color: var(--mint-deep); font-weight: 700; }

/* --------------------------------------------------------------------------
   05 · Methodology section (part of the /badges/ index)
   -------------------------------------------------------------------------- */
.ych-badges-methodology {
	border-top: 1px solid var(--line);
	padding-top: 84px;
	margin-top: 0;
}
.ych-badges-methodology h2 { font-size: clamp(22px, 2.8vw, 28px); margin: 0 0 14px; }
.ych-badges-methodology h3 {
	font-family: var(--serif);
	font-size: 17px;
	margin: 26px 0 8px;
}
.ych-badges-methodology p {
	max-width: 72ch;
	color: var(--ink-soft);
	font-size: 15.5px;
	line-height: 1.65;
}

/* --------------------------------------------------------------------------
   06 · Award page (/badges/{type}/{place}/{period}/)
   -------------------------------------------------------------------------- */
.ych-badges-award-list {
	list-style: none;
	margin: 0 0 32px;
	padding: 0;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
}
.ych-badges-award-row {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 16px 22px;
	border-top: 1px solid var(--line);
}
.ych-badges-award-row:first-child { border-top: none; }
.ych-badges-award-rank {
	flex: 0 0 34px;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--mint-pale);
	color: var(--mint-deep);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--sans);
	font-variant-numeric: tabular-nums;
	font-weight: 800;
	font-size: 14px;
}
.ych-badges-award-info { flex: 1 1 auto; min-width: 0; }
.ych-badges-award-info a,
.ych-badges-award-info span {
	font-weight: 700;
	color: var(--ink);
	text-decoration: none;
	font-size: 16px;
}
.ych-badges-award-info a:hover { color: var(--mint-deep); text-decoration: underline; }

/* Winners list on the top_group type page (/badges/top-group/): reuses the
   ranked-award row styling above, sectioned under a serif h3 per
   vertical+band (e.g. "Care home groups, large") rather than the ranked-award
   page's h2 (this sits one level deeper, under the type page's own h2/detail
   block). */
.ych-badges-award-group h3 {
	font-family: var(--serif);
	font-size: 20px;
	margin: 0 0 12px;
	color: var(--ink);
}
.ych-badges-award-town {
	margin: 2px 0 0;
	font-size: 13px;
	color: var(--ink-soft);
}
.ych-badges-award-rating {
	flex: 0 0 auto;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--mint-deep);
	background: var(--mint-pale);
	border: 1px solid var(--mint);
	border-radius: 999px;
	padding: 5px 12px;
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   07 · Per-home badge page (/badges/home/{listing-slug}/)
   -------------------------------------------------------------------------- */
.ych-badges-home-head { margin-bottom: 40px; }

.ych-badges-home-section { margin-bottom: 48px; }
.ych-badges-home-section h2 {
	font-size: 24px;
	margin: 0 0 20px;
}

.ych-badges-grid--earned,
.ych-badges-grid--locked {
	margin-bottom: 0;
	/* Fix-list defect 3 (2026-07-10): the shared .ych-badges-grid CSS Grid
	   above (auto-fill, minmax(260px,1fr)) computes a fixed column count —
	   4, at this page's ~1208px .ych-wrap content width — and grid
	   auto-placement fills rows left-to-right but never re-centres a final
	   partial row. Earned/locked counts here are data-driven (however many
	   badges a listing has earned, or has left to unlock), so whenever the
	   count isn't a clean multiple of 4 (e.g. 5), the last badge lands alone
	   in column 1 with 3 dead track-widths beside it — the reported orphan.
	   Grid can't fix this generically without hardcoding a column count that
	   only happens to work for today's counts. Flexbox does: justify-content
	   center re-centres EVERY wrapped line independently — including a lone
	   last card — for any item count, at any viewport width, no magic
	   numbers. Scoped to the --earned/--locked modifiers only: the plain
	   .ych-badges-grid base class (also used by the locked/approved /badges/
	   index gallery, page-badges-archive.php) is untouched, and these two
	   selectors already win the cascade over the base class (equal
	   specificity, later in source order — same mechanism that makes the
	   margin-bottom override above work). */
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
}
.ych-badges-grid--earned > *,
.ych-badges-grid--locked > * {
	flex: 1 1 260px;
	max-width: 320px; /* caps growth so a lone last-row card doesn't balloon to near-full container width */
}

.ych-badges-card--earned {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	/* Anchor target for the "Add the Review us badge" nudge link: keeps the
	   card clear of the sticky site header when jumped to. */
	scroll-margin-top: 90px;
}
.ych-badges-card--earned h3 {
	font-family: var(--serif);
	font-size: 17px;
	margin: 4px 0 6px;
}
.ych-badges-card__preview {
	width: 160px;
	height: 160px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 8px;
}
.ych-badges-card__preview img { max-width: 100%; max-height: 100%; }
.ych-badges-card__preview-note {
	font-size: 11px;
	color: var(--ink-soft);
	margin: 0 0 12px;
}
.ych-badges-card__sub {
	font-size: 13.5px;
	color: var(--ink-soft);
	margin: 0 0 14px;
}

/* Embed size picker: Small/Medium/Large (120/160/200px), Medium active by
   default. Ghost buttons at rest; active state fills mint-deep to match the
   selected/current-nav treatment used elsewhere on the site. */
.ych-badges-size-picker {
	display: flex;
	gap: 6px;
	align-self: flex-start;
	margin: 0 0 8px;
}
.ych-badges-size-btn {
	padding: 5px 12px;
	background: none;
	border: 1.5px solid var(--line);
	border-radius: 999px;
	font-family: var(--sans);
	font-weight: 700;
	font-size: 12px;
	color: var(--ink-soft);
	cursor: pointer;
	transition: .2s;
}
.ych-badges-size-btn:hover { border-color: var(--mint-deep); color: var(--mint-deep); }
.ych-badges-size-btn.is-active {
	background: var(--mint-deep);
	border-color: var(--mint-deep);
	color: #fff;
}
.ych-badges-card__label {
	display: block;
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ink-soft);
	margin-bottom: 6px;
	align-self: flex-start;
}
.ych-badges-card--earned pre {
	width: 100%;
	text-align: left;
	background: var(--mint-pale);
	padding: 10px;
	border-radius: 8px;
	font-size: 11px;
	overflow-x: auto;
	white-space: pre-wrap;
	word-break: break-all;
	color: var(--ink-soft);
	margin: 0;
}

.ych-badges-card--locked {
	text-align: center;
	opacity: .6;
	border-style: dashed;
	background: var(--cream);
}
.ych-badges-card--locked h3 {
	font-family: var(--serif);
	font-size: 17px;
	margin: 0 0 8px;
}
.ych-badges-card__lock-note {
	font-size: 13.5px;
	color: var(--ink-soft);
	font-style: italic;
	margin: 0 0 4px;
}

/* Poster promo card (paid: live link to /badges/print/; unpaid: combined
   with .ych-badges-card--locked, which already supplies the dashed/cream
   treatment used by the Available-tier cards; nothing to redeclare here).
   Single card, not a grid; centred like the others, narrower measure. */
.ych-badges-card--poster {
	max-width: 480px;
	margin: 0 auto;
	text-align: center;
}
.ych-badges-card--poster .ych-badges-card__sub {
	margin: 0 auto 4px;
	max-width: 44ch;
}

/* Poster + certificate, side by side (wraps on narrow viewports). Reuses
   .ych-badges-btn as-is; the wrapper only supplies the gap the buttons'
   own margin-top can't (they sit side by side, not stacked). */
.ych-badges-poster-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}
.ych-badges-poster-actions .ych-badges-btn { margin-top: 10px; }

/* review_score earned card: wide 460x120 banner, not a square icon. Spans
   the full grid row so its 280px-wide preview never gets squeezed by the
   grid's 260px minimum column, but stays capped + centred rather than
   stretching edge-to-edge on wide viewports. */
.ych-badges-card--earned-banner {
	grid-column: 1 / -1;
	max-width: 560px;
	margin: 0 auto;
}
.ych-badges-card__preview--banner {
	width: 280px;
	height: auto;
}
.ych-badges-card__preview--banner img { width: 100%; height: auto; }

.ych-badges-home-foot {
	border-top: 1px solid var(--line);
	padding-top: 20px;
	font-size: 13px;
}
.ych-badges-home-foot a { color: var(--mint-deep); font-weight: 700; }

/* --------------------------------------------------------------------------
   07b · Unlock-with-reviews nudge (per-home page, between poster promo and
        Available)
   -------------------------------------------------------------------------- */
.ych-badges-review-progress {
	font-size: 15px;
	color: var(--ink-soft);
	margin: 0 0 20px;
	max-width: 60ch;
}

.ych-badges-grid--nudge { margin-bottom: 28px; }

/* Solid mint tint (not dashed/cream like --locked): these are in-reach
   goals, not paywalled tiers, so the treatment reads as "in progress" rather
   than "unavailable". */
.ych-badges-card--nudge {
	text-align: left;
	background: var(--mint-pale);
	border-color: var(--mint);
}
.ych-badges-card--nudge h3 {
	font-family: var(--serif);
	font-size: 16px;
	margin: 0 0 6px;
}
.ych-badges-card--nudge .ych-badges-card__sub { margin: 0; }

.ych-badges-review-cta {
	border-top: 1px solid var(--line);
	padding-top: 20px;
}
.ych-badges-review-cta h3 {
	font-family: var(--serif);
	font-size: 16px;
	margin: 0 0 10px;
}
.ych-badges-review-cta p {
	font-size: 13.5px;
	color: var(--ink-soft);
	margin: 10px 0 0;
	max-width: 60ch;
}
.ych-badges-review-cta a { color: var(--mint-deep); font-weight: 700; }

/* --------------------------------------------------------------------------
   08 · Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
	.ych-badges-page { padding-bottom: 56px; }
	.ych-badges-hero { padding-top: 56px; }
	.ych-badges-methodology { padding-top: 56px; }
	/* .ych-badges-index-section's 56px override CANNOT live here: its desktop
	   84px rule sits later in this file (section 09) and wins on source order.
	   The mobile override follows that rule directly instead. */
	.ych-badges-detail { padding: 22px; }
	.ych-badges-award-row { flex-wrap: wrap; padding: 14px 16px; }
}

/* Index gallery: sample artwork on each catalog card */
.ych-badges-card__sample { display: flex; justify-content: center; margin: 0 0 14px; }
.ych-badges-card__sample svg { width: 150px; height: 150px; }

/* review_score's catalog card: wide 460x120 banner sample, not a square
   icon. Spans the full grid row (like the per-home earned-banner card) so
   the gallery's 260px minimum column never squeezes it, and the sample
   itself scales by width with auto height instead of the square 150x150. */
.ych-badges-card--wide {
	grid-column: 1 / -1;
	max-width: 560px;
	margin: 0 auto;
}
.ych-badges-card__sample--banner svg {
	width: 320px;
	max-width: 100%;
	height: auto;
}

/* Index: sectioned gallery + jump nav */
.ych-badges-jumpnav { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 0; }
.ych-badges-jumpnav a { padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px; font-size: 13.5px; font-weight: 700; color: var(--mint-deep); text-decoration: none; background: #fff; }
.ych-badges-jumpnav a:hover { border-color: var(--mint-deep); text-decoration: none; }
/* Section rhythm: border-top + padding-top:84px (56px ≤600px, see media
   query above) on every index section AND methodology, in place of the
   previous ad-hoc margin:34px/padding-top:40px pair — same 1px var(--line)
   hairline the rest of the design system uses for section separation
   (locked rule 12 token values), applied consistently top-to-bottom instead
   of a different gap at each boundary. */
.ych-badges-index-section {
	margin-top: 0;
	padding-top: 84px;
	border-top: 1px solid var(--line);
	scroll-margin-top: 90px;
}
/* Mobile rhythm — must follow the 84px rule above (source order), NOT sit in
   the section-08 media block, or the desktop value wins at every width. */
@media (max-width: 600px) {
	.ych-badges-index-section { padding-top: 56px; }
}
/* The shared .ych-badges-grid rule (section 04) carries margin-bottom:48px
   for contexts where the grid is the last thing on the page. Inside a
   bordered index section that trailing gap doubles up with the NEXT
   section's own padding-top:84px, so it's zeroed here — same pattern
   .ych-badges-grid--earned/--locked already use on the per-home page. */
.ych-badges-index-section .ych-badges-grid { margin-bottom: 0; }
.ych-badges-index-section__title { font-family: var(--serif); font-size: clamp(22px, 2.8vw, 28px); margin: 0 0 8px; color: var(--ink); }
.ych-badges-index-section__lede { color: var(--ink-soft); font-size: 14.5px; margin: 0 0 24px; }
.ych-badges-card h3 { font-size: 18px; margin: 0 0 6px; }