/* ProvenlyFair shared page templates (2026 rebuild), phase 2: article, comparison, info, tool,
   promo, review and home skeletons. Loaded after pf-tpl-2026a.css (which holds the frame, hero
   and body rules shared with the listing pages). Layout only.
   /assets is cached immutable: any change to this file needs a new file name. */

/* ---------- hero: lifted article heads, header.hero variants, bare h1 ---------- */
.pf-tpl .pf-hero > .page-hero.hero { min-height: 0 !important; display: block !important; }
.pf-tpl .pf-hero > .page-hero > h1 { margin: 0 0 16px !important; max-width: 30ch; }
.pf-tpl .pf-hero > .page-hero > h1 em { color: inherit !important; font-style: normal !important; }
.pf-tpl .pf-hero > .page-hero > .hero-kicker { margin: 0 0 14px !important; }
.pf-tpl .pf-hero .pf-byline { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin: 0 0 16px !important; font-size: 13px; color: var(--muted2); }
.pf-tpl .pf-hero .pf-byline + .page-sub { margin-top: 0 !important; }
.pf-tpl .pf-hero .page-sub { font-weight: 400 !important; }
.pf-tpl .pf-hero .pf-hero__cta { display: flex; gap: 10px; flex-wrap: wrap; margin: 20px 0 0 !important; }
.pf-tpl .pf-hero > .page-hero > .lead { max-width: 66ch; margin: 0 !important; }

/* author profile block used as a hero */
.pf-tpl .pf-hero__profile { display: flex !important; gap: 24px; align-items: center; flex-wrap: wrap; }
.pf-tpl .pf-hero__profile h1 { margin: 0 0 6px !important; }

/* casino x game pages: label/value cards shown as key figures (value first, as on listings) */
.pf-tpl .pf-hero__facts > .info-grid > .info-card { display: flex !important; flex-direction: column-reverse; justify-content: flex-end; }
.pf-tpl .pf-hero__facts > .info-grid > .info-card > .value {
  font: 600 24px/1.15 var(--fb) !important; color: var(--white) !important; margin: 0 !important; font-variant-numeric: tabular-nums;
}
.pf-tpl .pf-hero__facts > .info-grid > .info-card > .value em { font-style: normal !important; color: inherit !important; }
.pf-tpl .pf-hero__facts > .info-grid > .info-card > .label {
  font: 400 12px/1.45 var(--fb) !important; color: var(--muted2) !important; margin: 6px 0 0 !important;
  letter-spacing: 0 !important; text-transform: none !important;
}

/* promo pages: the code box sits beside the hero on desktop */
.pf-tpl .pf-hero__aside { margin-top: 24px; }
.pf-tpl .pf-hero__aside > * { margin: 0 !important; }
@media (min-width: 1060px) {
  .pf-tpl .pf-hero--aside { display: grid; grid-template-columns: minmax(0, 1fr) 440px; column-gap: 56px; align-items: center; }
  .pf-tpl .pf-hero--aside .pf-hero__aside { margin-top: 0; }
}

/* ---------- article / comparison: main column + sidebar ---------- */
.pf-tpl .pf-article { display: block !important; margin-top: 32px !important; }
.pf-tpl .pf-article > .pf-main { min-width: 0; }
.pf-tpl .pf-article > .pf-main > :first-child { margin-top: 0 !important; }
.pf-tpl .pf-article > .pf-side { margin-top: 40px; }
.pf-tpl .pf-article > .pf-side > * + * { margin-top: 16px !important; }
@media (min-width: 1060px) {
  .pf-tpl .pf-article { display: grid !important; grid-template-columns: minmax(0, 1fr) 300px !important; column-gap: 48px !important; align-items: start !important; }
  .pf-tpl .pf-article > .pf-side { margin-top: 0; position: sticky !important; top: 84px !important; }
}

/* glossary entries and other single-column articles: keep the reading measure */
.pf-tpl--article .pf-body > article { max-width: 80ch; }

/* ---------- info pages: trust pages read in one narrow column ---------- */
.pf-tpl .pf-body.pf-narrow { max-width: 760px; }

/* ---------- tool pages: the tool panel directly under the hero ---------- */
.pf-tpl--tool .pf-body > :first-child { margin-top: 32px !important; }
.pf-tpl .pf-hero .pf-hero__cta > a { flex: 0 0 auto !important; width: auto !important; min-height: 44px; display: inline-flex !important; align-items: center; justify-content: center; padding: 11px 20px !important; margin: 0 !important; }

/* ---------- review: main column + 340px aside (score breakdown, its notes, changelog) ---------- */
@media (min-width: 1060px) {
  .pf-tpl .pf-article.pf-review { grid-template-columns: minmax(0, 1fr) 340px !important; column-gap: 40px !important; }
  .pf-tpl--review .pf-article > .pf-side { position: static !important; }
}
.pf-tpl--review .pf-side > * { margin: 0 0 16px !important; }
.pf-tpl--review .pf-side > :last-child { margin-bottom: 0 !important; }
.pf-tpl--review .pf-side .score-card { display: block !important; padding: 20px !important; }
.pf-tpl--review .pf-side .score-card > * + * { margin-top: 16px; }
.pf-tpl--review .pf-side .sc-main { flex-direction: row !important; justify-content: flex-start; gap: 12px; align-items: baseline !important; padding: 12px 16px !important; }
.pf-tpl--review .pf-side .sc-num { font-size: 40px !important; }
.pf-tpl--review .pf-side .sc-bar-label { width: 118px !important; }
.pf-tpl--review .pf-side .sc-cta { display: flex !important; }
.pf-tpl--review .pf-main > :first-child { margin-top: 0 !important; }
/* below the desktop breakpoint the aside follows the article; keep the overall score card first, as before */
@media (max-width: 1059px) {
  .pf-tpl--review .pf-article.pf-review { display: flex !important; flex-direction: column; }
  .pf-tpl--review .pf-review > .pf-side { display: contents; }
  .pf-tpl--review .pf-review .pf-side > .score-card { order: -1; margin: 0 0 24px !important; }
}