/* Reusable page components. Tokens: assets/css/tokens.css. */

/* ---------- Breadcrumbs ---------- */
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 0; margin: 0 0 var(--space-4); font-size: var(--font-size-sm); color: var(--color-text-muted); }
.breadcrumbs li:not(:last-child)::after { content: "/"; margin-left: var(--space-2); color: var(--color-border-strong); }
.breadcrumbs a { color: var(--color-text-muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--color-accent-primary); }

/* ---------- Answer lead / last checked ---------- */
.answer-lead { font-size: var(--font-size-md); color: var(--color-text-body); max-width: 70ch; }
.money-intro { max-width: 920px; padding: var(--space-5) 0 var(--space-3); }
.money-intro h1 { max-width: 18ch; }
.money-intro .answer-lead { font-size: clamp(1.125rem, 1.5vw, 1.375rem); margin-bottom: 0; }

/* Money above-the-fold: fold last-checked + publisher trust into one
   compact strip instead of two stacked blocks, so Quick Comparison starts
   much closer to the top of the viewport. Scoped to this wrapper only -
   the shared partials keep their normal, more spacious treatment on
   Review/Provider/Guide/Hub pages. */
.money-trust-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-5); margin: var(--space-3) 0 var(--space-5); }
.money-trust-strip .last-checked { margin: 0; }
.money-trust-strip .publisher-trust-banner { flex: 1 1 300px; margin: 0; padding: var(--space-2) var(--space-4); display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2) var(--space-3); }
.money-trust-strip .publisher-trust-banner__eyebrow { margin: 0; }
.money-trust-strip .publisher-trust-banner__text { margin: 0; font-size: var(--font-size-xs); flex-basis: 100%; }
@media (min-width: 640px) { .money-trust-strip .publisher-trust-banner__text { flex-basis: auto; } }
@media (max-width: 479px) { .money-trust-strip { flex-direction: column; align-items: stretch; } }
.last-checked {
  display: flex; flex-wrap: wrap; gap: var(--space-4);
  font-size: var(--font-size-xs); color: var(--color-text-muted);
  padding: var(--space-2) 0; margin-bottom: var(--space-5);
  border-top: var(--border-width) solid var(--color-border-subtle);
  border-bottom: var(--border-width) solid var(--color-border-subtle);
}

/* ---------- Publisher Trust Banner ---------- */
.publisher-trust-banner {
  background: var(--color-bg-evidence);
  border: var(--border-width) solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-8);
}
.publisher-trust-banner__eyebrow { text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--color-success-text); margin: 0 0 var(--space-2); }
.publisher-trust-banner__text { margin: 0 0 var(--space-3); }
.publisher-trust-banner__link { font-weight: var(--font-weight-semibold); }

