/* ─────────────────────────────────────────────────────────────────────────
   /diversos — o caderno

   Everything under Diversos is reference material: what pedestrianismo is,
   what the marks on a rock mean, what to put in the bag, and the two trails
   the group itself marked in 2003. So the section is built as the group's
   notebook rather than as a set of articles — a numbered, ruled index, and
   reading pages with a wide margin and a running index of their own.

   Three layouts share this sheet:
     layouts/diversos.njk   the index          (.dvi-*)
     layouts/diverso.njk    a reading page     (.dv-*)
     layouts/percursos.njk  the PR8/PR9 front  (.dv-* plus .pc-*)

   Rules over boxes throughout; the one drenched green plate per page is the
   PR8/PR9 set-piece, because that is the only thing here the group made.
   ───────────────────────────────────────────────────────────────────────── */

/* ── Shared shell ─────────────────────────────────────────────────────── */

/* A reading page is an <article>, and main.css gives bare <article> the card
   treatment. Undo it: nothing in this section is boxed.

   The measure is the site's, not this sheet's. It used to be 1120px with a
   flat 1.5rem gutter, which put every h1 under /diversos eight pixels to the
   right of the logo above it at every desktop width — the one page family that
   did not line up. The prose inside is capped at 68ch by .dv-prose, so taking
   the wider measure costs the reading pages nothing. */
.dv-pagina {
  background: none;
  border: 0;
  border-radius: 0;
  max-width: var(--measure);
  margin: 0 auto;
  padding: var(--abertura-pt) var(--gutter) var(--s-20);
}

/* On the index the opening is the shared .abertura, which brings its own top
   padding; the wrapper below it starts flush. */
.abertura + .dv-pagina { padding-top: 0; }

/* The mono line above a reading page's title is also the way back, so it is the
   shared .abertura-eyebrow (main.css) plus the crumb's links. It carries both
   classes in the markup; the type lives there, only the links live here — that
   way the crumb and the label on the index sit at the same size, and the h1
   under them starts at the same height as every other h1 on the site. Nothing
   about the type is set here: a line-height of its own was enough to drop this
   page's h1 five pixels below every other one. */

.dv-eyebrow a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--c-border-2);
}

.dv-eyebrow a:hover {
  color: var(--c-primary);
  border-bottom-color: currentColor;
}

.dv-eyebrow-sep {
  padding: 0 0.5em;
  color: var(--c-border-2);
}

.dv-titulo {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 5.4vw, 3.75rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.022em;
  margin: 0;
  max-width: 18ch;
}

.dv-lead {
  font-size: clamp(var(--t-lg), 1.6vw, var(--t-xl));
  line-height: 1.65;
  color: var(--c-text-muted);
  max-width: 54ch;
  margin: var(--s-5) 0 0;
}

/* ── Index page ───────────────────────────────────────────────────────── */

/* The index opens with the shared .abertura (main.css). It runs deeper than the
   default because the green plate underneath it is a hard edge. */
.dvi .abertura { --abertura-pb: clamp(var(--s-10), 5vw, var(--s-16)); }

/* The plate. One per page, drenched, and it carries the only thing on this
   page the group did rather than wrote down. */
.dv-placa {
  background: #14301F;
  color: #E8F2EA;
  border-radius: var(--radius-lg);
  padding: clamp(var(--s-8), 5vw, var(--s-16)) clamp(var(--s-6), 4vw, var(--s-12));
  display: grid;
  gap: clamp(var(--s-8), 4vw, var(--s-12));
}

@media (min-width: 900px) {
  .dv-placa {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
    align-items: start;
  }
}

.dv-placa-rotulo {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #9DBFA9;
  margin: 0 0 var(--s-4);
}

.dv-placa h2 {
  font-family: var(--font-display);
  font-size: clamp(var(--t-2xl), 3.2vw, var(--t-4xl));
  font-weight: 600;
  line-height: 1.15;
  color: #E8F2EA;
  margin: 0 0 var(--s-5);
  max-width: 20ch;
}

.dv-placa p {
  color: #C9DDCE;
  font-size: var(--t-base);
  line-height: 1.8;
  max-width: 58ch;
  margin: 0 0 var(--s-4);
}

.dv-placa p:last-child { margin-bottom: 0; }

/* The two trails, as a ruled list rather than two cards. */
.pc-trilhos {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(157, 191, 169, 0.28);
}

