/* =====================================================================
   BEYOND THE GAME — athlete directory (page-templates/template-beyond-the-game.php).
   Editorial, minimal, image-led: burgundy accent, white background, Guardian-style serif
   headlines — reuses the theme's existing brand variables (base.css :root) rather than
   redefining the palette, so this page always stays in sync with the rest of the site.
   ===================================================================== */

.btg-sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

/* ---- Hero / intro ---- */
.btg-hero{padding-block:clamp(56px,9vw,104px) clamp(32px,5vw,56px);background:var(--bg)}
.btg-hero-in{max-width:860px}
.btg-kicker{display:inline-block;font:700 .82rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--dark)}
.btg-h1{margin:16px 0 0;font:700 clamp(2.6rem,1.8rem + 3vw,4.6rem)/1.02 var(--serif);letter-spacing:-.015em;color:var(--fg)}
.btg-tagline{margin:14px 0 0;font:400 italic clamp(1.15rem,1rem + .5vw,1.5rem)/1.3 var(--serif);color:var(--fg2)}
.btg-rule{width:64px;height:3px;background:var(--dark);margin:28px 0 24px;border-radius:1px}
.btg-intro{margin:0;max-width:60ch;font:400 1.1rem/1.6 var(--sans);color:var(--fg2)}

/* ---- Controls: search + filters ---- */
.btg-directory{padding-block:0 clamp(48px,7vw,88px);background:var(--bg)}
.btg-controls{display:flex;flex-direction:column;gap:18px;padding-block:clamp(20px,3vw,32px);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);margin-bottom:28px}
.btg-search input[type="search"]{width:100%;padding:14px 18px;border:1px solid var(--rule);border-radius:6px;background:var(--bg);color:var(--fg);font:400 1.05rem/1.3 var(--sans)}
.btg-search input[type="search"]:focus{outline:2px solid var(--dark);outline-offset:1px;border-color:var(--dark)}
.btg-filters{display:flex;flex-wrap:wrap;align-items:end;gap:16px}
.btg-field{display:flex;flex-direction:column;gap:6px;min-width:160px}
.btg-field label{font:600 .78rem/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--fg2)}
.btg-field select{padding:10px 14px;border:1px solid var(--rule);border-radius:6px;background:var(--bg);color:var(--fg);font:400 .95rem/1.2 var(--sans)}
.btg-field select:focus{outline:2px solid var(--dark);outline-offset:1px}
.btg-apply{align-self:end;padding:11px 24px;border:0;border-radius:6px;background:var(--dark);color:#fff;font:700 .92rem/1 var(--sans);letter-spacing:.02em;cursor:pointer;transition:background .15s ease}
.btg-apply:hover{background:#611d2e}
.btg-clear{align-self:end;padding:11px 4px;font:600 .92rem/1 var(--sans);color:var(--fg2);text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:3px;white-space:nowrap}
.btg-clear:hover{color:var(--dark);text-decoration-color:var(--dark)}

.btg-count{margin:0 0 20px;font:600 .85rem/1 var(--sans);letter-spacing:.04em;text-transform:uppercase;color:var(--fg2)}

/* ---- Grid of athlete cards: image-led, name + sport + country only ---- */
.btg-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(14px,1.8vw,24px)}
.btg-card{position:relative}
.btg-card-link{display:block;color:inherit;text-decoration:none}
.btg-card-media{position:relative;aspect-ratio:3/4;overflow:hidden;border-radius:6px;background:var(--bg2)}
.btg-card-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.btg-card-link:hover .btg-card-media img{transform:scale(1.045)}
.btg-card-link:focus-visible .btg-card-media{outline:2px solid var(--dark);outline-offset:2px}
.btg-card-body{padding-top:14px}
.btg-card-name{margin:0;font:700 1.08rem/1.25 var(--serif);color:var(--fg);letter-spacing:-.005em}
.btg-card-link:hover .btg-card-name{color:var(--dark)}
.btg-card-meta{margin:6px 0 0;font:400 .85rem/1.3 var(--sans);color:var(--fg2)}
.btg-card-sep{margin:0 2px;opacity:.6}

/* ---- Empty state ---- */
.btg-empty{padding-block:clamp(48px,8vw,96px);text-align:center}
.btg-empty p{margin:0 0 16px;font:400 1.1rem/1.4 var(--sans);color:var(--fg2)}

/* ---- Show more ---- */
.btg-showmore{display:flex;justify-content:center;margin-top:clamp(32px,5vw,48px)}
.btg-showmore-btn{display:inline-flex;align-items:center;gap:8px;padding:14px 32px;border:1px solid var(--dark);border-radius:6px;background:transparent;color:var(--dark);font:700 .92rem/1 var(--sans);letter-spacing:.02em;text-decoration:none;transition:background .15s ease,color .15s ease}
.btg-showmore-btn:hover{background:var(--dark);color:#fff}

/* ---- Pagination ---- */
.btg-pagination{display:flex;justify-content:center;gap:6px;margin-top:clamp(20px,3vw,32px);flex-wrap:wrap}
.btg-pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:0 10px;border:1px solid var(--rule);border-radius:6px;font:600 .9rem/1 var(--sans);color:var(--fg);text-decoration:none}
.btg-pagination .page-numbers:hover{border-color:var(--dark);color:var(--dark)}
.btg-pagination .page-numbers.current{background:var(--dark);border-color:var(--dark);color:#fff}
.btg-pagination .page-numbers.dots{border:0}

/* ---- Tablet ---- */
@media (max-width:1180px){
  .btg-grid{grid-template-columns:repeat(3,1fr)}
}
/* ---- Mobile ---- */
@media (max-width:720px){
  .btg-grid{grid-template-columns:repeat(2,1fr);gap:14px}
  .btg-card-name{font-size:.98rem}
  .btg-card-meta{font-size:.78rem}
  .btg-field{min-width:0;flex:1 1 140px}
  .btg-apply,.btg-clear{flex:0 0 auto}
}