/* ---------- Quick comparison / data table ---------- */
.table-scroll { overflow-x: auto; margin: var(--space-4) 0; border: var(--border-width) solid var(--color-border-subtle); border-radius: var(--radius-md); background: var(--color-bg-surface); }
.data-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); }
.data-table th, .data-table td { padding: var(--space-4); border-bottom: var(--border-width) solid var(--color-border-subtle); text-align: left; vertical-align: middle; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover { background: var(--color-bg-evidence); }
.data-table thead th { background: var(--color-bg-muted); color: var(--color-text-muted); font-weight: var(--font-weight-semibold); font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: 0.04em; }
.data-table__actions { display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; }
.quick-comparison-section { margin: 0 0 var(--space-10); padding: var(--space-5) var(--space-6); background: var(--color-bg-muted); border: var(--border-width) solid var(--color-border-subtle); border-radius: var(--radius-lg); }
.quick-comparison-section > h2 { margin-top: 0; margin-bottom: var(--space-3); }
.detailed-recommendations > h2 { padding-bottom: var(--space-3); border-bottom: 2px solid var(--color-text-primary); }
@media (max-width: 599px) { .quick-comparison-section { margin-left: calc(var(--gutter-mobile) * -1); margin-right: calc(var(--gutter-mobile) * -1); padding: var(--space-5) var(--gutter-mobile); border-left: 0; border-right: 0; border-radius: 0; } }
.comparison-operator { display: flex; gap: var(--space-3); align-items: center; min-width: 150px; }
.comparison-operator__rank { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; background: var(--color-bg-muted); color: var(--color-text-primary); font-weight: var(--font-weight-bold); }
.comparison-operator__logo-frame { display: inline-flex; align-items: center; justify-content: center; padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); background: #FFFFFF; }
/* `height: auto` here (not a fixed length) let this collapse to a
   computed 0x0 box specifically inside this <table> cell for SVG assets
   with no width/height in the SVG root itself (only a viewBox) - William
   Hill's logo vanished in the Money Page comparison table in production
   because of this, confirmed via getBoundingClientRect(). The identical
   asset rendered fine in every non-table (flex/grid) logo context with
   the same "both auto" CSS, so this is a table-layout-specific replaced-
   element sizing quirk, not a theme/colour issue. Pinning one axis to a
   definite length (object-fit: contain still prevents any distortion)
   avoids it everywhere, so every other logo rule in this file uses the
   same pattern now, not just this one. */
.comparison-operator__logo { width: auto; height: 30px; max-width: 104px; object-fit: contain; }

/* A small number of official marks are a white/light wordmark with no dark
   variant (a brand-nav asset meant for a dark header) and disappear against
   this site's default white logo safe-plate - William Hill, Evolution and
   Pragmatic Play, so far. Every logo-frame template adds this modifier
   class whenever the entity's own `identity.logo_dark_plate` data field is
   true, instead of hardcoding a per-entity CSS selector per context (that
   approach was tried in Visual Pass 1 for William Hill alone and the same
   failure mode immediately recurred for two more entities in Pass 2 once
   logos started appearing in new contexts - see FINAL_VISUAL_REVAMP_REPORT.md). */
.logo-frame--dark { background: var(--color-bg-hero-panel) !important; }

/* ---------- Provider research surface (tags / game grid / ecosystem) ---------- */
.tag-list { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; padding: 0; margin: var(--space-3) 0; }
.tag-chip { padding: var(--space-1) var(--space-3); border: var(--border-width) solid var(--color-border-subtle); border-radius: var(--radius-sm); background: var(--color-bg-muted); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); }
.game-grid { display: grid; gap: var(--space-3); grid-template-columns: 1fr; margin: var(--space-3) 0; }
@media (min-width: 560px) { .game-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .game-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.game-tile { padding: var(--space-3) var(--space-4); border: var(--border-width) solid var(--color-border-subtle); border-radius: var(--radius-md); background: var(--color-bg-surface); }
.game-tile strong { display: block; }
.game-tile span { display: block; margin-top: var(--space-1); color: var(--color-text-muted); font-size: var(--font-size-xs); }
.ecosystem-row { display: flex; flex-wrap: wrap; gap: var(--space-4); margin: var(--space-3) 0; }
.ecosystem-row__item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border: var(--border-width) solid var(--color-border-subtle); border-radius: var(--radius-md); background: var(--color-bg-surface); }

@media (max-width: 767px) {
  .data-table.quick-comparison thead { display: none; }
  .data-table.quick-comparison, .data-table.quick-comparison tbody, .data-table.quick-comparison tr, .data-table.quick-comparison td {
    display: block; width: 100%;
  }
  .table-scroll:has(.quick-comparison) { border: 0; background: transparent; overflow: visible; }
  .data-table.quick-comparison tr { border: var(--border-width) solid var(--color-border-subtle); border-top: 4px solid var(--color-accent-primary); border-radius: var(--radius-md); margin-bottom: var(--space-4); padding: var(--space-4); background: var(--color-bg-surface); }
  .data-table.quick-comparison td { border: none; padding: var(--space-2) 0; }
  .data-table.quick-comparison td::before { content: attr(data-label); display: block; font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); margin-bottom: 2px; }
}

/* ---------- Operator card ---------- */
.operator-card-list { display: grid; gap: var(--space-6); grid-template-columns: 1fr; margin: var(--space-4) 0; }
@media (min-width: 1100px) { .operator-card-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.operator-card {
  background: var(--color-bg-surface);
  border: var(--border-width) solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.operator-card:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-sm); }