.pc-trilho a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-5) 0;
  min-height: 48px;
  border-bottom: 1px solid rgba(157, 191, 169, 0.28);
  text-decoration: none;
  color: #E8F2EA;
  transition: color var(--dur-fast) var(--ease);
}

.pc-trilho a:hover,
.pc-trilho a:focus-visible {
  color: #52B788;
}

.pc-trilho-nome {
  font-family: var(--font-display);
  font-size: var(--t-xl);
  font-weight: 600;
  line-height: 1.25;
  display: block;
}

.pc-trilho-dados {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9DBFA9;
  margin-top: var(--s-2);
}

.pc-trilho-seta {
  flex-shrink: 0;
  transition: transform var(--dur) var(--ease);
}

.pc-trilho a:hover .pc-trilho-seta { transform: translateX(4px); }

/* Groups of reading pages. A numbered table of contents, not a card grid. */
.dvi-grupos {
  margin-top: clamp(var(--s-12), 7vw, var(--s-20));
  display: grid;
  gap: clamp(var(--s-10), 5vw, var(--s-16));
}

.dvi-grupo-rotulo {
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin: 0 0 var(--s-2);
}

.dvi-grupo-rotulo::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--c-border);
}

.dvi-lista {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dvi-lista li { margin: 0; }

.dvi-entrada {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: var(--s-4);
  row-gap: var(--s-2);
  padding: var(--s-5) 0;
  min-height: 48px;
  border-bottom: 1px solid var(--c-border);
  text-decoration: none;
  color: var(--c-text);
}

.dvi-entrada:hover .dvi-entrada-titulo,
.dvi-entrada:focus-visible .dvi-entrada-titulo {
  color: var(--c-primary);
}

.dvi-entrada-num {
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  font-variant-numeric: tabular-nums;
  color: var(--c-text-muted);
}

.dvi-entrada-titulo {
  font-family: var(--font-display);
  font-size: clamp(var(--t-lg), 2vw, var(--t-2xl));
  font-weight: 600;
  line-height: 1.25;
  transition: color var(--dur-fast) var(--ease);
}

.dvi-entrada-resumo {
  grid-column: 2 / -1;
  font-size: var(--t-sm);
  line-height: 1.6;
  color: var(--c-text-muted);
  max-width: 62ch;
}

.dvi-entrada-seta {
  grid-row: 1;
  grid-column: 3;
  align-self: center;
  color: var(--c-text-muted);
  transition: transform var(--dur) var(--ease), color var(--dur-fast) var(--ease);
}

.dvi-entrada:hover .dvi-entrada-seta,
.dvi-entrada:focus-visible .dvi-entrada-seta {
  transform: translateX(4px);
  color: var(--c-primary);
}

@media (max-width: 560px) {
  .dvi-entrada { grid-template-columns: 2.25rem minmax(0, 1fr); }
  .dvi-entrada-seta { display: none; }
}

/* ── Reading page ─────────────────────────────────────────────────────── */

.dv-masthead {
  padding-bottom: clamp(var(--s-6), 3vw, var(--s-10));
  border-bottom: 1px solid var(--c-border);
}

/* The technical sheet on the two trail pages reuses the shared .marcos
   masthead, turned down: here the numbers support the walk, they are not
   the subject of the page. */
.dv-ficha {
  margin-top: clamp(var(--s-8), 4vw, var(--s-12));
}

.dv-ficha .marcos {
  --marco-num: clamp(1.5rem, 3vw, 2rem);
  --marco-num-principal: clamp(1.75rem, 3.6vw, 2.5rem);
}

.dv-corpo {
  margin-top: clamp(var(--s-10), 5vw, var(--s-16));
  display: grid;
  gap: clamp(var(--s-8), 4vw, var(--s-12));
}

@media (min-width: 1000px) {
  .dv-corpo {
    grid-template-columns: minmax(0, 1fr) 15rem;
    align-items: start;
  }
}

/* Running index. Built by the layout's script from the h2s in the prose, so a
   page with one section never shows an index of one. Hidden until built. */
.dv-indice[hidden] { display: none; }

.dv-indice {
  order: -1;
  font-size: var(--t-sm);
}

@media (min-width: 1000px) {
  /* The index comes first in the DOM so it is reachable before a very long
     page, and moves to the right-hand column here. */
  .dv-indice {
    grid-column: 2;
    grid-row: 1;
    position: sticky;
    top: calc(var(--header-h) + var(--s-6));
    max-height: calc(100vh - var(--header-h) - var(--s-12));
    overflow-y: auto;
  }
}

.dv-indice-rotulo {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--c-border);
  margin: 0 0 var(--s-2);
}

