/* ==========================================================================
   Histórico — o índice do registo
   Not 29 boxes stacked down the page: a ruled ledger. One photograph at the
   top (the walk you could still come to), the 29-year span shown as an index,
   a filter over all of it, then the years as hairline-separated entries.
   ========================================================================== */

.hx {

  /* Fixed so every title starts on the same vertical edge (each row is its own
     grid, so an auto column would leave a ragged left). Sized for "14-07"; the
     one multi-day range on record runs into the gutter beside it without
     colliding with the title. */
  --hx-data-w: 6rem;

  /* Clears the fixed header plus the sticky bar when jumping to a year. The
     script overwrites this with the bar's measured height, which differs
     between one row and two; this value is the no-JS fallback. */
  --hx-ancora: calc(var(--header-h) + 7rem);
}

.hx [hidden] { display: none !important; }

.hx-sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* 1. Abertura ----------------------------------------------------------
   The opening is the shared .abertura--dupla (main.css): text left, the one
   featured walk right. It used to bottom-align the two columns, which made the
   h1 sit wherever the photograph happened to end — a different height on this
   page than on every other. The shared rule tops them both. */

/* The claim the whole page is evidence for, so it carries real weight. */
.hx-contagem {
  font-size: var(--t-lg);
  line-height: 1.7;
  color: var(--c-text);
  max-width: 34ch;
  margin: var(--s-6) 0 0;
}

.hx-num {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.55em;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--c-primary);
}

/* A date never breaks across a line. */
.hx-facto { white-space: nowrap; }

/* The one photograph on the page. A single featured entry, not a card grid —
   no border, no shadow, no chrome: the image is the object. */
.hx-destaque {
  display: grid;
  grid-template-rows: auto auto auto auto;
  gap: 0;
  color: inherit;
  text-decoration: none;
}

.hx-destaque-foto {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 2px;
  margin-bottom: var(--s-4);
  transition: opacity var(--dur) var(--ease);
}

.hx-destaque:hover .hx-destaque-foto { opacity: 0.9; }

.hx-destaque-etiqueta {
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--c-warm);
  margin-bottom: var(--s-2);
}

.hx-destaque-titulo {
  font-family: var(--font-display);
  font-size: var(--t-xl);
  font-weight: 600;
  line-height: 1.25;
  color: var(--c-text);
  margin-bottom: var(--s-2);
  transition: color var(--dur-fast) var(--ease);
}

.hx-destaque:hover .hx-destaque-titulo { color: var(--c-primary); }

.hx-destaque-meta {
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  color: var(--c-text-muted);
}

/* 2. Filtro e salto ---------------------------------------------------- */

/* Both controls live in the sticky bar rather than in a block at the top of
   the page. Jumping to a year is wanted most while already deep in 29
   collapsed panels, which is exactly when anything anchored to the top has
   scrolled out of reach. */
.hx-barra {
  position: sticky;
  top: var(--header-h);
  z-index: 3;
  background: var(--c-bg);
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
}

.hx-barra-inner {
  max-width: var(--measure);
  margin: 0 auto;
  padding: var(--s-3) var(--gutter);
  display: flex;
  align-items: center;
  gap: var(--s-4);
}

.hx-campo {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
}

.hx-campo-lupa {
  position: absolute;
  left: var(--s-3);
  color: var(--c-text-muted);
  pointer-events: none;
}

.hx-campo-input {
  width: 100%;
  min-height: 48px;
  padding: var(--s-2) 2.75rem;
  font-family: var(--font-body);
  font-size: var(--t-base);
  color: var(--c-text);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-full);
  transition: border-color var(--dur-fast) var(--ease);
  -webkit-appearance: none;
  appearance: none;
}

.hx-campo-input::placeholder { color: var(--c-text-muted); opacity: 1; }
.hx-campo-input::-webkit-search-decoration,
.hx-campo-input::-webkit-search-cancel-button { -webkit-appearance: none; }