.operator-card__head { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.operator-card__rank {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--color-bg-muted); font-weight: var(--font-weight-bold); font-size: var(--font-size-sm);
}
.operator-card__logo-frame, .operator-compact-row__logo-frame { display: inline-flex; align-items: center; justify-content: center; min-width: 128px; min-height: 52px; padding: var(--space-2) var(--space-3); border: var(--border-width) solid var(--color-border-subtle); border-radius: var(--radius-sm); background: #FFFFFF; }
.operator-card__logo { width: auto; height: 30px; max-width: 120px; object-fit: contain; }
.operator-card__logo--placeholder { font-weight: var(--font-weight-semibold); }
.operator-card__best-for { margin: 0; font-size: var(--font-size-sm); }
.operator-card__why { padding-top: var(--space-3); border-top: var(--border-width) solid var(--color-border-subtle); }
.operator-card__why h3 { margin-top: 0; font-size: var(--font-size-base); font-family: var(--font-family-ui); font-weight: var(--font-weight-semibold); }
.operator-card__points p { margin: 0 0 var(--space-2); font-size: var(--font-size-sm); }
.operator-card__checked { font-size: var(--font-size-xs); color: var(--color-text-muted); margin: 0; }
.operator-card__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: auto; padding-top: var(--space-2); }

.operator-compact-row { display: grid; gap: var(--space-4); grid-template-columns: 1fr; margin: var(--space-4) 0; }
@media (min-width: 600px) { .operator-compact-row { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .operator-compact-row { grid-template-columns: repeat(3, 1fr); } }
.operator-compact-row__item { border: var(--border-width) solid var(--color-border-subtle); border-radius: var(--radius-md); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); background: var(--color-bg-surface); }
.operator-compact-row__logo { width: auto; height: 28px; max-width: 130px; object-fit: contain; }
.operator-compact-row__actions { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }

/* ---------- Fact grid ---------- */
.fact-grid { display: grid; grid-template-columns: 1fr; gap: 1px; margin: var(--space-4) 0; padding: 1px; background: var(--color-border-subtle); border-radius: var(--radius-md); overflow: hidden; }
@media (min-width: 680px) { .fact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fact-grid__row { display: grid; grid-template-columns: minmax(100px, .8fr) minmax(0, 1.2fr); gap: var(--space-4); align-items: start; min-width: 0; padding: var(--space-4); background: var(--color-bg-surface); font-size: var(--font-size-sm); }
.fact-grid__row dt { color: var(--color-text-muted); margin: 0; overflow-wrap: anywhere; }
.fact-grid__row dd { margin: 0; font-weight: var(--font-weight-medium); text-align: right; overflow-wrap: anywhere; }

/* ---------- Badges / alerts ---------- */
.badge { display: inline-block; padding: 2px var(--space-2); border-radius: var(--radius-sm); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); }
.badge--positive { background: var(--color-bg-evidence); color: var(--color-success-text); }
.badge--caution { background: var(--color-bg-warning); color: var(--color-warning-text); }

.alert { border-radius: var(--radius-md); padding: var(--space-4); margin: var(--space-4) 0; border: var(--border-width) solid var(--color-border-subtle); }
.alert--info { background: var(--color-bg-evidence); }
.alert--warning, .alert--important { background: var(--color-bg-warning); color: var(--color-warning-text); }
.alert--danger, .alert--verification_note { background: var(--color-bg-danger); color: var(--color-danger-text); }

/* ---------- FAQ ---------- */
.faq__item { border-bottom: var(--border-width) solid var(--color-border-subtle); padding: var(--space-2) 0; }
.faq__item summary { cursor: pointer; font-weight: var(--font-weight-semibold); min-height: 48px; display: flex; align-items: center; }
.faq__item summary::-webkit-details-marker { color: var(--color-accent-primary); }

/* ---------- Source block / related content ---------- */
.source-block, .related-content { margin-top: var(--space-10); padding: var(--space-5); border: var(--border-width) solid var(--color-border-subtle); border-radius: var(--radius-md); background: var(--color-bg-surface); }
.source-block h2, .related-content h2 { margin-top: 0; font-size: var(--font-size-xl); }
.source-block ul, .related-content ul { list-style: none; padding: 0; margin: var(--space-3) 0 0; display: flex; flex-direction: column; gap: var(--space-3); }
.source-block__item { display: flex; flex-wrap: wrap; gap: var(--space-2); font-size: var(--font-size-sm); align-items: baseline; }
.source-block__type { text-transform: uppercase; font-size: var(--font-size-xs); color: var(--color-text-muted); }
.source-block__checked { color: var(--color-text-muted); font-size: var(--font-size-xs); }

