/* Core stylesheet for pages built from blocks (tools/pseo/blocks).
   The build concatenates this file with every blocks/<name>/block.css into
   public/_assets/css/pseo-blocks.<hash>.css — edit the sources, never the
   hashed copy.

   Tokens, base styles, header and footer match the legacy exam pages
   (pseo.css) so both page families look like one site. */

/* 1. Font --------------------------------------------------------------- */

@font-face {
  font-family: "Host Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: optional;
  src: url(/_assets/gfonts/co3BmWBnlCJ3U42vbbfdwMjZpFjm.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 2. Tokens ------------------------------------------------------------- */

:root {
  color-scheme: dark;

  --bg: #131517;
  --surface: #1b1d20;
  --surface-2: #232326;
  --border: rgb(255 255 255 / 0.1);
  --border-strong: rgb(255 255 255 / 0.22);
  --text: #fff;
  --muted: rgb(255 255 255 / 0.72);
  --accent: #d4b144;
  --accent-ink: #131517;

  --font: "Host Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fs-xs: 0.8125rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-h3: 1.25rem;
  --fs-stat: clamp(2.25rem, 1.8rem + 2vw, 3.25rem);
  --fs-h2: clamp(1.875rem, 1.3rem + 2.6vw, 3rem);
  --fs-h1: clamp(2.5rem, 1.6rem + 4.6vw, 4.75rem);

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;

  --radius: 1.25rem;
  --radius-pill: 999px;
  --container: 70rem;
}

/* 3. Base --------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: 1.6;
}
h1, h2, h3 { margin: 0; line-height: 1.08; font-weight: 700; text-wrap: balance; }
p { margin: 0; }
img { display: block; max-width: 100%; height: auto; }
:where(ul[role="list"], ol[role="list"]) { list-style: none; margin: 0; padding: 0; }
a { color: inherit; text-underline-offset: 0.2em; }
a:hover { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--accent); color: var(--accent-ink); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* 4. Layout ------------------------------------------------------------- */

.container { width: min(var(--container), 100% - 2rem); margin-inline: auto; }
main > .block { padding-block: var(--space-5); scroll-margin-top: var(--space-2); }
main > .block + .block { border-top: 1px solid var(--border); }
.prose p + p { margin-top: var(--space-2); }
.prose { color: var(--muted); font-size: var(--fs-lg); }

/* 5. Shared pieces ------------------------------------------------------ */

.visually-hidden,
.skip-link:not(:focus) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip-link {
  position: absolute;
  top: var(--space-1);
  left: var(--space-1);
  z-index: 10;
  padding: var(--space-1) var(--space-2);
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
  border-radius: var(--radius-pill);
}

.eyebrow { margin-bottom: 0.875rem; color: var(--accent); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
h2 { font-size: var(--fs-h2); letter-spacing: -0.03em; }
.intro { max-width: 40rem; margin-top: var(--space-2); color: var(--muted); font-size: var(--fs-lg); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-pill);
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.15s, border-color 0.15s;
}
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: #e2c25c; color: var(--accent-ink); }
.btn-secondary { border: 1px solid var(--border-strong); color: var(--text); }
.btn-secondary:hover { border-color: var(--accent); color: var(--text); }
.btn-small { min-height: 2.5rem; padding: 0.5rem 1.125rem; font-size: var(--fs-sm); }
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: var(--space-4); }

/* Images: every <img> carries width/height, so this only scales it. The
   surface colour shows while a lazy image loads. */
.media-figure { margin: 0; }
.media-figure img { width: 100%; background: var(--surface-2); border-radius: var(--radius); }
.media-figure figcaption { margin-top: 0.75rem; color: var(--muted); font-size: var(--fs-sm); }

.tags { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-2); }
.tags li { padding: 0.25rem 0.75rem; background: var(--surface-2); border-radius: var(--radius-pill); font-size: var(--fs-sm); color: var(--muted); }

/* Header / footer */
.site-header { border-bottom: 1px solid var(--border); }
.site-header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: 4.5rem; }
.logo { display: inline-flex; align-items: center; gap: 0.625rem; font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; text-decoration: none; }
.logo img { width: 2rem; height: 2rem; border-radius: 0.5rem; }

.site-footer { padding-block: var(--space-4); border-top: 1px solid var(--border); color: var(--muted); font-size: var(--fs-sm); }
.site-footer-inner { display: grid; gap: var(--space-3); }
.site-footer ul { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); }
.site-footer a { text-decoration: none; }
.logo-footer { color: var(--text); font-size: 1.125rem; }

/* Image credits: generated from the images a page actually shows. */
.image-credits { padding-block: var(--space-3); border-top: 1px solid var(--border); color: var(--muted); font-size: var(--fs-xs); }
.image-credits summary { cursor: pointer; width: fit-content; }
.image-credits ul { display: grid; gap: 0.25rem; margin-top: var(--space-1); }

@media (min-width: 60em) {
  main > .block { padding-block: 6rem; }
  .site-footer-inner { grid-template-columns: auto 1fr auto; align-items: center; }
  .copyright { grid-column: 1 / -1; }
}

