/* ===========================
   Sunderland Leon FC — Site Styles
   Argentina-inspired sky blue & white. Colors are CSS variables —
   change these two lines to rebrand instantly.
=========================== */
:root {
  --club-primary: #6cace4;
  --club-primary-dark: #2f5f8a;
  --club-navy: #0b1a2c;
  --club-navy-light: #16283f;
  --club-black: #1a1a1a;
  --club-white: #ffffff;
  --club-grey: #f4f4f6;
  --club-grey-dark: #6b6b70;
  --club-light-blue: #e6f1fb;
  --border-radius: 10px;
  --max-width: 1180px;
  --shadow: 0 2px 10px rgba(0,0,0,0.08);
  --stripe-width: 56px;
}

.accent-blue { color: var(--club-primary); }

* { box-sizing: border-box; }

/* Splash intro video — full-screen overlay that fades out into the
   homepage once the clip finishes (see js/main.js for the timing). */
#splash-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--club-black);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  opacity: 1;
  transition: opacity 0.9s ease;
  cursor: pointer;
}

#splash-screen.splash-hidden {
  opacity: 0;
  pointer-events: none;
}

#splash-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.splash-active {
  overflow: hidden;
}

html, body {
  margin: 0;
  padding: 0;
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  color: var(--club-black);
  background: var(--club-white);
  line-height: 1.5;
}

img { max-width: 100%; display: block; }

a { color: var(--club-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px;
}

/* Header / Nav */
.site-header {
  background: var(--club-navy);
  color: var(--club-white);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--shadow);
}

.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  max-width: var(--max-width);
  margin: 0 auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--club-white);
  font-weight: 700;
  font-size: 1.3rem;
}

.brand img { height: 44px; width: 44px; border-radius: 50%; background: var(--club-white); }

.nav-links {
  display: flex;
  gap: 22px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  color: var(--club-white);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
}

.nav-links a:hover,
.nav-links a.active {
  text-decoration: none;
  border-bottom: 2px solid var(--club-primary);
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--club-white);
  font-size: 1.6rem;
  cursor: pointer;
}

.nav-cta {
  display: inline-block;
  background: var(--club-primary);
  color: var(--club-white);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 10px 20px;
  border-radius: var(--border-radius);
  white-space: nowrap;
}

.nav-cta:hover { text-decoration: none; opacity: 0.9; }

/* Hero — club banner image. The banner artwork itself is free to grow
   and crop to fill the width (background-size: cover). The crest badge
   is a separate fixed-size image pinned to the hero, so it always looks
   the same regardless of how the background behind it scales/crops.
   (images/hero-banner-bg.png is the same banner with the crest area
   painted out, so the two don't overlap or duplicate.) */
.hero {
  position: relative;
  overflow: hidden;
  background-image:
    linear-gradient(120deg, rgba(11,26,44,0.95) 0%, rgba(11,26,44,0.82) 45%, rgba(22,40,63,0.6) 100%),
    url('../images/hero-banner-bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--club-white);
  min-height: 440px;
  display: flex;
  align-items: center;
  padding: 40px 20px;
  text-align: left;
}

.hero .container {
  position: relative;
  z-index: 2;
  width: 100%;
  text-align: left;
}

/* Pairs the title block with the crest in one row, so the logo sits
   directly across from the title (not centred against the whole hero
   block, which would drift it down toward the paragraph/buttons).
   Anything below this row (paragraph, buttons) spans the full width. */
.hero-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.hero-title-block {
  min-width: 0;
}

.hero-crest {
  flex-shrink: 0;
  /* Scales smoothly with the viewport (a decent, prominent size on wide
     screens) but is clamped between a sensible min and max so it never
     shrinks to nothing or grows large enough to get clipped. */
  width: clamp(120px, 16vw, 220px);
  height: auto;
  filter: drop-shadow(0 0 22px rgba(120,170,230,0.6));
  /* Small nudge off the flex-centred position — a touch down and left. */
  transform: translate(-20px, 35px);
}

.hero-kicker {
  font-family: 'Anton', Impact, sans-serif;
  font-size: 0.95rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--club-primary);
  margin: 0 0 6px;
  opacity: 0.9;
}

.hero h1 {
  font-family: 'Anton', Impact, sans-serif;
  font-weight: 400;
  font-size: 3.6rem;
  line-height: 1.05;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 0;
  color: var(--club-white);
}

.hero-accent {
  width: 80px;
  height: 5px;
  background: var(--club-primary);
  margin: 16px 0 20px;
  border-radius: 3px;
}