/* ---------- Review-specific sections ---------- */
.dossier-toc { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-8); padding: var(--space-4); background: var(--color-bg-muted); border: var(--border-width) solid var(--color-border-subtle); border-radius: var(--radius-md); }
.dossier-toc a { padding: var(--space-1) var(--space-3); border: var(--border-width) solid var(--color-border-subtle); border-radius: var(--radius-sm); background: var(--color-bg-surface); color: var(--color-text-body); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); text-decoration: none; white-space: nowrap; }
.dossier-toc a:hover { border-color: var(--color-accent-primary); color: var(--color-accent-primary); }

/* Each dossier section already carries its own top margin/padding as a
   section-level rhythm unit - without this override the shared h2 rule
   (base.css, margin-top: var(--space-10)) stacks on top of it, producing
   a ~112px gap before every heading down a long review. */
.review-section { border-top: var(--border-width) solid var(--color-border-subtle); padding-top: var(--space-6); margin-top: var(--space-8); }
.review-section h2 { margin-top: 0; display: flex; align-items: center; gap: var(--space-3); }
.review-section h2::before { content: ""; width: 20px; height: 3px; flex-shrink: 0; background: var(--color-accent-primary); }
.strong-watchouts__grid, .decision-support__grid { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
@media (min-width: 768px) { .strong-watchouts__grid, .decision-support__grid { grid-template-columns: 1fr 1fr; } }
.alternatives__list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.operator-review__primary-cta { margin: var(--space-5) 0; }

.operator-dossier { max-width: 980px; margin-bottom: var(--space-4); padding: var(--space-6); border-radius: var(--radius-lg); background: var(--color-bg-hero-panel); color: var(--color-text-hero-panel); }
.operator-dossier h1 { color: var(--color-text-hero-panel); margin-bottom: var(--space-3); }
.operator-dossier .answer-lead { color: #D4E1DD; max-width: 68ch; margin-bottom: 0; }
.operator-dossier .page-eyebrow { color: #9EDFCB; }
.operator-dossier__identity { display: flex; gap: var(--space-5); align-items: center; }
.operator-dossier__logo-frame { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 150px; min-height: 80px; padding: var(--space-4); border: 1px solid var(--color-border-hero-panel); border-radius: var(--radius-md); background: rgba(255,255,255,.04); }
.operator-dossier__logo { width: auto; height: 44px; max-width: 120px; object-fit: contain; }
@media (max-width: 599px) { .operator-dossier { padding: var(--space-5); } .operator-dossier__identity { align-items: flex-start; flex-direction: column; gap: var(--space-3); } .operator-dossier__logo-frame { flex: 0 0 auto; width: 150px; min-height: 64px; } }

.provider-identity { display: grid; gap: var(--space-6); align-items: center; padding: var(--space-6); margin-bottom: var(--space-5); border-radius: var(--radius-lg); background: var(--color-bg-hero-panel); color: var(--color-text-hero-panel); }
.provider-identity h1 { color: var(--color-text-hero-panel); }
.provider-identity .answer-lead { color: #D4E1DD; margin-bottom: 0; }
.provider-identity .page-eyebrow { color: #9EDFCB; }
.provider-identity__mark { display: flex; align-items: center; justify-content: center; min-height: 130px; padding: var(--space-6); border: 1px solid var(--color-border-hero-panel); border-radius: var(--radius-md); background: rgba(255,255,255,.04); }
.provider-identity__logo { width: auto; height: 76px; max-width: 210px; object-fit: contain; }
.provider-identity__mark--light { background: #FFFFFF; }
@media (min-width: 760px) { .provider-identity { grid-template-columns: minmax(220px, .7fr) minmax(0, 1.7fr); padding: var(--space-8); } }

.editorial-visual { margin: var(--space-6) 0 var(--space-8); }
.editorial-visual img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border: var(--border-width) solid var(--color-border-subtle); border-radius: var(--radius-lg); background: var(--color-bg-surface); }
.editorial-visual figcaption { margin-top: var(--space-3); padding-left: var(--space-3); border-left: 2px solid var(--color-accent-primary); color: var(--color-text-muted); font-size: var(--font-size-sm); }

/* ---------- RG context ---------- */
.rg-context { margin-top: var(--space-8); padding-top: var(--space-4); border-top: var(--border-width) solid var(--color-border-subtle); font-size: var(--font-size-sm); color: var(--color-text-muted); }