/*
 * roll-of-honour.css — the winners list.  v1 (30 Jul 2026)
 *
 * Sits on the shared page chrome (stripes + .pagetitle + blurred-logo background), so this file
 * only styles the list itself. Colours come from the site variables — never a hardcoded hex.
 */

.roll-count{
  font-family:var(--body);font-size:15px;color:#9fb3a8;
  text-align:center;margin:0 0 18px;
}

/* ── decade jump strip ───────────────────────────────────────────────────────────────────────
   Plain anchors, deliberately: the page is 93 years long and this has to work with no JS. Styled
   as the results decade rail is - small, green-outlined, wrapping freely on a phone. */
.roll-dec{
  display:flex;flex-wrap:wrap;justify-content:center;gap:7px;
  margin:0 auto 30px;max-width:760px;
}
.roll-dec a{
  font-family:var(--body);font-weight:700;font-size:12.5px;letter-spacing:.4px;
  text-decoration:none;color:var(--cream);
  padding:6px 11px;border-radius:999px;
  background:rgba(0,0,0,.34);border:1px solid rgba(40,152,81,.34);
  transition:background .2s ease,border-color .2s ease,transform .2s ease;
}
.roll-dec a:hover{background:rgba(40,152,81,.20);border-color:var(--leaf);transform:translateY(-2px)}

/* ── a year ─────────────────────────────────────────────────────────────────────────────────── */
.roll-year, .roll-gap{ max-width:860px;margin:0 auto 26px; }
.roll-yr{
  font-family:var(--inline);text-transform:uppercase;
  font-size:clamp(26px,4.2vw,40px);line-height:1;letter-spacing:1px;
  color:var(--leaf);
  margin:0 0 12px;padding-bottom:8px;
  border-bottom:1px solid rgba(40,152,81,.30);
  scroll-margin-top:24px;
}

.roll-rows{ display:flex;flex-direction:column;gap:8px; }

/* One winner. A grid, not a table: the rows carry five different kinds of thing and a table
   would fight every breakpoint (the same lesson the shop orders console learned the hard way). */
.roll-row{
  display:grid;
  grid-template-columns:minmax(112px,168px) minmax(0,1fr) minmax(0,1fr) auto auto;
  align-items:center;gap:10px 14px;
  padding:11px 14px;border-radius:13px;
  background:rgba(0,0,0,.34);
  border:1px solid rgba(40,152,81,.22);
}

