/* ProvenlyFair shared page templates (2026 rebuild). Loaded after pf-2026b.css on pages that
   templates_2026.py has moved onto a skeleton (<main class="pf-tpl pf-tpl--TYPE">).
   Layout only: hero + optional key-figures box, one body column, one vertical rhythm.
   /assets is cached immutable: any change to this file needs a new file name. */

/* ---------- page frame: one width and gutter for every templated page (matches the header) ---------- */
.pf-tpl > .wrap { max-width: 1180px !important; margin-left: auto !important; margin-right: auto !important; padding-left: 22px !important; padding-right: 22px !important; }


/* ---------- hero: kicker, h1, intro; key figures beside it on desktop ---------- */
.pf-tpl .pf-hero { padding: 4px 0 32px; border-bottom: 1px solid var(--line); }
.pf-tpl .pf-hero > .page-hero { padding: 20px 0 0 !important; margin: 0 !important; border: 0 !important; background: none !important; text-align: left !important; }
.pf-tpl .pf-hero .page-h1 { margin: 0 0 16px !important; max-width: 30ch; }
.pf-tpl .pf-hero--facts .page-h1 { max-width: 22ch; }
.pf-tpl .pf-hero .page-h1 br { display: none; }
.pf-tpl .pf-hero .page-sub { max-width: 66ch !important; margin: 0 !important; }
.pf-tpl .pf-hero .page-hero > * + * { margin-top: 0; }
.pf-tpl .pf-hero .page-hero > :last-child { margin-bottom: 0 !important; }

.pf-tpl .pf-hero__facts { margin-top: 24px; }
.pf-tpl .pf-hero__facts > * {
  display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 1px !important;
  background: var(--line) !important; border: 1px solid var(--line) !important; border-radius: 10px !important;
  overflow: hidden; margin: 0 !important; padding: 0 !important; min-width: 0 !important; max-width: none !important; width: auto !important;
  list-style: none;
}
.pf-tpl .pf-hero__facts > * > * {
  background: var(--panel) !important; text-align: left !important; padding: 16px 18px !important; margin: 0 !important;
  border: 0 !important; border-radius: 0 !important; box-shadow: none !important; min-width: 0 !important;
}
.pf-tpl .pf-hero__facts > * > :last-child:nth-child(odd) { grid-column: 1 / -1; }
.pf-tpl .pf-hero__facts > * > * > :first-child {
  font: 600 24px/1.15 var(--fb) !important; letter-spacing: -.01em !important; color: var(--white) !important;
  font-variant-numeric: tabular-nums; text-transform: none !important; overflow-wrap: break-word; hyphens: auto;
}
.pf-tpl .pf-hero__facts > * > * > :not(:first-child) {
  font-size: 12px !important; line-height: 1.45 !important; color: var(--muted2) !important; margin-top: 6px !important;
  letter-spacing: 0 !important; text-transform: none !important;
}

@media (min-width: 1060px) {
  .pf-tpl .pf-hero--facts { display: grid; grid-template-columns: minmax(0, 1fr) 440px; column-gap: 56px; align-items: end; }
  .pf-tpl .pf-hero--facts .pf-hero__facts { margin-top: 0; }
}

/* ---------- body: one column, one rhythm ---------- */
.pf-tpl .pf-body > :first-child { margin-top: 32px !important; }
.pf-tpl .pf-body > .panel,
.pf-tpl .pf-body > .content-section,
.pf-tpl .pf-body > section,
.pf-tpl .pf-body > .tbl-wrap,
.pf-tpl .pf-body > .caveat,
.pf-tpl .pf-body > .pf-related { margin-top: 32px !important; }
.pf-tpl .pf-body > .sh { margin-top: 56px !important; margin-bottom: 16px !important; }
.pf-tpl .pf-body > .sh + .tbl-wrap,
.pf-tpl .pf-body > .sh + .faq-list,
.pf-tpl .pf-body > .sh + div { margin-top: 0 !important; }
.pf-tpl .pf-body > .faq-list { margin-bottom: 0 !important; }
.pf-tpl .pf-body > .content-section > p,
.pf-tpl .pf-body > .content-section > ul,
.pf-tpl .pf-body > .content-section > ol,
.pf-tpl .pf-body > p { max-width: 80ch; }
.pf-tpl .pf-body > .content-section > h2 { margin-top: 0 !important; }

/* sidebar links from the old article + aside layout, now the last body block */
.pf-tpl .pf-related { padding: 22px 26px !important; }
.pf-tpl .pf-related > * { position: static !important; top: auto !important; background: none !important; border: 0 !important; padding: 0 !important; margin: 0 0 16px !important; }
.pf-tpl .pf-related > :last-child { margin-bottom: 0 !important; }
.pf-tpl .pf-related a { display: inline-block; }

@media (max-width: 767px) {
  .pf-tpl .pf-hero { padding-bottom: 24px; }
  .pf-tpl .pf-hero .page-h1 { max-width: none; }
  .pf-tpl .pf-hero__facts > * > * { padding: 14px 14px !important; }
  .pf-tpl .pf-hero__facts > * > * > :first-child { font-size: 20px !important; }
  .pf-tpl .pf-body > .sh { margin-top: 44px !important; }
}