/* ══════════════════════════════════════════════════════════════════
   CHRIS HANI CHESS - 2026 REBRAND
   Loaded AFTER styles.css and overrides it. The original stylesheet is
   untouched, so reverting is one line: delete the <link> to this file
   from each page (or run tools/rebrand.js --off).
   ══════════════════════════════════════════════════════════════════ */
:root{
  --brand:#1A7A3C;
  --brand-dark:#0F4D26;
  --accent:#E8191A;
  --green-tint:#EDF5EF;

  --ink:#11181C;
  --text:#3D474E;
  --muted:#6B767E;
  --line:#E3E6E4;
  --line-soft:#EEF0EE;
  --surface:#FFFFFF;
  --surface-soft:#F7F8F7;
  --surface-tint:#EDF5EF;

  /* 7-step type scale */
  --t-label:.78rem;
  --t-sm:.875rem;
  --t-base:1rem;
  --t-lead:1.125rem;
  --t-h3:1.375rem;
  --t-h2:2.25rem;
  --t-display:3.5rem;

  --e1:0 1px 2px rgba(17,24,28,.05);
  --e2:0 4px 14px rgba(17,24,28,.07);
  --e3:0 16px 40px rgba(17,24,28,.10);
  --shadow:var(--e1);
  --radius:10px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

html{scroll-behavior:smooth}
body{background:var(--surface-soft);color:var(--text);line-height:1.65;-webkit-font-smoothing:antialiased}

/* ── Typography ──────────────────────────────────────────── */
.main h1,.main h2,.main h3,.main h4{color:var(--ink);letter-spacing:-.02em;line-height:1.15}
.main h1{font-size:2.75rem;font-weight:800;letter-spacing:-.035em;text-align:left;margin-bottom:0;position:relative;padding-bottom:14px}
.main h1::after{content:"";position:absolute;left:0;bottom:0;width:54px;height:3px;background:var(--accent);border-radius:2px;transform:none}
.main h2{font-size:var(--t-h2);font-weight:800;letter-spacing:-.025em;text-align:left;position:relative;padding-bottom:12px}
/* transform:none is load-bearing. styles.css centres every h1::after/h2::after
   with left:50% + translateX(-50%); overriding `left` alone leaves the
   translate in place and drags the rule half its width off to the left. */
.main h2::after{content:"";position:absolute;left:0;bottom:0;width:44px;height:3px;background:var(--accent);border-radius:2px;transform:none}
/* The old grey full-width rule under section headings doubled up with the red
   accent bar. The accent alone carries it, as in the mockup. */
.main .content-section h2{border-bottom:0;padding-bottom:12px}
.main h3{font-size:var(--t-h3);font-weight:700}
.post-meta{font-size:var(--t-label);color:var(--accent);text-transform:uppercase;letter-spacing:.06em;font-weight:700}

/* ── Header ──────────────────────────────────────────────── */
.header{background:rgba(255,255,255,.94);backdrop-filter:saturate(1.6) blur(10px);
  border-bottom:1px solid var(--line);box-shadow:none;position:sticky;top:0;z-index:60;
  transition:box-shadow .25s var(--ease)}
.header-content{min-height:76px;transition:min-height .25s var(--ease)}
.logo-img{height:46px;width:46px;object-fit:contain;background:none;border-radius:0;
  transition:width .25s var(--ease),height .25s var(--ease)}
/* Condenses once the page is scrolled, as in the mockup. main.js adds .scrolled. */
.header.scrolled{box-shadow:var(--e2)}
.header.scrolled .header-content{min-height:62px}
.header.scrolled .logo-img{height:38px;width:38px}
.logo-text h1{font-size:1.0625rem;font-weight:900;line-height:1.1;letter-spacing:-.015em;
  display:block;column-gap:0}
.logo-text h1 .brand-name{color:var(--brand);font-weight:900}
.logo-text h1 .brand-sub{color:var(--accent);font-weight:900}
.logo-text h1 .brand-sub2{display:block;font-size:.82rem;font-weight:900;color:var(--ink);
  letter-spacing:.09em;text-transform:uppercase;margin-top:2px}

/* ── Nav ─────────────────────────────────────────────────── */
/* main.js moves .nav into .header-content, so the nav shares the header row
   with the wordmark as in the mockup instead of sitting in a second bar. */
.header-content{gap:24px}
.header-content .nav{position:static;top:auto;background:none;border:0;box-shadow:none;
  z-index:auto;flex:1;display:flex;justify-content:flex-end;min-width:0}
.header-content .nav>.container{max-width:none;width:auto;margin:0;padding:0}
.header-content .nav-list{min-height:0;gap:2px;justify-content:flex-end;flex-wrap:wrap}
.nav{background:var(--surface);border-bottom:1px solid var(--line);top:76px}
.nav-list{gap:2px}
.nav-list>li>a{font-size:var(--t-sm);font-weight:600;color:var(--text);padding:11px 13px;
  border-radius:6px;position:relative;transition:color .16s var(--ease),background .16s var(--ease)}
.nav-list>li>a:hover{color:var(--ink);background:var(--surface-soft)}
.nav-list>li>a.active{color:var(--brand);background:transparent}
.nav-list>li>a.active::after{content:"";position:absolute;left:13px;right:13px;bottom:4px;
  height:2px;background:var(--accent);border-radius:2px}

/* ── Cards & panels ──────────────────────────────────────── */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--e1);padding:22px;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s var(--ease)}
.card-grid>.card:hover,.news-preview-card:hover,.gallery-preview-card:hover,.gallery-album-card:hover{
  transform:translateY(-4px);box-shadow:var(--e3);border-color:#D5DAD7}
.content-section{margin-bottom:44px}
.news-preview-card,.gallery-preview-card,.gallery-album-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--e1);
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s var(--ease)}
.news-preview-card h3,.gallery-preview-card h3,.gallery-album-card h3{font-size:1.0625rem;line-height:1.35}
.gallery-preview-card img,.gallery-album-card img{transition:transform .5s var(--ease)}
.gallery-preview-card:hover img,.gallery-album-card:hover img{transform:scale(1.04)}
.read-more{color:var(--brand);font-weight:700}