/* blocks/breadcrumb/block.css */
.block-breadcrumb { padding-top: var(--space-3); font-size: var(--fs-sm); color: var(--muted); }
.block-breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.block-breadcrumb li + li::before { content: "/"; margin-right: var(--space-1); opacity: 0.6; }
.block-breadcrumb a { text-decoration: none; }
.block-breadcrumb [aria-current="page"] { color: var(--text); }

/* blocks/hero/block.css */
main > .block-hero { padding-block: var(--space-4) var(--space-5); border-top: 0; }
.block-hero h1 { font-size: var(--fs-h1); letter-spacing: -0.04em; line-height: 1; }
.block-hero .lede { margin-top: var(--space-3); color: var(--muted); font-size: var(--fs-lg); }
.hero-inner { display: grid; gap: var(--space-4); }

.hero-centered .hero-copy,
.hero-minimal .hero-copy { text-align: center; }
.hero-centered h1,
.hero-minimal h1 { max-width: 16ch; margin-inline: auto; }
.hero-centered .lede,
.hero-minimal .lede { max-width: 38rem; margin-inline: auto; }
.hero-centered .actions,
.hero-minimal .actions { justify-content: center; }

.hero-split h1 { max-width: 14ch; }
.hero-split .lede { max-width: 34rem; }

@media (min-width: 60em) {
  main > .block-hero { padding-block: var(--space-5) 6rem; }
  .hero-split .hero-inner { grid-template-columns: 1fr 1fr; align-items: center; gap: var(--space-5); }
}

/* blocks/toc/block.css */
.block-toc {
  margin-block: 0 var(--space-4);
  padding: var(--space-2) var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.toc-title { color: var(--accent); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.block-toc ol { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); margin-top: var(--space-1); }
.block-toc a { display: inline-block; padding-block: 0.25rem; text-decoration: none; color: var(--muted); }
.block-toc a:hover { color: var(--accent); }

/* blocks/stats/block.css */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: var(--space-2);
  margin: var(--space-4) 0 0;
}
.stat {
  display: flex;
  flex-direction: column;
  padding: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
/* Visual order: value first, then label; DOM order keeps <dt> before <dd>. */
.stat dt { order: 2; margin-top: var(--space-1); font-weight: 700; }
.stat-value { order: 1; margin: 0; color: var(--accent); font-size: var(--fs-stat); font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.stat-detail { order: 3; margin: 0.25rem 0 0; color: var(--muted); font-size: var(--fs-sm); }
.source-note { margin-top: var(--space-2); color: var(--muted); font-size: var(--fs-sm); }

/* blocks/features/block.css */
.feature-grid { display: grid; gap: var(--space-2); margin-top: var(--space-4); }
.feature-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.feature-img {
  width: calc(100% + 2 * var(--space-3));
  max-width: none;
  margin: calc(-1 * var(--space-3)) calc(-1 * var(--space-3)) var(--space-3);
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius) var(--radius) 0 0;
}
.feature-img.is-contain { object-fit: contain; background: var(--surface-2); }
.feature-index { color: var(--accent); font-size: var(--fs-sm); font-weight: 700; }
.feature-card h3 { margin: var(--space-2) 0 0.75rem; font-size: var(--fs-h3); }
.feature-index + h3 { margin-top: var(--space-3); }
.feature-card > p:not(.feature-index) { color: var(--muted); }

@media (min-width: 40em) {
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 60em) {
  .feature-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
}

/* blocks/media/block.css */
.media-layout { display: grid; gap: var(--space-4); align-items: center; }
.media-copy .prose { margin-top: var(--space-3); }
.checklist { display: grid; gap: 0.625rem; margin-top: var(--space-3); }
.checklist li { position: relative; padding-left: 1.75rem; }
.checklist li::before {
  content: "";
  position: absolute;
  left: 0.25rem;
  top: 0.45em;
  width: 0.5rem;
  height: 0.85rem;
  border: solid var(--accent);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

@media (min-width: 60em) {
  .media-layout { grid-template-columns: 1fr 1fr; gap: var(--space-5); }
  .media-reverse > .media-figure { order: -1; }
}

/* blocks/carousel/block.css */
.carousel { position: relative; margin-top: var(--space-4); }
.carousel-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 85%;
  gap: var(--space-2);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 0;
  padding-bottom: var(--space-2);
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
/* position: relative keeps the visually-hidden "slide n of N" text inside the
   scrolling track; without it the absolutely positioned span escapes the
   overflow clip and widens the whole page on phones. */
.carousel-slide { position: relative; scroll-snap-align: start; }
.carousel-slide figure { margin: 0; height: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.carousel-slide img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--surface-2); }
.fit-contain .carousel-slide img,
.carousel-slide img.is-contain { object-fit: contain; }
.carousel-slide figcaption { display: grid; gap: 0.25rem; padding: var(--space-2) var(--space-3) var(--space-3); color: var(--muted); font-size: var(--fs-sm); }
.slide-title { color: var(--text); font-size: var(--fs-base); font-weight: 700; }

.carousel-controls { display: flex; justify-content: flex-end; gap: var(--space-1); margin-top: var(--space-2); }
.carousel-btn {
  display: inline-grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  font: inherit;
  font-size: 1.25rem;
  cursor: pointer;
}
.carousel-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.carousel-btn:disabled { opacity: 0.35; cursor: default; }

@media (min-width: 40em) { .carousel-track { grid-auto-columns: calc((100% - var(--space-2)) / 2); } }
@media (min-width: 60em) { .carousel-track { grid-auto-columns: calc((100% - 2 * var(--space-2)) / 3); } }
@media (prefers-reduced-motion: no-preference) { .carousel-track { scroll-behavior: smooth; } }

/* blocks/table/block.css */
.table-scroll { margin-top: var(--space-4); overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }
.data-table { width: 100%; min-width: 36rem; border-collapse: collapse; font-size: var(--fs-sm); }
.data-table caption { padding: var(--space-2) var(--space-3); text-align: left; color: var(--muted); caption-side: top; }
.data-table th, .data-table td { padding: 0.875rem var(--space-2); text-align: left; vertical-align: top; border-top: 1px solid var(--border); }
.data-table thead th { color: var(--text); font-weight: 700; background: var(--surface); }
.data-table tbody th { font-weight: 500; color: var(--text); }
.data-table td { color: var(--muted); }
.data-table .is-highlight { background: rgb(212 177 68 / 0.08); color: var(--text); }
.data-table thead .is-highlight { color: var(--accent); }
.mark { display: inline-block; width: 0.875rem; height: 0.875rem; margin-right: 0.5rem; vertical-align: -0.1em; border-radius: 50%; }
.mark-yes { background: var(--accent); }
.mark-no { border: 2px solid var(--border-strong); }

/* blocks/steps/block.css */
.steps { display: grid; gap: var(--space-2); max-width: 48rem; margin-top: var(--space-4); }
.step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.step-number {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: 50%;
  font-weight: 700;
}
.step h3 { margin-top: 0.4rem; font-size: var(--fs-h3); }
.step p { margin-top: 0.5rem; color: var(--muted); }

/* blocks/testimonials/block.css */
.testimonials {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: var(--space-2);
  margin-top: var(--space-4);
}
.testimonial {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-3);
  height: 100%;
  margin: 0;
  padding: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.testimonial blockquote { margin: 0; font-size: var(--fs-lg); }
.testimonial blockquote p::before { content: "\201C"; }
.testimonial blockquote p::after { content: "\201D"; }
.testimonial figcaption { display: flex; align-items: center; gap: 0.75rem; }
.testimonial figcaption > span { display: grid; }
.testimonial-avatar { width: 3rem; height: 3rem; border-radius: 50%; object-fit: cover; background: var(--surface-2); }
.testimonial-name { font-weight: 700; }
.testimonial-detail { color: var(--accent); font-size: var(--fs-sm); }

/* blocks/faq/block.css */
.faq-list { display: grid; gap: 0.75rem; max-width: 48rem; margin-top: var(--space-4); }
.faq-item { background: var(--surface); border: 1px solid var(--border); border-radius: calc(var(--radius) * 0.6); }
.faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; flex: none; color: var(--accent); font-size: 1.5rem; line-height: 1; }
.faq-item[open] summary::after { content: "\2212"; }
.faq-answer { padding: 0 var(--space-3) var(--space-2); color: var(--muted); }