.dv-indice ol {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: dv-sec;
}

.dv-indice li { margin: 0; }

.dv-indice a {
  display: flex;
  gap: var(--s-3);
  padding: var(--s-3) 0;
  min-height: 44px;
  align-items: center;
  line-height: 1.4;
  color: var(--c-text-muted);
  text-decoration: none;
  border-bottom: 1px solid var(--c-border);
}

.dv-indice a::before {
  counter-increment: dv-sec;
  content: counter(dv-sec, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-variant-numeric: tabular-nums;
  color: var(--c-border-2);
  flex-shrink: 0;
}

.dv-indice a:hover,
.dv-indice a[aria-current="true"] {
  color: var(--c-primary);
}

.dv-indice a[aria-current="true"]::before { color: var(--c-primary); }

/* ── Prose ────────────────────────────────────────────────────────────── */

@media (min-width: 1000px) {
  .dv-prose { grid-column: 1; grid-row: 1; }
}

.dv-prose {
  max-width: 68ch;
  font-size: var(--t-lg);
  line-height: 1.85;
}

.dv-prose > :first-child { margin-top: 0; }

.dv-prose p { margin: 0 0 var(--s-5); }

.dv-prose h2 {
  font-size: clamp(var(--t-2xl), 2.8vw, var(--t-3xl));
  font-weight: 600;
  line-height: 1.2;
  margin: clamp(var(--s-12), 6vw, var(--s-16)) 0 var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px solid var(--c-border);
  scroll-margin-top: calc(var(--header-h) + var(--s-6));
}

.dv-prose h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; }

.dv-prose h3 {
  font-size: clamp(var(--t-lg), 2vw, var(--t-xl));
  font-weight: 600;
  margin: var(--s-10) 0 var(--s-3);
  scroll-margin-top: calc(var(--header-h) + var(--s-6));
}

.dv-prose h4 {
  font-family: var(--font-body);
  font-size: var(--t-base);
  font-weight: 700;
  margin: var(--s-8) 0 var(--s-3);
}

.dv-prose ul,
.dv-prose ol {
  margin: 0 0 var(--s-5);
  padding-left: var(--s-5);
}

.dv-prose li { margin-bottom: var(--s-3); line-height: 1.75; }

.dv-prose li::marker { color: var(--c-border-2); }

/* Half this section is glossary prose: "**Botas** — ligeiras, de preferência
   impermeáveis…". Colouring the term makes the page scannable without
   inventing a component for it. */
.dv-prose p > strong:first-child {
  color: var(--c-primary);
  font-weight: 700;
}

.dv-prose blockquote {
  margin: var(--s-8) 0;
  padding: 0;
  border: 0;
  font-family: var(--font-display);
  font-size: clamp(var(--t-lg), 2vw, var(--t-xl));
  font-style: italic;
  line-height: 1.55;
  color: var(--c-text);
}

.dv-prose blockquote p:last-child { margin-bottom: 0; }

.dv-prose hr {
  margin: clamp(var(--s-10), 5vw, var(--s-16)) 0;
  border: 0;
  border-top: 1px solid var(--c-border);
}

.dv-prose img {
  border-radius: var(--radius);
  margin: var(--s-6) 0;
}

.dv-prose a {
  color: var(--c-primary);
  text-underline-offset: 3px;
}

.dv-prose audio {
  width: 100%;
  margin: var(--s-6) 0;
  min-height: 48px;
}

/* Byline under the title of a page that has a named author. */
.dv-assinatura {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin: var(--s-5) 0 0;
}

/* ── Signage marks ────────────────────────────────────────────────────── */

/* PR and GR both explain four painted marks. Ruled rows, mark on the left at
   its real size, meaning on the right: the page is a key, so it is built
   as one instead of as four headings with a picture under each. */
.dv-prose .dv-marcas {
  list-style: none;
  margin: var(--s-8) 0 0;
  padding: 0;
  border-top: 1px solid var(--c-border);
  max-width: 68ch;
}

.dv-prose .dv-marca {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: var(--s-5);
  align-items: start;
  padding: var(--s-6) 0;
  margin: 0;
  border-bottom: 1px solid var(--c-border);
}

.dv-prose .dv-marca-figuras {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
}

.dv-prose .dv-marca-figuras img {
  width: 44px;
  height: auto;
  border-radius: 2px;
  background: var(--c-surface);
}