.hx-campo-input:focus {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-primary) 22%, transparent);
}

.hx-campo-limpar {
  position: absolute;
  right: var(--s-2);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  color: var(--c-text-muted);
  background: none;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}

.hx-campo-limpar:hover {
  color: var(--c-text);
  background: var(--c-surface-2);
}

/* The native select is deliberate: it opens the OS picker, which for a reader
   over 60 on a phone is a more familiar control than a grid of tappable
   numbers, and it brings keyboard and screen-reader support with it. Only the
   chrome is restyled; the behaviour stays the platform's. */
.hx-salto {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

.hx-salto-select {
  min-height: 48px;
  /* main.css gives form controls a bottom margin, which pushed the wrapper to
     71px and knocked this out of line with the button beside it. */
  margin: 0;
  padding: var(--s-2) 2.25rem var(--s-2) var(--s-4);
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  color: var(--c-text-muted);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-full);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.hx-salto-select:hover { border-color: var(--c-border-2); color: var(--c-text); }

.hx-salto-select:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
}

/* Drawn as an element rather than a background image so it inherits the
   colour and follows the theme. */
.hx-salto-seta {
  position: absolute;
  right: var(--s-4);
  color: var(--c-text-muted);
  pointer-events: none;
}

.hx-campo-limpar:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
}

.hx-estado {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 var(--gutter);
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  color: var(--c-text-muted);
}

.hx-estado:not(:empty) { padding-bottom: var(--s-3); }

/* 4. Os anos ----------------------------------------------------------- */

.hx-anos {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(3rem, 7vw, 5rem);
}

/* No boxes. One hairline per year turns a stack of cards into a ledger. */
.hx .hx-ano {
  border: 0;
  border-bottom: 1px solid var(--c-border);
  border-radius: 0;
  margin: 0;
  overflow: visible;
  scroll-margin-top: var(--hx-ancora);
}

.hx .hx-ano-cabeca {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--s-3) clamp(var(--s-4), 3vw, var(--s-8));
  padding: clamp(var(--s-4), 2.5vw, var(--s-6)) 0;
  min-height: 48px;
  background: none;
  border: 0;
  cursor: pointer;
  list-style: none;
  transition: none;
}

/* main.css puts a "+" on every summary::after. Kept in its own rule: pairing
   it with ::-webkit-details-marker would invalidate the whole selector list
   in Firefox and let the "+" back through. */
.hx .hx-ano-cabeca::after { content: none; display: none; }
.hx .hx-ano-cabeca::-webkit-details-marker { display: none; }

.hx .hx-ano[open] > .hx-ano-cabeca { border-bottom: 0; }

/* The year and its status are one label, so they share a grid cell and the
   summary keeps exactly three columns whether or not the tag is there. */
.hx-ano-id {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-3);
}

.hx-ano-numero {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  /* Green rather than body ink, so the year reads as the thing you press. In
     light mode it is a near neighbour of --c-text, which keeps 29 of them from
     shouting; --c-primary-2 then moves further from the background on hover in
     both themes. */
  color: var(--c-primary);
  transition: color var(--dur-fast) var(--ease);
}

.hx .hx-ano-cabeca:hover .hx-ano-numero,
.hx .hx-ano[open] .hx-ano-numero { color: var(--c-primary-2); }

/* What the year actually contains, taken from the record rather than left for
   the reader to count. Set right so the year and its figures bracket the row
   the way an index line does, instead of huddling left over dead space. */
.hx-ano-factos {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--s-1) var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  font-variant-numeric: tabular-nums;
  color: var(--c-text-muted);
  text-align: right;
}

.hx-ano-facto { white-space: nowrap; }

/* The separator trails its own figure rather than leading the next one, so a
   wrap leaves it at the end of a line instead of orphaned at the start. */
.hx-ano-facto:not(:last-child)::after {
  content: "·";
  margin-left: var(--s-3);
  color: var(--c-border-2);
}