/* blocks/cta/block.css */
.block-cta .cta-box { text-align: center; }
.block-cta .intro { margin-inline: auto; }
.block-cta .actions { justify-content: center; }
.cta-panel .cta-box {
  padding: var(--space-4) var(--space-3);
  background:
    radial-gradient(120% 140% at 50% 0%, rgb(212 177 68 / 0.16), transparent 60%),
    var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
}
@media (min-width: 60em) { .cta-panel .cta-box { padding: var(--space-5); } }

/* blocks/related/block.css */
.link-cards { display: grid; gap: 0.75rem; margin-top: var(--space-4); }
.link-card {
  display: grid;
  gap: 0.375rem;
  height: 100%;
  padding: var(--space-2) var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) * 0.6);
  text-decoration: none;
}
.link-card:hover { border-color: var(--accent); color: inherit; }
.link-card-title { font-weight: 700; }
.link-card-body { color: var(--muted); font-size: var(--fs-sm); }

@media (min-width: 40em) { .link-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 60em) { .link-cards { grid-template-columns: repeat(3, 1fr); } }

/* Labels on the block demo page (/pseo-blocks). Only that page uses them. */
.demo-label {
  margin-top: var(--space-4);
  padding: 0.75rem var(--space-2);
  border: 1px dashed var(--accent);
  border-radius: calc(var(--radius) * 0.5);
  color: var(--muted);
  font-size: var(--fs-sm);
}
.demo-label code { color: var(--accent); font-size: var(--fs-base); font-weight: 700; }
.demo-label span { color: var(--text); }
.demo-label p + p { margin-top: 0.25rem; }