.dv-prose .dv-marca-nome {
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 600;
  margin: 0 0 var(--s-2);
}

.dv-prose .dv-marca p {
  margin: 0 0 var(--s-3);
  font-size: var(--t-base);
  line-height: 1.75;
}

.dv-prose .dv-marca p:last-child { margin-bottom: 0; }

.dv-prose .dv-marca-detalhe {
  color: var(--c-text-muted);
  font-size: var(--t-sm);
}

@media (max-width: 560px) {
  .dv-prose .dv-marca { grid-template-columns: 1fr; gap: var(--s-4); }
}

/* ── Page foot ────────────────────────────────────────────────────────── */

.dv-fim {
  margin-top: clamp(var(--s-12), 7vw, var(--s-20));
  padding-top: var(--s-6);
  border-top: 1px solid var(--c-border-2);
  display: grid;
  gap: var(--s-4);
}

@media (min-width: 700px) {
  .dv-fim { grid-template-columns: 1fr 1fr; }
}

.dv-fim-link {
  display: block;
  padding: var(--s-4) 0;
  min-height: 48px;
  text-decoration: none;
  color: var(--c-text);
}

.dv-fim-link--seguinte { text-align: right; }

@media (max-width: 699px) {
  .dv-fim-link--seguinte { text-align: left; }
  .dv-fim-link + .dv-fim-link { border-top: 1px solid var(--c-border); }
}

.dv-fim-rotulo {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin-bottom: var(--s-2);
}

.dv-fim-titulo {
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 600;
  line-height: 1.3;
  transition: color var(--dur-fast) var(--ease);
}

.dv-fim-link:hover .dv-fim-titulo,
.dv-fim-link:focus-visible .dv-fim-titulo { color: var(--c-primary); }

.dv-voltar {
  margin-top: var(--s-8);
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 48px;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  text-decoration: none;
}

.dv-voltar:hover { color: var(--c-primary); }

.dv-voltar svg { transition: transform var(--dur) var(--ease); }
.dv-voltar:hover svg { transform: translateX(-3px); }

/* ── Percursos front ──────────────────────────────────────────────────── */

/* The supporters who paid for the 2003 marking. Logos at their own size on a
   white strip, because half of them were drawn for white paper. */
.dv-prose .pc-apoios {
  margin: var(--s-8) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(var(--s-6), 4vw, var(--s-10));
  background: #FFFFFF;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: clamp(var(--s-6), 4vw, var(--s-8));
}

.dv-prose .pc-apoios li { margin: 0; }

.dv-prose .pc-apoios img {
  max-height: 56px;
  width: auto;
}

.dv-prose .pc-apoios-nota {
  font-size: var(--t-sm);
  color: var(--c-text-muted);
  line-height: 1.7;
  max-width: 62ch;
  margin: var(--s-4) 0 0;
}

/* Press cuttings from 2003. Each one keeps its paper and date in mono above
   a serif headline, so a reader can tell reporting from the group's own
   voice without reading a word of it. */
.dv-prose .pc-recorte {
  padding-top: var(--s-6);
  border-top: 1px solid var(--c-border);
  margin-top: clamp(var(--s-10), 5vw, var(--s-16));
}

.dv-prose .pc-recorte-fonte {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin: 0 0 var(--s-3);
}

.dv-prose .pc-recorte-titulo {
  font-family: var(--font-display);
  font-size: clamp(var(--t-xl), 2.6vw, var(--t-3xl));
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 var(--s-6);
  max-width: 24ch;
}

/* ── Dark mode ────────────────────────────────────────────────────────── */

:root[data-theme="dark"] .dv-placa {
  background: #0A1F14;
  border: 1px solid rgba(82, 183, 136, 0.18);
}

:root[data-theme="dark"] .dvi-entrada:hover .dvi-entrada-titulo,
:root[data-theme="dark"] .dv-indice a:hover,
:root[data-theme="dark"] .dv-indice a[aria-current="true"],
:root[data-theme="dark"] .dv-prose p > strong:first-child,
:root[data-theme="dark"] .dv-prose a,
:root[data-theme="dark"] .dv-fim-link:hover .dv-fim-titulo,
:root[data-theme="dark"] .dv-voltar:hover {
  color: var(--c-accent);
}

/* The mark and supporter graphics were drawn for white paper. Keep their
   ground white in dark mode rather than letting them float on the page. */
:root[data-theme="dark"] .dv-marca-figuras img,
:root[data-theme="dark"] .pc-apoios { background: #FFFFFF; }