.hx-ano-decorre {
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--c-warm);
  white-space: nowrap;
}

/* Plus / minus drawn rather than typed, so it can rotate on open. */
.hx-ano-sinal {
  position: relative;
  width: 20px;
  height: 20px;
  align-self: center;
  justify-self: end;
  flex-shrink: 0;
}

.hx-ano-sinal::before,
.hx-ano-sinal::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 2px;
  margin-top: -1px;
  background: var(--c-primary);
  border-radius: 1px;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

.hx-ano-sinal::after { transform: rotate(90deg); }

.hx .hx-ano[open] .hx-ano-sinal::after { transform: rotate(0deg); opacity: 0; }

.hx .hx-ano-cabeca:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: -2px;
}

/* 5. As linhas --------------------------------------------------------- */

.hx-linhas {
  list-style: none;
  margin: 0;
  padding: 0 0 var(--s-6);
  background: none;
}

/* The rule belongs to the row, so the ledger lines run the full column width
   while the hover fill sits inside them. */
.hx-linha {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--c-border);
}

/* Four real columns: date, name, place, distance. Ragged right edges are what
   made the old list unscannable; true columns give the eye four vertical
   edges to run down instead of one. */
.hx-linha-link {
  display: grid;
  grid-template-columns: var(--hx-data-w) minmax(0, 1fr) minmax(0, 16rem) 4.25rem;
  align-items: baseline;
  gap: var(--s-2) var(--s-5);
  min-height: 48px;
  padding: var(--s-3) var(--s-2);
  border-radius: 2px;
  color: inherit;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease);
}

.hx-linha-link:hover,
.hx-linha-link:focus-visible { background: var(--c-surface-2); }

.hx-linha-link:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: -2px;
}

/* Tabular figures in a fixed column give the eye a straight edge to run down
   28 years of dates. The year lives on the section heading, not on every row. */
.hx-linha-data {
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  font-variant-numeric: tabular-nums;
  color: var(--c-text-muted);
  white-space: nowrap;
}

/* The link is the reason for the page, so it is the strongest thing in the
   row — full text colour, never muted. */
.hx-linha-titulo {
  font-size: var(--t-base);
  font-weight: 600;
  line-height: 1.5;
  color: var(--c-text);
  transition: color var(--dur-fast) var(--ease);
}

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

/* A walk that was put on the calendar and then called off stays in the record,
   because the group really did plan it. What it must not do is read as one that
   happened. The mark spells the state out rather than tinting the row, so it
   survives colour blindness and a printed page, the title keeps its full
   contrast because it is still the link a reader is aiming at, and the distance
   cell is left empty because there are no kilometres to print. */
.hx-linha-marca {
  display: inline-block;
  margin-left: var(--s-2);
  padding: 1px 0.5rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  line-height: 1.7;
  text-transform: uppercase;
  vertical-align: 0.12em;
  white-space: nowrap;
}

/* Amber is the record's exception colour: the year still running, the walk that
   is coming back. Cancelled is the quieter of the two because nothing is
   pending, so it takes muted ink and a broken rule instead. */
.hx-marca-adiada    { color: var(--c-warm); }
.hx-marca-cancelada { color: var(--c-text-muted); border-style: dashed; }

/* Trails the year's figures as an aside, not as one more thing counted. The
   phrase says what it is, so it stays in the same ink as the rest of the line:
   amber is spent on the row's own mark, and spending it twice in one screen
   would cost it the meaning it has here. */
.hx-ano-facto-nota { font-style: italic; }

/* The wrapper exists for the stacked phone layout; on wide screens it steps
   out of the way so place and distance sit in the row's own grid. */
.hx-linha-meta { display: contents; }

.hx-linha-lugar,
.hx-linha-km {
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  color: var(--c-text-muted);
}