.hero p {
  font-size: 1.1rem;
  max-width: 480px;
  margin: 0 0 24px;
  color: rgba(255,255,255,0.85);
}

.hero .btn-row {
  justify-content: flex-start;
}

.hero .btn {
  background: var(--club-primary);
  color: var(--club-white);
  box-shadow: 0 4px 14px rgba(0,0,0,0.35);
}

.hero .btn-outline {
  background: transparent;
  color: var(--club-white);
  border: 2px solid var(--club-white);
  box-shadow: none;
}

.hero-tagline {
  position: absolute;
  right: 24px;
  bottom: 18px;
  margin: 0;
  font-style: italic;
  font-size: 0.95rem;
  color: rgba(255,255,255,0.65);
  z-index: 2;
}

@media (max-width: 900px) {
  .hero-tagline { display: none; }
}

@media (max-width: 800px) {
  .hero {
    min-height: 320px;
    background-position: 65% center;
  }
  .hero h1 { font-size: 2.2rem; }
  .hero p { max-width: 100%; }
  .hero-top-row { gap: 12px; }
  .hero-crest { width: clamp(60px, 20vw, 100px); transform: translate(-10px, 8px); }
}

/* Homepage-only crest offset — the 3-line "One Club. One Pride. One
   Goal." headline is much taller than inner pages' single-line titles,
   so flexbox already centres the crest lower without extra help. */
.hero-crest-home { transform: translate(-20px, 0); }
@media (max-width: 800px) {
  .hero-crest-home { transform: translate(-10px, 0); }
}

/* Floating white stats card — overlaps the hero's bottom edge. */
.hero-stats-wrap {
  position: relative;
  z-index: 5;
}

.hero-stats {
  max-width: var(--max-width);
  margin: -50px auto 0;
  background: var(--club-white);
  border-radius: var(--border-radius);
  box-shadow: 0 8px 30px rgba(0,0,0,0.18);
  padding: 28px 24px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.stat-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.stat-icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  color: var(--club-primary);
}

.stat-item h4 {
  margin: 0 0 4px;
  font-size: 0.92rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--club-primary-dark);
}

.stat-item p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--club-grey-dark);
  line-height: 1.4;
}

@media (max-width: 900px) {
  .hero-stats { grid-template-columns: repeat(2, 1fr); margin-top: -30px; }
}

@media (max-width: 500px) {
  .hero-stats { grid-template-columns: 1fr; margin: 20px 20px 0; padding: 22px; }
  .hero-stats-wrap { margin-bottom: 10px; }
}

.btn {
  display: inline-block;
  background: var(--club-white);
  color: var(--club-primary);
  font-weight: 700;
  padding: 12px 26px;
  border-radius: var(--border-radius);
  border: none;
  cursor: pointer;
  font-size: 1rem;
}

.btn:hover { text-decoration: none; opacity: 0.9; }

.btn-outline {
  background: transparent;
  color: var(--club-white);
  border: 2px solid var(--club-white);
}

.btn-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* Sponsors ticker — homepage only, sits directly under the nav bar.
   Renders via JS from content/sponsors.json and stays hidden until at
   least one sponsor has been added through the CMS. */
.sponsors-ticker-wrap {
  background: var(--club-grey);
  border-bottom: 1px solid #e6e6e8;
  overflow: hidden;
  padding: 14px 0;
}

.sponsors-track {
  display: flex;
  align-items: center;
  gap: 14px;
  width: max-content;
  animation: sponsors-scroll 18s linear infinite;
}

.sponsors-ticker-wrap:hover .sponsors-track { animation-play-state: paused; }

.sponsor-ticker-item {
  flex-shrink: 0;
  color: var(--club-primary-dark);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.sponsor-ticker-item:hover {
  color: var(--club-primary);
  text-decoration: underline;
}

.sponsor-ticker-sep {
  flex-shrink: 0;
  color: var(--club-grey-dark);
  opacity: 0.5;
}

/* Starts fully off-screen to the right (100vw — one viewport width,
   since the ticker spans edge-to-edge) and travels all the way past
   the left edge of its own width, then resets and re-enters from the
   right again. */
@keyframes sponsors-scroll {
  from { transform: translateX(100vw); }
  to { transform: translateX(-100%); }
}

@media (prefers-reduced-motion: reduce) {
  .sponsors-track { animation: none; }
}

/* Sections */
section { padding: 50px 0; }
section.alt { background: var(--club-grey); }
section.section-light-blue { background: var(--club-light-blue); }

.section-title {
  text-align: center;
  margin-bottom: 34px;
}

.section-title h2 { font-size: 1.9rem; margin: 0 0 8px; }
.section-title p { color: var(--club-grey-dark); margin: 0; }

/* About Us split section */
.about-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}

