/* ============================================================
   responsive.css — Mobile-first responsive breakpoints
   Target device coverage:
     ≤ 1200px  — Large tablet / small laptop
     ≤  900px  — Tablet (landscape / portrait)
     ≤  768px  — Small tablet / large phone
     ≤  600px  — Mobile phone (standard)
     ≤  480px  — Small phone
     ≤  380px  — Extra-small phone
   ============================================================ */

/* ========= LARGE SCREENS / LAPTOPS: 900px - 1350px ========= */
@media (max-width: 1350px) {

  /* Navbar — tighten gap */
  .navbar__nav {
    gap: var(--space-6);
  }
  .navbar__cta {
    font-size: 18px;
  }
}

@media (max-width: 1200px) {

  /* Navbar — further tighten */
  .navbar__nav {
    gap: var(--space-4);
  }
  .navbar__link {
    font-size: 13px;
  }
  .navbar__cta {
    font-size: 16px;
  }

  /* Home — reduce sidebar column widths */
  .home-grid {
    grid-template-columns: 1fr 240px;
  }
  .home-bottom-grid {
    grid-template-columns: 1fr 1fr 220px;
  }

  /* News featured sidebar */
  .news-featured {
    grid-template-columns: 1fr 260px;
  }

  /* Contact */
  .contact-grid {
    grid-template-columns: 1fr 280px;
  }
  .contact-bottom {
    grid-template-columns: 1fr 280px;
  }

  /* Success stories — 3 cols on medium screens */
  .success-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 1100px) {

  /* Navbar — compact layout to prevent overflow on small laptops */
  .navbar__nav {
    gap: var(--space-3);
  }
  .navbar__link {
    font-size: 12px;
  }
  .navbar__cta {
    font-size: 14px;
  }
}

