/* =============================================================================
   Cursafosca · guia.css — the runner's guide, screen and print
   Loaded only by /guia/. Six components the rest of the site does not need
   (key facts, contents, route picker, hour-by-hour day, tickable kit list,
   numbered rules) plus the print rules that turn the same page into
   web/docs/guia-corredor-cat.pdf (node tools/pdf.mjs).
   Values come from tokens.css, never from here.

   The guide reads like the rest of the site: a chapter is a kicker, one
   statement, and the data. Prose is the exception, not the material.
   ========================================================================== */

/* 1 ── Key facts ──────────────────────────────────────────────────────────
   Four answers, above everything else: when, where, and the two clocks. */

.gfacts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s3) var(--gutter);
  padding-block-start: var(--s3);
  border-block-start: 1px solid var(--rule);
}
@media (min-width: 48rem) {
  .gfacts {
    grid-template-columns: repeat(4, 1fr);
  }
}
.gfacts dt {
  font-size: var(--fs-kicker);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
  color: var(--text-dim);
}
.gfacts dd {
  margin: 0.4rem 0 0;
  font-size: var(--fs-data);
  font-weight: var(--w-black);
  letter-spacing: var(--track-snug);
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}
.gfacts small {
  display: block;
  margin-block-start: 0.35rem;
  font-size: var(--fs-small);
  font-weight: var(--w-regular);
  letter-spacing: 0;
  color: var(--text-dim);
}

/* 2 ── Contents ───────────────────────────────────────────────────────────
   Not a sidebar: a block of its own that also says what is in the guide, so a
   runner sees the shape of race day before reading a word of it. */

.sumari {
  columns: 1;
  column-gap: var(--s5);
}
@media (min-width: 60rem) {
  .sumari {
    columns: 2;
  }
}
.sumari li {
  break-inside: avoid;
  border-block-start: 1px solid var(--rule);
}
.sumari a {
  display: grid;
  grid-template-columns: 2.75rem 1fr;
  gap: 0 var(--s2);
  padding-block: var(--s2);
  text-decoration: none;
}
.sumari a::before {
  content: attr(data-n);
  grid-row: span 2;
  padding-block-start: 0.2em;
  font-size: var(--fs-small);
  font-weight: var(--w-bold);
  font-variant-numeric: tabular-nums;
  color: var(--rule-strong);
  transition: color var(--t-micro) var(--ease);
}
.sumari b {
  font-weight: var(--w-bold);
  letter-spacing: var(--track-snug);
  transition: color var(--t-micro) var(--ease);
}
.sumari span {
  display: block;
  margin-block-start: 0.15rem;
  color: var(--text-dim);
  font-size: var(--fs-small);
  text-wrap: pretty;
}
.sumari a:hover::before,
.sumari a:focus-visible::before,
.sumari a:hover b,
.sumari a:focus-visible b {
  color: var(--accent);
}

/* 3 ── Route picker ───────────────────────────────────────────────────────
   The guide covers three modalities; a runner only needs one. Radios + :has()
   filter every [data-mod] block on the page, with no JavaScript at all: the
   page works filtered before site.js has loaded, and after it fails to. */