.about-kicker {
  display: block;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--club-primary-dark);
  margin-bottom: 8px;
}

.about-split h2 {
  font-family: 'Anton', Impact, sans-serif;
  font-weight: 400;
  font-size: 2.1rem;
  text-transform: uppercase;
  line-height: 1.2;
  margin: 0 0 16px;
}

.about-split p {
  color: var(--club-grey-dark);
  margin: 0 0 16px;
  line-height: 1.6;
}

.about-photo {
  aspect-ratio: 4 / 3;
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.about-photo-placeholder {
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, var(--club-navy) 0%, var(--club-primary-dark) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: rgba(255,255,255,0.8);
  text-align: center;
  padding: 20px;
}

.about-photo-placeholder svg { width: 56px; height: 56px; opacity: 0.7; }
.about-photo-placeholder span { font-size: 0.85rem; max-width: 220px; }

@media (max-width: 800px) {
  .about-split { grid-template-columns: 1fr; gap: 26px; }
}

/* Teams preview grid (homepage) — always a single row. On wide screens
   the 11 tiles stretch to fill the row evenly; once the viewport is too
   narrow for that to stay readable, the row scrolls horizontally rather
   than wrapping onto multiple lines. */
.teams-preview-grid {
  display: grid;
  grid-template-columns: repeat(11, minmax(88px, 1fr));
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 6px;
  scrollbar-width: thin;
}

.team-tile {
  background: var(--club-white);
  border: 1px solid var(--club-grey);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  padding: 20px 8px;
  text-align: center;
  color: var(--club-black);
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.team-tile:hover {
  border-color: var(--club-primary);
  transform: translateY(-3px);
  text-decoration: none;
}

.team-tile .tile-icon {
  width: 26px;
  height: 26px;
  margin: 0 auto 10px;
  color: var(--club-primary);
}

.team-tile .tile-age {
  display: block;
  font-family: 'Anton', Impact, sans-serif;
  font-size: 1.15rem;
  color: var(--club-primary-dark);
}

.team-tile .tile-tag {
  display: block;
  font-size: 0.7rem;
  color: var(--club-grey-dark);
  margin-top: 6px;
  line-height: 1.3;
}

/* Dark CTA banner */
.cta-banner {
  position: relative;
  overflow: hidden;
  background: linear-gradient(120deg, var(--club-navy) 0%, var(--club-navy-light) 100%);
  color: var(--club-white);
}

.cta-banner::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 260px;
  background: repeating-linear-gradient(65deg,
    rgba(108,172,228,0.14) 0,
    rgba(108,172,228,0.14) var(--stripe-width),
    transparent var(--stripe-width),
    transparent calc(var(--stripe-width) * 2));
  pointer-events: none;
}

.cta-banner-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
}

.cta-banner h2 {
  font-family: 'Anton', Impact, sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  font-size: 2rem;
  margin: 0;
}

.cta-banner-text {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}

.cta-banner-text p {
  margin: 0;
  max-width: 320px;
  color: rgba(255,255,255,0.8);
}

.cta-banner .btn {
  background: var(--club-primary);
  color: var(--club-white);
  white-space: nowrap;
}

/* Home page news carousel — one full-width post at a time */
.news-carousel {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  background: var(--club-grey);
}

.news-carousel-track {
  display: flex;
  transition: transform 0.5s ease;
}

.news-slide {
  min-width: 100%;
  height: 440px;
  display: flex;
  background: var(--club-white);
}

.news-slide-empty {
  align-items: center;
  justify-content: center;
}

.news-slide-image {
  flex: 1 1 45%;
  min-width: 0;
  /* Stretches to exactly fill the box — no cropping and no empty
     letterboxing. Note: photos that aren't roughly the same shape as
     the box will look slightly stretched rather than cropped. */
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-color: var(--club-primary-dark);
}

.news-slide-content {
  flex: 1 1 55%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 34px 44px;
  color: var(--club-black);
}

.news-slide-date {
  font-size: 0.8rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--club-grey-dark);
  margin-bottom: 8px;
}

.news-slide-content h3 {
  font-family: 'Anton', Impact, sans-serif;
  font-weight: 400;
  font-size: 2rem;
  letter-spacing: 0.5px;
  margin: 0 0 12px;
  text-transform: uppercase;
  color: var(--club-primary-dark);
}