/* ========= TABLET: ≤ 900px ========= */
@media (max-width: 900px) {

  /* ---- Navbar ---- */
  .navbar__nav        { display: none; }
  .navbar__cta        { display: none; }
  .navbar__hamburger  { display: flex; }

  /* ---- Home grid ---- */
  .home-grid {
    grid-template-columns: 1fr;
  }
  .stats-panel {
    height: auto;
    min-height: 300px;
  }
  .home-bottom-grid {
    grid-template-columns: 1fr 1fr;
  }
  .shop-card {
    grid-column: span 2;
  }

  /* ---- Hero (home) ---- */
  .hero__logo {
    width: 280px;
    height: 220px;
  }

  /* ---- News ---- */
  .news-featured {
    grid-template-columns: 1fr;
  }
  .news-grid {
    grid-template-columns: 1fr 1fr;
  }
  .subscribe-cta {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
  .subscribe-form {
    flex-direction: column;
    width: 100%;
  }
  .subscribe-form__input {
    min-width: 0;
    width: 100%;
  }

  /* Match table horizontal scroll */
  .match-logs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .match-table {
    min-width: 540px;
  }

  /* ---- Teams ---- */
  .teams-header {
    grid-template-columns: 1fr;
  }
  .teams-header__logo { display: none; }
  .player-grid { grid-template-columns: repeat(2, 1fr); }
  .academy-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }
  .academy-card--dark { grid-column: span 2; min-height: 200px; }
  .academy-card--lab  { grid-column: span 2; }

  /* ---- Club Info ---- */
  .club-hero__inner {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  /* Keep the video visible — make it full-width below the text */
  .club-hero__media {
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
  }
  .club-hero__video {
    width: 100%;
    height: auto;
    border-radius: 10px;
    object-fit: contain;
  }
  .training-grid { grid-template-columns: 1fr; }
  .stats-bar__inner { grid-template-columns: repeat(2, 1fr); gap: var(--space-8); }
  .data-driven__inner { grid-template-columns: 1fr; }
  .data-driven__img { height: 260px; }

  /* Success stories — 2 cols */
  .success-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* ---- Contact ---- */
  .contact-grid { grid-template-columns: 1fr; }
  .contact-bottom { grid-template-columns: 1fr; }
  .hubs-grid { grid-template-columns: 1fr 1fr; }
  .contact-hero {
    height: 480px;
  }

  /* ---- Book-trail ---- */
  .registration-wrapper {
    grid-template-columns: 1fr;
  }
}

/* ========= SMALL TABLET / LARGE PHONE: ≤ 768px ========= */
@media (max-width: 768px) {

  /* ---- Base / Container ---- */
  .container {
    padding-left: var(--space-5);
    padding-right: var(--space-5);
  }
  .section {
    padding-top: var(--space-10);
    padding-bottom: var(--space-10);
  }

  /* ---- Navbar ---- */
  .navbar__inner {
    padding: 0 var(--space-4);
  }

  /* ---- Hero (home) ---- */
  .hero {
    padding: var(--space-12) var(--space-4);
    min-height: 480px;
  }
  .hero__logo {
    width: 220px;
    height: 180px;
  }
  .hero__title {
    font-size: clamp(var(--text-3xl), 9vw, var(--text-5xl));
  }
  .hero__subtitle {
    font-size: var(--text-sm);
  }

  /* ---- Home bottom grid ---- */
  .home-bottom-grid {
    grid-template-columns: 1fr;
  }
  .shop-card { grid-column: span 1; }

  /* ---- News ---- */
  .news-grid { grid-template-columns: 1fr; }
  .news-header__top { flex-direction: column; }
  .news-filters { flex-wrap: wrap; }
  .featured-main { min-height: 360px; }

  /* ---- Teams ---- */
  .player-grid { grid-template-columns: 1fr 1fr; }
  .team-tabs { overflow-x: auto; padding-bottom: 2px; }
  .team-tab-btn {
    white-space: nowrap;
    padding: var(--space-3) var(--space-5);
  }
  .academy-grid { grid-template-columns: 1fr; }
  .academy-card--dark { grid-column: span 1; }
  .academy-card--lab  { grid-column: span 1; flex-direction: column; }

  /* ---- Club Info ---- */
  .stats-bar__inner { grid-template-columns: 1fr 1fr; }
  .club-hero__actions { flex-direction: column; }
  .club-hero__actions .btn { width: 100%; justify-content: center; }
  .club-hero__video { height: auto; object-fit: contain; }

  /* Success stories — single column */
  .success-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .success-card__image img { height: 200px; }

  /* ---- Contact ---- */
  .form-row { grid-template-columns: 1fr; }
  .hubs-grid { grid-template-columns: 1fr; }
  .contact-hero { height: 360px; }
  .contact-header {
    padding-top: var(--space-6);
    padding-bottom: var(--space-5);
  }

  /* ---- Footer ---- */
  .footer__inner {
    flex-direction: column;
    align-items: center;
    gap: var(--space-6);
    text-align: center;
  }
  .footer__socials { justify-content: center; }
  .footer__center { flex-direction: column; align-items: center; gap: var(--space-3); }
  .footer__right { text-align: center; align-items: center; }
  .footer__tagline { text-align: center; }
  .footer__nav-group { flex-wrap: wrap; justify-content: center; gap: 0.8rem; }

  /* ---- Academy section (home page) ---- */
  .academy-section { padding: 50px 0; }
  .academy-section .container { width: 92%; }
  .academy-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .academy-image { min-height: 300px; }
}

/* ========= MOBILE: ≤ 600px ========= */
@media (max-width: 600px) {

  :root {
    --space-6: 1.25rem;
  }

  /* ---- Base ---- */
  .container {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }

  /* ---- Hero (home) ---- */
  .hero {
    padding: var(--space-10) var(--space-4);
    min-height: 420px;
  }
  .hero__logo {
    width: 170px;
    height: 140px;
  }
  .hero__actions {
    flex-direction: column;
    align-items: center;
  }
  .hero__actions .btn {
    width: 100%;
    max-width: 280px;
    justify-content: center;
  }

  /* ---- Home ---- */
  .home-bottom-grid {
    grid-template-columns: 1fr;
  }
  .shop-card { grid-column: span 1; }

  /* ---- News ---- */
  .news-grid { grid-template-columns: 1fr; }
  .news-header__top { flex-direction: column; }
  .news-filters { flex-wrap: wrap; }
  .subscribe-cta {
    padding: var(--space-5) var(--space-4);
  }
  .subscribe-form__input {
    min-width: 0;
    width: 100%;
  }

  /* ---- Teams ---- */
  .player-grid { grid-template-columns: 1fr 1fr; }
  .team-tabs { overflow-x: auto; padding-bottom: 2px; }
  .team-tab-btn { white-space: nowrap; }
  .academy-grid { grid-template-columns: 1fr; }
  .academy-card--dark { grid-column: span 1; }
  .academy-card--lab  { grid-column: span 1; flex-direction: column; }

  /* ---- Club Info ---- */
  .stats-bar__inner { grid-template-columns: 1fr 1fr; }
  .club-hero__actions { flex-direction: column; }
  .club-hero__actions .btn { width: 100%; justify-content: center; }

  /* ---- Contact ---- */
  .form-row { grid-template-columns: 1fr; }
  .contact-hero { height: 280px; }
  .contact-hero__logo { width: 200px; height: 160px; }

  /* ---- Book-trail fixes (textarea and submit button) ---- */
  .form-group textarea {
    width: 100%;
    min-width: 0;
  }
  .btn-submit {
    width: 100%;
    padding: 12px 20px;
  }

  /* ---- Footer ---- */
  .footer__inner {
    flex-direction: column;
    align-items: center;
    gap: var(--space-6);
    text-align: center;
  }
  .footer__socials { justify-content: center; }
  .footer__center { flex-direction: column; align-items: center; gap: var(--space-3); }
  .footer__right { text-align: center; align-items: center; }
  .footer__nav-group { flex-direction: column; gap: 0.6rem; }
}

/* ========= SMALL PHONE: ≤ 480px ========= */
@media (max-width: 480px) {

  /* ---- Hero (home) ---- */
  .hero__logo {
    width: 140px;
    height: 110px;
  }
  .hero__title {
    font-size: clamp(2rem, 11vw, var(--text-4xl));
  }

  /* ---- Navbar logo ---- */
  .navbar__logo img,
  .navbar__logo svg {
    height: 40px;
  }

  /* ---- Teams tabs ---- */
  .team-tab-btn {
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
  }

  /* ---- News filter buttons ---- */
  .news-filter-btn {
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-xs);
  }

  /* ---- Contact hero ---- */
  .contact-hero { height: 240px; }
  .contact-hero__logo { width: 150px; height: 120px; }

  /* ---- Subscribe CTA ---- */
  .subscribe-form {
    flex-direction: column;
    gap: var(--space-3);
  }
  .subscribe-form__btn {
    width: 100%;
  }

  /* ---- Book-trail ---- */
  .hero-title { font-size: 32px; }
  .pathway-header h2 { font-size: 28px; }
  .registration-title { font-size: 32px; }
  .registration-wrapper { padding: var(--space-5) var(--space-4); }

  /* ---- Academy section (home) ---- */
  .academy-grid { grid-template-columns: 1fr; gap: 18px; }
  .academy-image { min-height: 240px; }
  .academy-overlay { left: 14px; bottom: 14px; }
  .academy-tag { font-size: 0.7rem; padding: 5px 12px; }
  .academy-overlay h2 { font-size: 1.25rem; }
  .academy-title { font-size: 1.5rem; }
  .academy-content { padding: 16px; }
}