.picker {
  border: 0;
  margin: 0;
  padding: 0;
  min-inline-size: 0; /* a fieldset refuses to shrink below its content */
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.picker input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
}
.picker label {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-pill);
  font-size: var(--fs-kicker);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  cursor: pointer;
  transition:
    color var(--t-micro) var(--ease),
    background-color var(--t-micro) var(--ease),
    border-color var(--t-micro) var(--ease);
}
.picker label::before {
  content: "";
  inline-size: 0.5em;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--c, transparent);
}
.picker input:checked + label {
  background: var(--text);
  border-color: var(--text);
  color: var(--ink);
}
.picker input:focus-visible + label {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.picker__note {
  flex-basis: 100%;
  margin-block-start: var(--s2);
  color: var(--text-dim);
  font-size: var(--fs-small);
}

/* One rule per modality. [data-mod] lists the modalities a block belongs to,
   so `data-mod="cursa caminada"` survives both filters. Screen only: the PDF
   is printed once and has to carry all three. */
@media screen {
  body:has(#mod-trail:checked) [data-mod]:not([data-mod~="trail"]),
  body:has(#mod-cursa:checked) [data-mod]:not([data-mod~="cursa"]),
  body:has(#mod-caminada:checked) [data-mod]:not([data-mod~="caminada"]) {
    display: none;
  }
}

/* 4 ── The day, hour by hour ──────────────────────────────────────────────
   The spine of the guide: everything that happens on 21 November, in order. */

.day {
  border-block-start: 1px solid var(--rule);
}
.day li {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: 0 var(--s2);
  padding-block: var(--s2);
  border-block-end: 1px solid var(--rule);
}
@media (min-width: 48rem) {
  .day li {
    grid-template-columns: 9rem 1fr;
    gap: 0 var(--s3);
  }
}
.day time {
  font-weight: var(--w-black);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--track-snug);
  font-size: var(--fs-h3);
  line-height: 1.1;
}
.day b {
  display: block;
  font-weight: var(--w-bold);
  letter-spacing: var(--track-snug);
}
.day span {
  display: block;
  margin-block-start: 0.15rem;
  color: var(--text-dim);
  font-size: var(--fs-small);
  text-wrap: pretty;
}
/* The moments a runner cannot miss: the starts and the finish cut-offs. */
.day li[data-key] time {
  color: var(--accent);
}
.day li[data-key] time::after {
  content: "";
  display: inline-block;
  inline-size: 0.32em;
  aspect-ratio: 1;
  border-radius: 50%;
  background: currentColor;
  vertical-align: 0.55em;
  margin-inline-start: 0.28em;
}

/* 5 ── Kit list ───────────────────────────────────────────────────────────
   A packing list you can actually tick. Native checkboxes: no state to keep,
   no script, and the browser's own accessibility comes free. */

.kit {
  columns: 1;
  column-gap: var(--s5);
}
@media (min-width: 48rem) {
  .kit {
    columns: 2;
  }
}
.kit li {
  break-inside: avoid;
  border-block-start: 1px solid var(--rule);
}
.kit label {
  display: grid;
  grid-template-columns: 1.15rem 1fr;
  column-gap: var(--s2);
  align-items: start;
  padding-block: var(--s2);
  cursor: pointer;
}
.kit input {
  inline-size: 1.15rem;
  block-size: 1.15rem;
  margin: 0.15rem 0 0;
  accent-color: var(--accent);
}
.kit b {
  display: block;
  font-weight: var(--w-bold);
  letter-spacing: var(--track-snug);
  transition: opacity var(--t-micro) var(--ease);
}
.kit span {
  display: block;
  margin-block-start: 0.15rem;
  color: var(--text-dim);
  font-size: var(--fs-small);
  text-wrap: pretty;
}
.kit input:checked ~ div b {
  opacity: 0.45;
  text-decoration: line-through;
}
.kit input:checked ~ div span {
  opacity: 0.55;
}

/* 6 ── Rules and answers ──────────────────────────────────────────────────
   Numbered rules and short label/answer pairs: the two shapes that stand in
   for paragraphs everywhere in this guide. */

.rules {
  counter-reset: rule;
}
.rules li {
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  gap: 0 var(--s2);
  padding-block: var(--s2);
  border-block-start: 1px solid var(--rule);
  text-wrap: pretty;
}
.rules li::before {
  counter-increment: rule;
  content: counter(rule, decimal-leading-zero);
  padding-block-start: 0.25em;
  font-size: var(--fs-small);
  font-weight: var(--w-bold);
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}
.qa {
  border-block-start: 1px solid var(--rule);
}
.qa > div {
  padding-block: var(--s2);
  border-block-end: 1px solid var(--rule);
}
@media (min-width: 48rem) {
  .qa > div {
    display: grid;
    grid-template-columns: 15rem 1fr;
    gap: 0 var(--s3);
  }
}
.qa dt {
  font-weight: var(--w-bold);
  letter-spacing: var(--track-snug);
}
.qa dd {
  margin: 0.15rem 0 0;
  color: var(--text-dim);
  text-wrap: pretty;
}
@media (min-width: 48rem) {
  .qa dd {
    margin-block-start: 0;
  }
}

/* A .datatable's last column is a figure, so it is bold and never wraps. When
   it holds a sentence instead, say so. */
.datatable td.wrapped {
  white-space: normal;
  text-align: start;
  font-weight: var(--w-regular);
  color: var(--text-dim);
}

/* Emergency numbers: the one block that must read at arm's length. */
.sos {
  padding-inline-start: var(--s2);
  border-inline-start: 2px solid var(--accent);
}
.sos dt {
  font-size: var(--fs-kicker);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
  color: var(--text-dim);
}
.sos dd {
  margin: 0.1rem 0 var(--s2);
  font-size: var(--fs-data);
  font-weight: var(--w-black);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--track-snug);
}
.sos dd:last-child {
  margin-block-end: 0;
}

/* One page, two audiences: .print-only is for the PDF, .screen-only for the
   page. Download buttons are the clearest case: a pill you cannot tap is noise
   on paper, and a paragraph naming the URL is noise on screen. */
.print-only {
  display: none;
}

/* 7 ── Print: the same page becomes the PDF ───────────────────────────────
   One source of truth for the guide. Chromium prints /guia/ to A4 through
   tools/pdf.mjs; everything that is chrome, navigation or state disappears
   and the tokens flip to paper. */

@media print {
  :root {
    --ink: #fff;
    --ink-2: #fff;
    --text: #050609;
    --text-dim: #55596b;
    --rule: rgb(5 6 9 / 16%);
    --rule-strong: rgb(5 6 9 / 32%);
    --accent: #4b4dbd;
    --on-accent: #fff;
    --trail: #1f65b8;
    --cursa: #a3760c; /* the screen yellow disappears on paper */
    --caminada: #35894c;
    --pad-section: 0;
    --header-h: 0px;
    color-scheme: light;
  }

  @page {
    size: A4;
    margin: 15mm 14mm 14mm;
  }

  html {
    font-size: 10.5pt;
  }
  body {
    background: #fff;
    min-block-size: auto;
    padding: 0;
  }

  /* Chrome, navigation, state and anything that only makes sense on a screen. */
  .header,
  .sheet,
  .mbar,
  .footer,
  .skip,
  .picker,
  .guide__cta,
  .btn-row,
  .theme,
  .screen-only {
    display: none !important;
  }
  .print-only {
    display: block;
  }

  .wrap {
    max-inline-size: none;
    padding-inline: 0;
  }
  .section {
    padding-block: var(--s4) 0;
  }

  /* Cover: one full page. Title, photograph, and the date at the foot.
     On screen the hero is a photo with text over it, so it carries its own
     light palette and a scrim; on paper both have to go. */
  .rhero {
    --text: #050609;
    --text-dim: #55596b;
    --rule: rgb(5 6 9 / 16%);
    --rule-strong: rgb(5 6 9 / 32%);
    color: var(--text);
    position: static;
    overflow: visible;
    display: flex;
    flex-direction: column;
    min-block-size: 258mm;
    padding: 0;
    break-after: page;
  }
  .rhero .wrap {
    order: 1;
  }
  .rhero__name {
    color: var(--text-dim);
  }
  .rhero__photo {
    order: 2;
    position: static;
    inset: auto;
    margin-block-start: var(--s4);
  }
  .rhero__photo picture {
    block-size: auto;
  }
  .rhero__photo img {
    inline-size: 100%;
    block-size: 180mm;
    object-fit: cover;
  }
  .rhero__photo::after {
    display: none;
  }
  .guide-hero__when {
    order: 3;
    margin-block-start: auto;
    padding-block-start: var(--s2);
    border-block-start: 1px solid var(--rule-strong);
    font-size: 1.05rem;
    font-weight: var(--w-bold);
    letter-spacing: var(--track-snug);
  }
  .rhero .t-h1 {
    font-size: 3.2rem;
    text-transform: none;
    letter-spacing: var(--track-tight);
  }

  .sumari {
    columns: 2;
    column-gap: 10mm;
  }

  /* Photographs stay, small enough that they never own a page by themselves. */
  .cinema {
    inline-size: 100%;
    margin-inline-start: 0;
    translate: none;
    break-inside: avoid;
    margin-block: var(--s3) 0;
  }
  .cinema img {
    block-size: 58mm;
  }
  .cinema::after {
    display: none;
  }
  .cinema__cap {
    display: none;
  }

  h2,
  h3,
  h4 {
    break-after: avoid;
  }
  .t-h1 {
    font-size: 1.6rem;
    letter-spacing: var(--track-caps);
    text-transform: uppercase;
  }
  .lead {
    font-size: 1.02rem;
    max-inline-size: none;
  }
  table,
  .cuts__route,
  .day li,
  .kit li,
  .rules li,
  .qa > div,
  .gfacts,
  figure {
    break-inside: avoid;
  }
  .table-scroll {
    overflow: hidden;
  }
  .datatable {
    table-layout: fixed;
    font-size: 0.88rem;
  }
  .datatable th,
  .datatable td {
    padding-inline-end: 0.5rem;
    overflow-wrap: break-word;
  }
  .datatable th:last-child,
  .datatable td:last-child {
    text-align: start;
  }

  /* Reveal animations leave elements at opacity 0 until observed: on paper
     nothing is ever observed, so pin them visible. */
  .reveal,
  .rise__l > *,
  .reveal-img img {
    opacity: 1 !important;
    transform: none !important;
  }
}