.news-slide-content p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--club-black);
}

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.85);
  color: var(--club-primary-dark);
  border: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
}

.carousel-btn:hover { background: var(--club-white); }
.carousel-btn.prev { left: 16px; }
.carousel-btn.next { right: 16px; }

.carousel-dots {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 2;
}

.carousel-dots button {
  width: 9px;
  height: 9px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,0.6);
  cursor: pointer;
}

.carousel-dots button.active {
  background: var(--club-white);
  width: 22px;
  border-radius: 6px;
}

@media (max-width: 700px) {
  .news-slide { height: auto; flex-direction: column; }
  .news-slide-image { flex: none; height: 200px; width: 100%; }
  .news-slide-content { flex: none; padding: 20px 22px; }
  .news-slide-content h3 { font-size: 1.4rem; }
}

/* Cards grid */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 22px;
}

.card {
  background: var(--club-white);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.card img { width: 100%; height: 170px; object-fit: cover; background: var(--club-grey); }

/* Camps — shows the whole image, no cropping. Stretches to fill a
   fixed 16:9 box rather than letterboxing, so upload images close to
   that ratio (ideal: 1200x675px) to keep distortion to a minimum. */
.camp-card-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--club-grey);
}

.camp-card-image img {
  width: 100%;
  height: 100%;
  object-fit: fill;
  display: block;
}

.card-body { padding: 18px; flex: 1; display: flex; flex-direction: column; }

.card-body h3 { margin: 0 0 8px; font-size: 1.15rem; }
.card-body p { margin: 0 0 12px; color: var(--club-grey-dark); font-size: 0.95rem; flex: 1; }
.card-body .meta { font-size: 0.8rem; color: var(--club-grey-dark); margin-bottom: 8px; }

.tag {
  display: inline-block;
  background: var(--club-primary);
  color: var(--club-white);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  margin-bottom: 10px;
  align-self: flex-start;
}

/* Teams page */
.age-group-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 30px;
}

.age-group-filter button {
  background: var(--club-white);
  border: 2px solid var(--club-primary);
  color: var(--club-primary);
  padding: 6px 16px;
  border-radius: 20px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9rem;
}

.age-group-filter button.active,
.age-group-filter button:hover {
  background: var(--club-primary);
  color: var(--club-white);
}

/* Fixtures page — calendar + fixtures/results list */
.fixtures-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  align-items: start;
}

.calendar-card {
  background: var(--club-white);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  padding: 20px;
}

.calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.calendar-header h3 { margin: 0; font-size: 1.1rem; }

.cal-nav-btn {
  background: var(--club-primary);
  color: var(--club-white);
  border: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}

.cal-today-btn {
  background: var(--club-white);
  border: 2px solid var(--club-primary);
  color: var(--club-primary-dark);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  margin: 0 4px;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.calendar-daylabel {
  text-align: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--club-grey-dark);
  padding-bottom: 4px;
}

.calendar-day {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--club-grey);
  border-radius: 8px;
  font-size: 0.8rem;
  color: var(--club-black);
}

.calendar-day.empty { background: transparent; }

.calendar-day.has-fixture {
  background: var(--club-white);
  border: 2px solid var(--club-primary);
  font-weight: 700;
  cursor: pointer;
}

.calendar-day.has-fixture:hover { background: var(--club-grey); }

.calendar-day.today {
  outline: 2px dashed var(--club-primary-dark);
  outline-offset: -2px;
}

.calendar-day.selected {
  background: var(--club-primary-dark);
  border-color: var(--club-primary-dark);
  color: var(--club-white);
}

.calendar-day .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--club-primary-dark);
  margin-top: 2px;
}

.calendar-day.selected .dot { background: var(--club-white); }

.fixtures-list-wrap h3 { margin-top: 0; }

.fixtures-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fixture-card {
  background: var(--club-white);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.fixture-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--club-primary-dark);
  color: var(--club-white);
  border-radius: 8px;
  width: 54px;
  height: 54px;
  flex-shrink: 0;
}

.fixture-day { font-size: 1.2rem; font-weight: 700; line-height: 1; }
.fixture-month { font-size: 0.7rem; text-transform: uppercase; }

.fixture-details { flex: 1; min-width: 0; }