/* ── Buttons ─────────────────────────────────────────────── */
.button{border-radius:6px;font-size:var(--t-sm);font-weight:700;padding:12px 20px;
  box-shadow:var(--e1);border:1px solid transparent;
  transition:background .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease),border-color .18s var(--ease)}
.button:hover{transform:translateY(-1px);box-shadow:var(--e2)}
.button-muted{background:transparent;color:var(--ink);border-color:var(--line);box-shadow:none}
.button-muted:hover{border-color:var(--ink);background:transparent}

/* ── Hero / next event ───────────────────────────────────── */
.next-event-banner{background:var(--brand-dark);border-radius:var(--radius);box-shadow:var(--e2)}
.next-event-banner .button{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.next-event-banner .button:hover{background:rgba(255,255,255,.12);border-color:#fff}

/* ── Tables ──────────────────────────────────────────────── */
/* The ratings table carries class="table" as well as its id, so these stay on
   classes only — an id here would outrank every cell utility below. */
.table,.ps-table{border-collapse:collapse;font-size:var(--t-sm)}
.table thead th,.ps-table th{
  background:var(--surface);color:var(--muted);text-transform:uppercase;letter-spacing:.08em;
  font-size:var(--t-label);font-weight:700;border-bottom:2px solid var(--line);padding:13px 16px;text-align:left}
.table tbody td,.ps-table td{
  padding:13px 16px;border-bottom:1px solid var(--line-soft);color:var(--text)}
.table tbody tr:hover,.ps-table tbody tr:hover{background:var(--surface-soft)}
.player-name-link{font-weight:700;color:var(--ink)}
.player-name-link:hover{color:var(--brand)}

/* ── Footer (green) ──────────────────────────────────────── */
.footer{background:var(--brand-dark);color:rgba(255,255,255,.72);border-top:0}
.footer h3,.footer h4{color:#fff;font-size:var(--t-label);text-transform:uppercase;letter-spacing:.1em;font-weight:700}
.footer h3::after,.footer h4::after{content:"";display:block;width:26px;height:2px;background:var(--accent);margin-top:8px;border-radius:2px}
.footer a{color:rgba(255,255,255,.72);font-size:var(--t-sm)}
.footer a:hover{color:#fff}
.footer .logo-text h1 .brand-name,
.footer .logo-text h1 .brand-sub,
.footer .logo-text h1 .brand-sub2{color:#fff}
.footer .logo-img{filter:brightness(0) invert(1)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.16);color:rgba(255,255,255,.6)}

/* ── Forms ───────────────────────────────────────────────── */
input,select,textarea{border-radius:6px;border:1px solid var(--line);font-size:var(--t-sm);padding:11px 13px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(26,122,60,.12)}
label{font-size:var(--t-sm);font-weight:700;color:var(--ink)}

/* ── Homepage hero (2026) ────────────────────────────────── */
.hero-2026{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;
  padding:56px 0 52px;position:relative}
.hero-2026 .hero-copy h1{font-size:var(--t-display);font-weight:800;letter-spacing:-.035em;
  line-height:1.08;margin:0 0 18px;padding-bottom:0;max-width:13ch}
.hero-2026 .hero-copy h1::after{display:none}
.hero-lead{font-size:var(--t-lead);color:var(--text);max-width:48ch;margin-bottom:16px}
.hero-quote{font-size:var(--t-sm);color:var(--muted);font-style:italic;
  border-left:3px solid var(--accent);padding-left:14px;margin-bottom:24px;max-width:44ch}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.hero-media{position:relative}
.hero-media img{width:100%;border-radius:var(--radius);box-shadow:var(--e3);position:relative;z-index:1}
.hero-media::after{content:"";position:absolute;inset:18px -18px -18px 18px;
  border:1px solid var(--brand);border-radius:var(--radius);opacity:.35;z-index:0}

.stats-strip{display:grid;grid-template-columns:repeat(3,1fr);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--e1);margin-bottom:44px}
.stats-strip .stat{padding:24px 20px;text-align:center;border-left:1px solid var(--line)}
.stats-strip .stat:first-child{border-left:0}
.stats-strip .stat b{display:block;font-size:2rem;font-weight:800;color:var(--ink);
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.1}
.stats-strip .stat span{font-size:var(--t-label);text-transform:uppercase;letter-spacing:.1em;
  color:var(--muted);font-weight:600}

@media (max-width:900px){
  .hero-2026{grid-template-columns:1fr;gap:32px;padding:36px 0 32px}
  .hero-media::after{display:none}
  .stats-strip{grid-template-columns:1fr}
  .stats-strip .stat{border-left:0;border-top:1px solid var(--line)}
  .stats-strip .stat:first-child{border-top:0}
}

/* ── New homepage blocks ─────────────────────────────────── */
.eyebrow{font-size:var(--t-label);font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brand);margin-bottom:12px}
.eyebrow-red{color:var(--accent)}

.social-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.social{display:flex;align-items:center;gap:16px;padding:22px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--e1);text-decoration:none;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease)}
.social:hover{transform:translateY(-3px);box-shadow:var(--e2)}
.social .sic{width:46px;height:46px;border-radius:10px;display:grid;place-items:center;flex:none;color:#fff}
.social .sic svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.social-yt .sic{background:#C4161C}
.social-fb .sic{background:#1B5FA8}
.social-wa .sic{background:#1A7A3C}
.social b{display:block;color:var(--ink);font-weight:700}
.social span.s2{font-size:var(--t-sm);color:var(--muted)}

.top-col{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--e1);overflow:hidden}
.top-col h3{font-size:1rem;padding:16px 20px;margin:0;border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;text-align:left}
.top-col h3::after{display:none}
.top-col h3 span{font-size:var(--t-label);font-weight:700;color:var(--accent);letter-spacing:.08em;text-transform:uppercase}
.top-row{display:flex;align-items:center;gap:14px;padding:14px 20px;border-bottom:1px solid var(--line-soft);
  text-decoration:none;transition:background .14s var(--ease)}
.top-row:last-child{border-bottom:0}
.top-row:hover{background:var(--surface-soft)}
.top-pos{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:none;
  font-size:var(--t-label);font-weight:800;background:var(--surface-soft);color:var(--muted);border:1px solid var(--line)}
.top-row:first-of-type .top-pos{background:var(--brand);color:#fff;border-color:var(--brand)}
.top-name{flex:1;min-width:0}
.top-name b{display:block;color:var(--ink);font-size:var(--t-sm);font-weight:700;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top-name span{font-size:var(--t-label);color:var(--muted)}
.top-rating{font-variant-numeric:tabular-nums;font-weight:800;color:var(--ink)}

.cta-green{background:var(--brand);color:#fff;border-radius:var(--radius);padding:52px;
  text-align:center;box-shadow:var(--e3);position:relative;overflow:hidden}
.cta-green::before{content:"";position:absolute;left:-60px;bottom:-60px;width:260px;height:260px;
  background-image:linear-gradient(45deg,#fff 25%,transparent 25%,transparent 75%,#fff 75%),
                   linear-gradient(45deg,#fff 25%,transparent 25%,transparent 75%,#fff 75%);
  background-size:44px 44px;background-position:0 0,22px 22px;opacity:.06;pointer-events:none}
.cta-green h2{color:#fff;text-align:center;position:relative}
.cta-green h2::after{left:50%;transform:translateX(-50%);background:#fff;opacity:.5}
.cta-green p{color:rgba(255,255,255,.88);max-width:52ch;margin:0 auto 26px;position:relative}
.cta-green .button{background:transparent;color:#fff;border-color:rgba(255,255,255,.65);box-shadow:none}
.cta-green .button:hover{background:rgba(255,255,255,.12);border-color:#fff}
.cta-green .btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;position:relative}

.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.contact-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--e1);padding:22px;text-decoration:none;display:block}
.contact-card .k{font-size:var(--t-label);color:var(--accent);text-transform:uppercase;letter-spacing:.06em;font-weight:700}
.contact-card .v{display:flex;gap:10px;align-items:center;margin-top:8px;color:var(--brand);font-weight:700}
.contact-card .v svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.6;flex:none}

/* ══════════════════════════════════════════════════════════════════
   MOCKUP COMPONENT LAYER
   The shared vocabulary from /mockup, mapped onto the live shell
   (styles.css markup + js/main.js header, nav and footer). Every
   ported page draws from here rather than growing its own <style>.
   ══════════════════════════════════════════════════════════════════ */

/* ── Page header band ────────────────────────────────────── */
/* Sits between <nav> and <main>, full-bleed, with its own container. */
.page-head{background:var(--surface);border-bottom:1px solid var(--line);
  padding:56px 0 40px;position:relative;overflow:hidden}
.page-head::before{content:"";position:absolute;right:-70px;top:-70px;width:300px;height:300px;
  background-image:linear-gradient(45deg,var(--ink) 25%,transparent 25%,transparent 75%,var(--ink) 75%),
                   linear-gradient(45deg,var(--ink) 25%,transparent 25%,transparent 75%,var(--ink) 75%);
  background-size:48px 48px;background-position:0 0,24px 24px;opacity:.02;
  transform:rotate(8deg);pointer-events:none}
.page-head .container{position:relative;z-index:1}
.page-head h1{font-size:2.75rem;font-weight:800;letter-spacing:-.035em;line-height:1.15;
  color:var(--ink);text-align:left;margin:0;padding-bottom:14px;position:relative;width:auto}
.page-head h1::after{content:"";position:absolute;left:0;bottom:0;width:54px;height:3px;
  background:var(--accent);border-radius:2px;transform:none}
.page-head .lead{font-size:var(--t-lead);line-height:1.6;color:var(--muted);margin:18px 0 0;max-width:58ch}
.page-head+.main{padding-top:44px}

/* ── Text utilities ──────────────────────────────────────── */
.lead{font-size:var(--t-lead);line-height:1.6}
.sm{font-size:var(--t-sm)}
.muted{color:var(--muted)}
.strong-ink{color:var(--ink);font-weight:700}

/* ── Panels & grids ──────────────────────────────────────── */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px;box-shadow:var(--e1)}
.panel-flush{padding:0;overflow:hidden}
.panel-flush .panel-head{padding:22px 26px 0}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
/* Wraps rather than overflowing — the trailing link would otherwise push past
   the viewport on very narrow screens. */
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  margin-bottom:30px;flex-wrap:wrap}
.sec-head h3{margin:0}
.sec-head p{margin:8px 0 0;max-width:52ch}
.card-meta{font-size:var(--t-label);color:var(--accent);letter-spacing:.06em;
  text-transform:uppercase;font-weight:700}
.card-meta-muted{color:var(--muted)}

/* ── Badges ──────────────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;font-size:var(--t-label);font-weight:700;
  padding:3px 10px;border-radius:99px;border:1px solid transparent;letter-spacing:.02em;
  white-space:nowrap}
.badge-green{background:var(--green-tint);color:var(--brand-dark);border-color:rgba(26,122,60,.22)}
.badge-grey{background:var(--surface-soft);color:var(--muted);border-color:var(--line)}
.badge-gold{background:#FAF3E3;color:#8A6A17;border-color:#EADFC2}
.badge-red{background:#FDECEC;color:#B3121A;border-color:#F6D3D4}
.badge-blue{background:#EAF1F9;color:#1E5AA0;border-color:#D2E0F0}

/* ── Chips ───────────────────────────────────────────────── */
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{font-size:var(--t-sm);font-weight:600;padding:7px 15px;border-radius:99px;
  border:1px solid var(--line);background:var(--surface);color:var(--text);
  font-family:inherit;text-decoration:none;cursor:pointer;margin-top:0;
  transition:background .16s var(--ease),border-color .16s var(--ease),color .16s var(--ease)}
.chip:hover{border-color:var(--brand);color:var(--brand)}
/* --chip lets a chip carry its own series colour (the rating-history legend).
   `.active` is an alias: the calendar app marks its view buttons that way. */
.chip.on,.chip.active{background:var(--chip,var(--brand));border-color:var(--chip,var(--brand));color:#fff}

/* ── Toolbar / filter fields ─────────────────────────────── */
.toolbar{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;margin-bottom:22px}
.toolbar .field{margin:0}
.field{margin-bottom:18px}
.field label{display:block;margin-bottom:7px}
.field input,.field select,.field textarea{width:100%;background:var(--surface);color:var(--ink);
  font:inherit;font-size:var(--t-sm);padding:11px 13px;border:1px solid var(--line);border-radius:6px}
.field select{font-weight:700;cursor:pointer}
.field .hint{font-size:var(--t-label);color:var(--muted);margin-top:6px}
.search{position:relative;flex:1;min-width:220px}
.search input{padding-left:38px}
.search .icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);
  width:18px;height:18px;color:var(--muted);pointer-events:none;
  stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* ── Links ───────────────────────────────────────────────── */
.back{display:inline-flex;align-items:center;gap:8px;font-size:var(--t-sm);font-weight:600;
  color:var(--muted);text-decoration:none;margin-bottom:20px}
.back:hover{color:var(--brand)}
.back .icon{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.btn-link{display:inline-flex;align-items:center;gap:7px;font-size:var(--t-sm);font-weight:700;
  color:var(--brand);text-decoration:none}
.btn-link .icon{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .18s var(--ease)}
.btn-link:hover .icon{transform:translateX(3px)}

/* ── Card-wrapped tables ─────────────────────────────────── */
.table-wrap{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--e1)}
.table-wrap .table{margin:0;border:0;box-shadow:none}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table tbody tr:last-child td{border-bottom:0}

/* Cell utilities. Written as `.table td.x` so they outrank `.table tbody td`,
   which sets a colour of its own — a bare `.rank` would silently lose. */
.table th.num,.table td.num,.ps-table th.num,.ps-table td.num{
  text-align:right;font-variant-numeric:tabular-nums}
.table td.rank{font-variant-numeric:tabular-nums;color:var(--muted);font-weight:600}
.table td.rank-1{color:var(--accent);font-weight:800}
.table td.muted{color:var(--muted)}
.table td.rating{font-variant-numeric:tabular-nums;font-weight:700;color:var(--ink)}
.pname{font-weight:700;color:var(--ink);text-decoration:none}
.pname:hover{color:var(--brand)}
/* Mirrored federation columns sit on a tinted ground, set off by a rule. */
.table th.ext,.table td.ext{background:var(--surface-soft);color:var(--muted);font-weight:500}
.table thead th.ext{background:var(--surface)}
.table th.ext-first,.table td.ext-first{border-left:1px solid var(--line)}
.table td.ext{font-variant-numeric:tabular-nums}
/* Sortable headers keep their affordance without the old solid-green hover. */
.th-sortable:hover{background:var(--surface-soft);color:var(--ink);opacity:1}

/* ── Green header band ───────────────────────────────────── */
/* The two ranking tables — Ratings and Player Selection — lead with a solid
   green header. Ids/`thead` are needed here to outrank the neutral default. */
#ratingsTable thead th,.ps-table thead th,
/* .ps-table .rank-cell paints the "#" column muted for the body; the header
   copy of it has to be pulled back to white or it goes grey-on-green. */
.ps-table thead th.rank-cell{
  background:var(--brand);color:#fff;border-bottom:2px solid var(--brand-dark)}
/* The mirrored federation columns stay set apart, a shade deeper. */
#ratingsTable thead th.ext{background:var(--brand-dark);color:rgba(255,255,255,.88)}
#ratingsTable thead th.ext-first{border-left-color:rgba(255,255,255,.28)}
#ratingsTable thead th.th-sortable:hover,.ps-table thead th.th-sortable:hover{
  background:var(--brand-dark);color:#fff;opacity:1}
#ratingsTable thead th .sort-arrow{opacity:.8}

/* ── Clickable rows ──────────────────────────────────────── */
/* A row-wide click is a mouse convenience only: every such row still holds a
   real link, so keyboard and screen-reader users reach the profile the usual way. */
.table tbody tr.row-link,.ps-table tbody tr{cursor:pointer}
.table tbody tr.row-link:hover,.ps-table tbody tr:hover{background:var(--green-tint)}
.table-note{font-size:var(--t-sm);color:var(--muted);margin-top:14px;max-width:82ch}
.table td.doc-name{display:flex;gap:10px;align-items:center;color:var(--ink);font-weight:600}
.table td.doc-name .icon{width:18px;height:18px;flex:none;color:var(--muted);
  stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.table-meta{font-size:var(--t-sm);color:var(--muted);margin-bottom:14px}
.table-meta strong{color:var(--ink)}

/* ── Media cards ─────────────────────────────────────────── */
/* Bare .card keeps its own padding — a dozen live pages put content straight
   inside one. .card-media is the mockup shell, where .card-body owns padding. */
.card-media{padding:0;overflow:hidden;display:flex;flex-direction:column}
/* Cards that are themselves links (municipalities, gallery years, officials)
   must not carry the default anchor underline. */
a.card,a.card:hover{text-decoration:none;color:inherit}
a.card h2,a.card h3,a.card h4{text-decoration:none}
.card-hover{transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s var(--ease)}
.card-hover:hover{transform:translateY(-4px);box-shadow:var(--e3);border-color:#D5DAD7}
.card-img{aspect-ratio:16/10;overflow:hidden;background:var(--surface-soft)}
.card-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease)}
.card-hover:hover .card-img img{transform:scale(1.04)}
/* A poster standing in for a cover image. Posters are square or portrait and
   carry their own title, so fit the whole thing inside the frame instead of
   cropping it to 16:10 and cutting the wording off. */
.card-img.is-poster{background:var(--surface-soft)}
.card-img.is-poster img{object-fit:contain}
.card-body{padding:20px;display:flex;flex-direction:column;gap:9px;flex:1}
.card-body h3{font-size:1.0625rem;line-height:1.35;margin:0;padding-bottom:0}
.card-body h3::after{display:none}
.card-body p{font-size:var(--t-sm);margin:0;color:var(--muted)}
.card-body .btn-link{margin-top:auto;padding-top:6px}
/* Featured split card: image beside copy. */
.card-feat{display:grid;grid-template-columns:1.1fr 1fr}
.card-feat .card-img{aspect-ratio:auto;min-height:300px}
.card-feat .card-body{padding:34px;justify-content:center}
.card-feat .card-body h2{font-size:1.875rem;margin:0 0 10px;padding-bottom:0;text-align:left}
.card-feat .card-body h2::after{display:none}

/* ── Club cards ──────────────────────────────────────────── */
.club-head{display:flex;gap:14px;align-items:center;margin-bottom:14px}
.club-head img{width:52px;height:52px;border-radius:8px;object-fit:cover;
  border:1px solid var(--line);flex:none;background:var(--surface)}
/* Stand-in for clubs with no logo on file. */
.club-logo-blank{width:52px;height:52px;border-radius:8px;flex:none;
  background:var(--brand);color:#fff;display:grid;place-items:center;
  font-weight:800;font-size:.9rem;letter-spacing:.02em}
/* The municipality page uses slightly smaller club tiles. */
.club-logo-blank-sm{width:44px;height:44px;font-size:.8rem}
.club-head h3{font-size:1.0625rem;margin:0;padding-bottom:0;text-align:left}
.club-head h3::after{display:none}
.club-rows{display:flex;flex-direction:column;gap:7px;color:var(--muted);font-size:var(--t-sm)}
.club-rows span{display:flex;gap:8px;align-items:center}
.club-rows .icon{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.club-social{display:flex;gap:10px;margin-top:auto;padding-top:14px}
.club-social a{display:grid;place-items:center;width:32px;height:32px;border-radius:8px;
  border:1px solid var(--line);color:var(--muted);
  transition:color .16s var(--ease),border-color .16s var(--ease)}
.club-social a:hover{color:var(--brand);border-color:var(--brand)}
/* These marks are solid-path icons, not the stroked set. */
.club-social svg{width:16px;height:16px;fill:currentColor;stroke:none}

/* ── People cards ────────────────────────────────────────── */
.avatar{width:74px;height:74px;border-radius:50%;background:var(--green-tint);color:var(--brand-dark);
  display:grid;place-items:center;font-weight:700;font-size:1.375rem;margin-bottom:12px;
  flex:none;overflow:hidden}
img.avatar{object-fit:cover;background:var(--surface-soft)}
.person-card{text-decoration:none}
.person-card .card-body{padding:24px;align-items:flex-start;gap:6px}
.person-card h3{font-size:1.0625rem;margin:0;padding-bottom:0;text-align:left}
.person-card h3::after{display:none}
.person-card .tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:2px}
.note-panel{background:var(--green-tint);border-color:rgba(26,122,60,.2)}
.note-panel p{margin:0;font-size:var(--t-sm);color:var(--brand-dark)}

/* ── Album grid ──────────────────────────────────────────── */
/* Photos are anchors (PhotoSwipe binds to them); videos are divs with their
   own modal player, so both shapes are styled together here. */
.album-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.album-grid>a,.album-grid>.gallery-video{position:relative;display:block;border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--e1);aspect-ratio:4/3;background:var(--surface-soft);cursor:pointer}
.album-grid img,.album-grid video{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s var(--ease)}
.album-grid>a:hover img,.album-grid>.gallery-video:hover video{transform:scale(1.05)}
/* pointer-events:none so the click lands on the tile's own handler. */
.album-grid .play-badge{position:absolute;inset:0;display:grid;place-items:center;color:#fff;
  z-index:2;background:rgba(17,24,28,.32);font-size:2rem;pointer-events:none}
@media (max-width:760px){.album-grid{grid-template-columns:1fr 1fr}}

/* ── Event detail ────────────────────────────────────────── */
/* Posters are portrait and vary wildly, so the frame centres rather than crops. */
.ev-poster{background:var(--surface-soft);text-align:center;border-bottom:1px solid var(--line)}
.ev-poster img{margin:0 auto;max-height:560px;width:auto;max-width:100%}
.ev-hero-body{padding:28px 32px}
.ev-hero-body h1{font-size:2.5rem;font-weight:800;letter-spacing:-.03em;line-height:1.15;
  text-align:left;width:auto;margin:0 0 12px;padding-bottom:0}
.ev-hero-body h1::after{display:none}
.fact-label{font-size:var(--t-label);color:var(--accent);text-transform:uppercase;
  letter-spacing:.06em;font-weight:700}
.fact-value{color:var(--ink);font-weight:600;margin-top:4px}
.sec-rows{display:flex;flex-direction:column;gap:8px;font-size:var(--t-sm)}
.sec-row{display:flex;justify-content:space-between;gap:12px}
.sec-row strong{color:var(--ink)}
.prose-block{line-height:1.75;color:var(--text)}
.prose-block p{margin:0 0 14px}
.prose-block :last-child{margin-bottom:0}
@media (max-width:960px){
  .grid-4{grid-template-columns:1fr 1fr}
  .ev-hero-body{padding:22px 20px}
  .ev-hero-body h1{font-size:1.75rem}
}

/* ── Rating calculator ───────────────────────────────────── */
.calc-result{display:flex;flex-direction:column;justify-content:center;text-align:center;
  background:var(--green-tint);border-color:rgba(26,122,60,.2)}
.calc-value{font-size:3.5rem;font-weight:700;color:var(--ink);letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;line-height:1.1}
.calc-delta{color:var(--brand);font-weight:600;font-size:1.125rem}
/* One game of the tournament being estimated. */
.opponent-row{background:var(--surface-soft);border:1px solid var(--line);border-left:3px solid var(--brand);
  border-radius:var(--radius);padding:16px;margin-bottom:12px}
.opponent-row .calculator-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:12px}
.opponent-row label{display:block;margin-bottom:7px}
.opponent-row input,.opponent-row select{width:100%;font:inherit;font-size:var(--t-sm);
  padding:11px 13px;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--ink)}
.kfactor-row{display:flex;gap:12px;align-items:center}
.kfactor-row input[type=range]{flex:1;padding:0}
.kfactor-row input[type=number]{width:72px}

/* ── Contact list ────────────────────────────────────────── */
.contact-list{display:flex;flex-direction:column;gap:16px}
.contact-row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;
  padding-bottom:14px;border-bottom:1px solid var(--line-soft)}
.contact-row:last-child{padding-bottom:0;border-bottom:0}
.contact-row b{color:var(--ink);font-size:var(--t-sm)}

/* ── Highlight band (next event) ─────────────────────────── */
.band{background:var(--brand-dark);color:#fff;border-radius:var(--radius);padding:26px 30px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;box-shadow:var(--e2)}
.band .eyebrow{color:#9FD3B0;margin-bottom:8px}
.band h3{color:#fff;margin:0 0 8px}
.band-meta{display:flex;gap:20px;flex-wrap:wrap;font-size:var(--t-sm);color:#CFE3D6}
.band-meta span{display:flex;align-items:center;gap:7px}
.band-meta .icon,.button .icon{width:18px;height:18px;flex:none;
  stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* ── Button variants ─────────────────────────────────────── */
.button-onlight{background:transparent;color:#fff;border-color:rgba(255,255,255,.65);box-shadow:none}
.button-onlight:hover{background:rgba(255,255,255,.12);border-color:#fff}
.button-sm{padding:8px 14px;font-size:var(--t-label)}
.button-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}

/* ── Calendar ────────────────────────────────────────────── */
/* The month grid is rendered by js/main.js as .calendar-day buttons. Rather
   than change that contract, these rules map the existing markup onto the
   mockup's flat month grid — hence the resets on the old pill-shaped cells. */
.panel-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 20px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.custom-calendar-container{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--e1);overflow:hidden;padding:0}
.calendar-header{padding:16px 20px;border-bottom:1px solid var(--line);margin:0;gap:12px}
.calendar-header h3{font-size:var(--t-base);color:var(--ink);padding:0;margin:0;
  min-width:150px;text-align:center}
.calendar-header h3::after{display:none}
.calendar-grid-header{background:var(--surface-soft);border-bottom:1px solid var(--line);
  gap:0;margin:0;font-size:var(--t-label)}
.calendar-grid-header div{padding:10px;text-align:center;text-transform:uppercase;
  letter-spacing:.08em;color:var(--muted);font-weight:700}
.calendar-days-grid{gap:0}
.calendar-day{min-height:96px;aspect-ratio:auto;border:0;border-right:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);border-radius:0;background:var(--surface);
  padding:8px;display:block;text-align:left;font:inherit;box-shadow:none;margin:0}
.calendar-day:nth-child(7n){border-right:0}
.cal-d{display:block;font-size:var(--t-sm);color:var(--muted);font-variant-numeric:tabular-nums;
  font-weight:600}
.cal-ev{display:block;margin-top:6px;font-size:var(--t-label);font-weight:700;
  color:var(--brand-dark);line-height:1.3;text-align:left}
/* Week and year views are ordinary card content, so they keep inner padding
   that the month grid (which runs edge to edge) does not want. */
.calendar-view .week-calendar-grid,.calendar-view .year-calendar-grid{padding:20px}
.calendar-day.empty{background:var(--surface-soft);border-color:var(--line-soft)}
.calendar-day.has-event{background:var(--green-tint);border-color:var(--line-soft);cursor:pointer}
.calendar-day.has-event .cal-d{color:var(--brand-dark);font-weight:800}
.calendar-day.has-event:hover{background:#DFEDE4}
.calendar-day.today{box-shadow:inset 0 0 0 2px var(--brand)}
.calendar-day.no-event:hover,.calendar-day.no-event:focus-visible{background:var(--surface-soft)}
/* The old dot and count bubble are replaced by the event label itself. */
.calendar-day.has-event::after,.calendar-day.has-multiple-events::before{display:none}

/* ── Prose column (articles) ─────────────────────────────── */
.narrow{max-width:760px;margin:0 auto}

/* ── Motion ──────────────────────────────────────────────── */
.rise{opacity:0;transform:translateY(16px);transition:opacity .55s var(--ease),transform .55s var(--ease)}
.rise.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rise{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  *{transition-duration:.01ms !important;animation-duration:.01ms !important}
}

/* Below the desktop breakpoint the nav drops out of the header as a panel.
   .header is sticky, so it is the containing block the panel anchors to. */
@media (max-width:900px){
  .header-content .nav{flex:none}
  .header-content .nav-list{display:none}
  .header-content .nav.active .nav-list{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;
    position:absolute;left:0;right:0;top:100%;
    background:var(--surface);border-top:1px solid var(--line);
    box-shadow:var(--e2);padding:12px 22px;z-index:60}
  .header-content .nav.active .submenu{position:static;display:block;box-shadow:none;
    border:0;padding:0 0 0 12px;background:none;min-width:0}
}
@media (max-width:620px){
  .header-content .nav.active .nav-list{grid-template-columns:1fr;padding:12px 16px}
}

@media (max-width:960px){
  .main h1{font-size:2rem}
  .page-head{padding:38px 0 30px}
  .page-head h1{font-size:2rem}
  .social-grid,.contact-grid,.grid-2,.grid-3{grid-template-columns:1fr}
  .cta-green{padding:36px 22px}
  .nav{top:0}
  .table thead th,.table tbody td{padding:10px 12px;font-size:var(--t-label)}
  .panel{padding:20px}
  .panel-flush .panel-head{padding:20px 20px 0}
  .cal-cell{min-height:64px}
  .cal-ev{display:none}
  .band{padding:22px}
}

@media (max-width:860px){
  .card-feat{grid-template-columns:1fr}
  .card-feat .card-body{padding:24px}
  .card-feat .card-img{min-height:220px}
}