.hx-linha-lugar {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hx-linha-km {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
}

/* 6. Sem resultados ---------------------------------------------------- */

.hx-vazio {
  max-width: var(--measure);
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 4rem) var(--gutter) clamp(3rem, 7vw, 5rem);
}

.hx-vazio-texto {
  max-width: 54ch;
  margin: 0 0 var(--s-3);
  font-family: var(--font-display);
  font-size: clamp(var(--t-xl), 2.2vw, var(--t-2xl));
  font-weight: 500;
  line-height: 1.35;
  color: var(--c-text);
}

.hx-vazio-nota {
  max-width: 54ch;
  margin: 0 0 var(--s-6);
  font-size: var(--t-base);
  line-height: 1.8;
  color: var(--c-text-muted);
}

.hx-vazio b { color: var(--c-primary); font-weight: 600; }

.hx-vazio a {
  color: var(--c-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.hx-vazio-limpar {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 var(--s-6);
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--t-base);
  font-weight: 600;
  color: var(--c-primary);
  background: none;
  border: 1px solid var(--c-border-2);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease);
}

.hx-vazio-limpar:hover { border-color: var(--c-primary); }

.hx-vazio-limpar:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
}

/* Motion --------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .hx .hx-ano[open] > .hx-linhas {
    /* An opening year is a reply to a click, not an entrance: --dur, not
       --dur-entra. It shares the entrance curve so the feel matches. */
    animation: hx-abrir var(--dur) var(--ease-out) both;
  }
}

@keyframes hx-abrir {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .hx-ano-sinal::before,
  .hx-ano-sinal::after { transition: none; }
}

/* Responsive ----------------------------------------------------------- */

@media (max-width: 900px) {
  .hx-contagem { max-width: 46ch; }

  /* The title still leads: an activity card above the heading leaves a reader
     arriving from the nav with no idea what page they are on. */
  .hx-destaque-foto { aspect-ratio: 16 / 9; }
}

/* The place column gives ground first: below this the titles start wrapping
   to three lines to keep it. */
@media (max-width: 1080px) {
  .hx-linha-link { grid-template-columns: var(--hx-data-w) minmax(0, 1fr) minmax(0, 10rem) 4.25rem; }
}

@media (max-width: 700px) {
  .hx .hx-ano-cabeca {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    row-gap: var(--s-1);
  }

  .hx-ano-id     { grid-column: 1; }
  .hx-ano-sinal  { grid-column: 2; grid-row: 1 / span 2; }

  /* Right-aligned figures read as a bracket beside a year on a wide row; in a
     narrow stacked block they just look pushed away from their label. */
  .hx-ano-factos {
    grid-column: 1;
    justify-content: flex-start;
    text-align: left;
    font-size: var(--t-sm);
  }

  /* Title first, then the row's facts on one line beneath it. A 7.5rem date
     column would leave titles wrapping to four lines at this width. */
  .hx-linha-link {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--s-1) var(--s-3);
    padding: var(--s-4) var(--s-2);
  }

  .hx-linha-titulo { order: 1; flex: 1 0 100%; }
  .hx-linha-data   { order: 2; }

  .hx-linha-meta {
    order: 3;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--s-1) var(--s-3);
  }

  /* Columns collapse into one facts line, so the separators come back. Each
     cell carries its own, and an empty cell brings nothing with it: a row
     with no place and no distance shows the date alone. */
  .hx-linha-lugar:not(:empty)::before,
  .hx-linha-km:not(:empty)::before {
    content: "·";
    margin-right: var(--s-2);
    color: var(--c-border-2);
  }

  .hx-linha-lugar { max-width: 20ch; }

  /* Filter across the top, the year select on its own row beneath. Left at its
     natural width rather than stretched: a full-width select reads as a text
     field, and its label is only three words long. */
  .hx-barra-inner { flex-wrap: wrap; gap: var(--s-2); }
  .hx-campo { flex: 1 0 100%; }
  .hx-salto { flex: 0 0 auto; }
}