.fixture-top { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.fixture-top .tag { margin: 0; }

.venue-badge {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  text-transform: uppercase;
}

.venue-home { background: rgba(108,172,228,0.2); color: var(--club-primary-dark); }
.venue-away { background: var(--club-grey); color: var(--club-grey-dark); }

.fixture-details h4 { margin: 0 0 4px; font-size: 1rem; }
.fixture-details .meta { font-size: 0.8rem; color: var(--club-grey-dark); }

.fixture-result {
  font-weight: 700;
  color: var(--club-primary-dark);
  font-size: 0.95rem;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .fixtures-layout { grid-template-columns: 1fr; }
}

/* Social embed section — fixed 2-up columns so Facebook/Instagram
   always fill the full row width side by side (auto-fit was leaving
   empty extra columns on wide screens once a 3rd, full-width TikTok
   item was added). Collapses to 1 column on smaller screens below. */
.social-embeds {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  align-items: stretch;
}

@media (max-width: 800px) {
  .social-embeds { grid-template-columns: 1fr; }
}

.embed-box {
  background: var(--club-white);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  padding: 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
}

.embed-box h3 { margin-top: 0; }

/* Instagram (SociableKit widget) column — the iframe stretches to fill
   whatever height the Facebook card next to it ends up rendering at
   (Facebook's own cover photo/header makes its card taller than its
   declared data-height), instead of a fixed pixel guess. */
.embed-box.instagram-embed {
  overflow: hidden;
}

.embed-box.instagram-embed iframe {
  flex: 1;
  width: 100%;
  border: 0;
  min-height: 500px;
}

/* TikTok (SociableKit carousel widget) — sits below the Facebook/
   Instagram row, spanning the full grid width from the left edge of
   the Facebook card to the right edge of the Instagram card. */
.embed-box.tiktok-embed {
  grid-column: 1 / -1;
}

.embed-box.tiktok-embed iframe {
  width: 100%;
  height: 600px;
  border: 0;
}

.social-follow {
  display: flex;
  gap: 14px;
  justify-content: center;
  margin-top: 20px;
}

.social-follow a {
  background: var(--club-white);
  color: var(--club-primary);
  border-radius: 50%;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  box-shadow: var(--shadow);
}

/* Gallery */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
}

.gallery-grid img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: var(--border-radius);
}

/* Sponsors page — card grid */
.sponsors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 22px;
}

.sponsor-card {
  background: var(--club-white);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  padding: 28px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.sponsor-card-logo {
  height: 80px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sponsor-card-logo img {
  max-height: 80px;
  max-width: 100%;
  object-fit: contain;
}

.sponsor-card h3 { margin: 4px 0 0; font-size: 1.05rem; }
.sponsor-card p { margin: 0; color: var(--club-grey-dark); font-size: 0.9rem; }
.sponsor-card .btn { margin-top: 8px; }

/* Contact form */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

form { display: flex; flex-direction: column; gap: 20px; }

/* Each field is a <div> wrapping a label + input/textarea — stack them
   with a little breathing room instead of letting them run inline. */
form > div { display: flex; flex-direction: column; gap: 6px; }

label { display: block; font-weight: 600; font-size: 0.9rem; }

input, textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 0.95rem;
  font-family: inherit;
}

textarea { min-height: 140px; resize: vertical; }

/* Footer */
.site-footer {
  background: var(--club-navy);
  color: #b8c2cf;
  padding: 40px 0 20px;
  margin-top: 40px;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
  margin-bottom: 24px;
}

.footer-grid h4 { color: var(--club-white); margin: 0 0 12px; }
.footer-grid a { color: #b8c2cf; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin-bottom: 8px; }

.footer-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--club-white);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.2;
  margin-bottom: 10px;
}

.footer-logo:hover { text-decoration: none; }
.footer-logo img { height: 44px; width: 44px; border-radius: 50%; background: var(--club-white); }

.footer-tagline {
  color: var(--club-primary);
  font-size: 0.78rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 700;
  margin: 0;
}

.social-follow-footer {
  justify-content: flex-start;
  margin-top: 0;
}

.social-follow-footer a {
  background: rgba(255,255,255,0.08);
  color: var(--club-white);
  box-shadow: none;
}

.social-follow-footer a:hover { background: var(--club-primary); }

.footer-bottom {
  text-align: center;
  border-top: 1px solid #333;
  padding-top: 16px;
  font-size: 0.85rem;
  color: #888;
}

.empty-state {
  text-align: center;
  color: var(--club-grey-dark);
  padding: 30px;
}

/* Responsive */
@media (max-width: 800px) {
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--club-navy);
    flex-direction: column;
    padding: 16px 20px;
    display: none;
    gap: 14px;
  }
  .nav-links.open { display: flex; }
  .nav-cta { display: none; }
  .nav-toggle { display: block; }
  .contact-grid { grid-template-columns: 1fr; }
}