.roll-cls{
  font-family:var(--body);font-weight:700;font-size:11.5px;letter-spacing:.5px;
  text-transform:uppercase;color:#9fb3a8;
}
.roll-name{
  font-family:var(--data);font-weight:700;font-size:17px;letter-spacing:.3px;
  color:var(--cream);text-decoration:none;
  border-bottom:1px solid transparent;
}
.roll-name:hover{ color:var(--orange);border-bottom-color:var(--orange); }
.roll-mach{ font-family:var(--body);font-size:13.5px;color:#9fb3a8;min-width:0; }
.roll-fig{ display:flex;flex-direction:column;gap:2px;text-align:right;white-space:nowrap; }
.roll-fig b{ font-family:var(--body);font-weight:700;font-size:13.5px;color:var(--cream); }
.roll-fig i{ font-style:normal;font-family:var(--body);font-size:12px;color:#9fb3a8; }

.roll-pdf{
  font-family:var(--body);font-weight:700;font-size:11.5px;letter-spacing:.4px;
  text-transform:uppercase;text-decoration:none;white-space:nowrap;
  color:var(--cream);
  padding:6px 11px;border-radius:999px;
  border:1px solid rgba(40,152,81,.34);background:rgba(0,0,0,.28);
}
.roll-pdf:hover{ border-color:var(--orange);color:var(--orange); }

/* ── a gap year ─────────────────────────────────────────────────────────────────────────────── */
.roll-yr-gap{ color:#7d8f85;border-bottom-color:rgba(228,228,216,.14); }
.roll-gap p{
  font-family:var(--body);font-size:14.5px;color:#9fb3a8;margin:0;
  padding:10px 14px;border-radius:13px;
  background:rgba(0,0,0,.20);border:1px dashed rgba(228,228,216,.16);
}

/* ── footnotes ──────────────────────────────────────────────────────────────────────────────── */
.roll-notes{ max-width:860px;margin:38px auto 0;padding-top:20px;border-top:1px solid var(--line); }
.roll-notes h2{
  font-family:var(--inline);text-transform:uppercase;font-size:18px;letter-spacing:.8px;
  color:var(--cream);margin:0 0 10px;
}
.roll-notes ul{ margin:0;padding-left:20px; }
.roll-notes li{ font-family:var(--body);font-size:14px;line-height:1.55;color:#9fb3a8;margin:0 0 8px; }
.roll-empty{ font-family:var(--body);font-size:15px;color:#9fb3a8;text-align:center;max-width:520px;margin:0 auto; }

/* ── light theme (staff consoles render on desert-sand) ─────────────────────────────────────── */
[data-theme="light"] .roll-row{ background:rgba(17,40,27,.04);border-color:rgba(17,40,27,.14); }
[data-theme="light"] .roll-name{ color:var(--forest); }
[data-theme="light"] .roll-cls,
[data-theme="light"] .roll-mach,
[data-theme="light"] .roll-fig i,
[data-theme="light"] .roll-notes li,
[data-theme="light"] .roll-count{ color:#4a5d52; }
[data-theme="light"] .roll-fig b{ color:var(--forest); }

/* ── tablet ─────────────────────────────────────────────────────────────────────────────────── */
@media(max-width:820px){
  .roll-row{ grid-template-columns:minmax(96px,140px) minmax(0,1fr) auto; }
  /* machine drops onto its own line under the name rather than squeezing three text columns */
  .roll-mach{ grid-column:2/-1;grid-row:2; }
  .roll-fig{ grid-column:3;grid-row:1;text-align:right; }
  .roll-pdf{ grid-column:3;grid-row:2;justify-self:end; }
}

/* ── phone ──────────────────────────────────────────────────────────────────────────────────
   Everything stacks. Measured, not assumed: with the five-column grid the figures column pushed
   the row past 375px, so below 560 the row becomes two columns and the name spans. */
@media(max-width:560px){
  .roll-row{
    grid-template-columns:1fr auto;
    gap:6px 10px;padding:10px 12px;
  }
  .roll-cls{ grid-column:1/-1;grid-row:1; }
  .roll-name{ grid-column:1;grid-row:2;font-size:16px; }
  .roll-fig{ grid-column:2;grid-row:2; }
  .roll-mach{ grid-column:1/-1;grid-row:3; }
  .roll-pdf{ grid-column:1/-1;grid-row:4;justify-self:start;margin-top:2px; }
  .roll-dec{ gap:5px;margin-bottom:22px; }
  .roll-dec a{ font-size:11.5px;padding:5px 9px; }
}

/* ══ v2 (30 Jul 2026, owner feedback) ═════════════════════════════════════════════════════════
   "It's congested up there" — the standfirst, the count and the decade rails were stacked too
   tightly under the title; and the count line gains a trophy.
   The gold is declared as a variable here rather than written inline. It is deliberately NOT the
   brand orange: the owner asked for gold. One line to switch it to var(--orange) if preferred. */
:root{ --roll-gold:#C9A227; }

/* breathing room under the page subtitle */
body.pg-roll .lead{ margin-bottom:clamp(20px,3.4vw,34px); }

.roll-count{
  display:flex;align-items:center;justify-content:center;gap:9px;
  margin:0 0 20px;
}
.roll-cup{ flex:none;display:flex;color:var(--roll-gold);
  filter:drop-shadow(0 1px 4px rgba(0,0,0,.5)); }
.roll-cup svg{ display:block; }

/* the 20xx decades sit on their own row (emitted as a second nav) */
.roll-dec{ margin:0 auto 8px; }
.roll-dec-2{ margin-bottom:34px; }

@media(max-width:560px){
  .roll-count{ gap:7px;margin-bottom:16px; }
  .roll-cup svg{ width:17px;height:17px; }
  .roll-dec-2{ margin-bottom:26px; }
}

[data-theme="light"] .roll-cup{ color:#9A7B1B; }