/* ========= EXTRA-SMALL PHONE: ≤ 380px ========= */
@media (max-width: 380px) {

  /* ---- Players / Stats ---- */
  .player-grid { grid-template-columns: 1fr; }
  .stats-bar__inner { grid-template-columns: 1fr; }

  /* ---- Hero ---- */
  .hero__logo { width: 110px; height: 90px; }
  .hero__title { font-size: clamp(1.75rem, 12vw, 2.5rem); }
  .hero__actions .btn {
    max-width: 100%;
    font-size: var(--text-xs);
  }

  /* ---- Navbar logo ---- */
  .navbar__logo img,
  .navbar__logo svg { height: 36px; }

  /* ---- Contact ---- */
  .contact-hero { height: 200px; }

  /* ---- Subscribe ---- */
  .subscribe-cta { padding: var(--space-4); }
  .subscribe-form__input,
  .subscribe-form__btn { height: 42px; font-size: var(--text-xs); }

  /* ---- Footer ---- */
  .footer { padding: 1.25rem; }
  .footer__brand { font-size: 1.2rem; }

  /* ---- Book-trail ---- */
  .hero-title { font-size: 26px; }
  .registration-title { font-size: 28px; }
  .registration-wrapper { padding: var(--space-4); }

  /* ---- Academy section ---- */
  .academy-image { min-height: 200px; }
}