/* ============================================================
   CLUB STRIP — shared component used on:
   /, /courses, /courses/goalkeeper-coaching, /courses/scouting, /faculty

   Two layouts:
     .club-strip.is-marquee — auto-scrolling, all clubs, ambient
     .club-strip.is-grid    — static grid, filtered, bigger badges

   Each club is a <li class="club-badge"> with inline CSS vars:
     --club-bg : background colour
     --club-fg : abbreviation colour

   Inside the badge:
     - <img class="club-crest">  ← real crest if /public/images/clubs/{slug}.{svg,png} exists
     - <span class="club-abbr">  ← 2-4 letter abbreviation (shown when crest missing)
     - <span class="club-name">  ← full name
     - <span class="club-league">← optional league/country line

   When the crest <img> 404s, the inline onerror="this.style.display='none'"
   hides it and the abbreviation behind it becomes visible.
============================================================ */

/* ── Section shell (matches the dark/light hybrid theme) ── */
.club-strip-section {
  padding: 4.5rem 5vw;
  background: var(--bg-white, #fafaf7);
  border-top: 1px solid var(--line-light, rgba(0,0,0,0.06));
  border-bottom: 1px solid var(--line-light, rgba(0,0,0,0.06));
}
.club-strip-section.is-dark {
  background: #0B0A0F;
  border-color: rgba(255,255,255,0.06);
}
.club-strip-inner {
  max-width: 1200px; margin: 0 auto;
}
.club-strip-eyebrow {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.78rem; letter-spacing: 3px; text-transform: uppercase;
  color: #ED1C24; margin-bottom: 0.75rem;
  display: inline-flex; align-items: center; gap: 10px;
}
.club-strip-eyebrow::before {
  content: ''; width: 24px; height: 2px; background: #ED1C24;
}
.club-strip-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  line-height: 1.1; letter-spacing: 1px; text-transform: uppercase;
  color: var(--ink, #0B0A0F);
  margin-bottom: 0.6rem;
}
.club-strip-section.is-dark .club-strip-title { color: #f8f8f8; }
.club-strip-title span { color: #ED1C24; }
.club-strip-sub {
  font-size: 0.95rem; line-height: 1.6;
  color: var(--ink-muted, rgba(0,0,0,0.55));
  max-width: 640px; margin-bottom: 2rem;
}
.club-strip-section.is-dark .club-strip-sub { color: rgba(255,255,255,0.65); }

/* ── Shared badge ── */
.club-strip ul { list-style: none; padding: 0; margin: 0; }
.club-badge {
  display: flex; flex-direction: column;
  align-items: center; text-align: center; gap: 8px;
}
.club-shield {
  position: relative; overflow: hidden;
  /* Default: white background, so single-colour crests (e.g. Nottingham
     Forest's red tree) show clearly. JS toggles .has-crest when the
     image loads; .no-crest swaps in the brand colour for the
     abbreviation badge. */
  background: #ffffff;
  color: var(--club-fg, #ffffff);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,0.12), inset 0 0 0 2px rgba(0,0,0,0.04);
  border-radius: 10px;
}
.club-shield.no-crest {
  background: var(--club-bg, #1a1920);
  box-shadow: 0 4px 14px rgba(0,0,0,0.12), inset 0 0 0 2px rgba(255,255,255,0.06);
}
.club-shield img.club-crest {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 14%;
  /* No background — the white .club-shield shows through transparent
     SVGs; coloured SVG backgrounds dominate where the artist
     intended. */
}
/* Hide the abbreviation when a crest has loaded — the crest sits on
   top of it but a same-coloured crest could otherwise let the abbr
   bleed through. */
.club-shield.has-crest .club-abbr { display: none; }
.club-shield .club-abbr {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 1px;
  /* Smaller text for longer abbreviations */
  font-size: clamp(0.95rem, 4cqi, 1.6rem);
  color: var(--club-fg, #ffffff);
  container-type: inline-size;
}
.club-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.85rem; letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--ink, #0B0A0F);
  line-height: 1.15;
}
.club-strip-section.is-dark .club-name { color: #f8f8f8; }
.club-league {
  font-size: 0.72rem; color: var(--ink-muted, rgba(0,0,0,0.55));
  line-height: 1.3;
}
.club-strip-section.is-dark .club-league { color: rgba(255,255,255,0.45); }

/* ── Layout: marquee (auto-scrolling) ── */
.club-strip.is-marquee {
  /* Fade-out at edges so scroll looks natural */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  overflow: hidden;
}
.club-strip.is-marquee ul.club-track {
  display: flex; align-items: center;
  gap: 2.5rem; padding: 0.5rem 0;
  width: max-content;
  animation: club-scroll 60s linear infinite;
}
.club-strip.is-marquee:hover ul.club-track { animation-play-state: paused; }
.club-strip.is-marquee .club-badge { width: 110px; }
.club-strip.is-marquee .club-shield {
  width: 84px; height: 84px;
}
@keyframes club-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .club-strip.is-marquee ul.club-track {
    animation: none;
    flex-wrap: wrap; justify-content: center; width: 100%;
  }
}

/* ── Layout: grid (per-course, bigger) ── */
/* Fixed 4-up grid with larger crests; collapses to 3 then 2 columns. */
.club-strip.is-grid ul.club-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem 1.5rem;
  max-width: 960px;
  margin: 0 auto;
}
@media (max-width: 900px) { .club-strip.is-grid ul.club-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .club-strip.is-grid ul.club-grid { grid-template-columns: repeat(2, 1fr); } }
.club-strip.is-grid .club-shield {
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 200px;
  margin: 0 auto;
}
.club-strip.is-grid .club-shield .club-abbr {
  font-size: clamp(1.2rem, 7cqi, 2rem);
}