/* ============================================================
   São Bernardo FC — Responsive / Media Queries
   ============================================================ */

/* ---- 1280px: Container tightens naturally (already set) ---- */

/* ---- 1100px: Large tablet landscape ---- */
@media (max-width: 1100px) {
  .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-8);
  }
  .footer__grid > .footer__brand {
    grid-column: 1 / -1;
  }

  .stadium-showcase { gap: var(--sp-8); }

  .news-featured {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .news-featured__img { aspect-ratio: 16 / 7; }
  .news-featured__body { padding: var(--sp-8); }

  .timeline::before { left: 24px; }
  .timeline-item {
    grid-template-columns: 40px 1fr;
    gap: var(--sp-4);
  }
  .timeline-item:nth-child(odd) .timeline-item__content,
  .timeline-item:nth-child(even) .timeline-item__content { grid-column: 2; grid-row: 1; }
  .timeline-item:nth-child(odd) .timeline-item__spacer,
  .timeline-item:nth-child(even) .timeline-item__spacer { grid-column: 1; grid-row: 1; }
  .timeline-item:nth-child(odd) .timeline-item__empty,
  .timeline-item:nth-child(even) .timeline-item__empty   { display: none; }
}

/* ---- 1024px: Tablet ---- */
@media (max-width: 1024px) {
  :root { --nav-h: 72px; --section-py: clamp(3rem, 6vw, 5rem); }

  .nav__menu { display: none; }
  .nav__hamburger { display: flex; }

  .stats-bar__inner { grid-template-columns: repeat(2, 1fr); }
  .stat-item:nth-child(2) { border-right: none; }

  .stadium-showcase { grid-template-columns: 1fr; }

  .contact-grid { grid-template-columns: 1fr; gap: var(--sp-8); }

  .gallery-grid { grid-template-columns: repeat(3, 1fr); }

  .sponsor-featured { flex-direction: column; text-align: center; padding: var(--sp-8); }
  .sponsor-featured__desc { margin-inline: auto; }

  .highlight-banner { flex-direction: column; text-align: center; }
  .highlight-banner__sub { margin-inline: auto; }
  .highlight-banner__actions { justify-content: center; }
}

/* ---- 768px: Tablet portrait ---- */
@media (max-width: 768px) {
  :root { --section-py: clamp(2.5rem, 6vw, 4rem); }

  h1 { font-size: var(--fs-4xl); }
  h2 { font-size: var(--fs-3xl); }
  h3 { font-size: var(--fs-2xl); }

  .hero__arrow { display: none; }

  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }

  .form-grid-2 { grid-template-columns: 1fr; }

  .players-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }

  .gallery-grid { grid-template-columns: repeat(2, 1fr); }

  .trophy-grid { grid-template-columns: repeat(2, 1fr); }

  .footer__grid {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
  }
  .footer__brand { grid-column: 1; }

  .footer__bottom {
    flex-direction: column;
    text-align: center;
    gap: var(--sp-3);
  }

  .section-title { font-size: clamp(2rem, 6vw, 3rem); }

  .nav__logo-text { display: none; }

  .news-grid { grid-template-columns: 1fr; }
  .news-featured { display: flex; flex-direction: column; }
  .news-featured__img { aspect-ratio: 16 / 9; }

  .article-body { padding-block: var(--sp-8); }
  .article-body p { font-size: var(--fs-base); }

  .season-table { font-size: var(--fs-xs); }
  .season-table th, .season-table td { padding: var(--sp-3); }

  .stats-bar__inner { grid-template-columns: repeat(4, 1fr); }

  #back-to-top { bottom: var(--sp-4); right: var(--sp-4); width: 42px; height: 42px; }

  .map-wrapper { aspect-ratio: 840/534; }

  .stadium-facts { grid-template-columns: 1fr 1fr; }
}

/* ---- 640px: Mobile ---- */
@media (max-width: 640px) {
  :root {
    --container-pad: 1.25rem;
    --section-py: 3rem;
  }

  .hero {
    min-height: 100svh;
  }

  .hero__controls { bottom: var(--sp-6); }
  .hero__scroll { display: none; }

  .stats-bar__inner { grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); padding: var(--sp-5) var(--sp-4); }
  .stat-item { border-right: none; }
  .stat-item:nth-child(odd) { border-right: 1px solid rgba(0,0,0,0.12); }

  .section-label { font-size: 10px; }

  .btn--lg { padding: 14px 28px; font-size: var(--fs-sm); }

  .players-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--sp-3); }

  .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); }
  .gallery-grid--masonry { columns: 2; }

  .trophy-grid { grid-template-columns: 1fr; }

  .form-card { padding: var(--sp-6); }

  .contact-item { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }

  .social-links { gap: var(--sp-2); }
  .social-link { padding: 8px 14px; font-size: var(--fs-xs); }

  .footer__social { flex-wrap: wrap; }

  .highlight-banner { padding: var(--sp-6); }
  .highlight-banner::before { display: none; }

  .breadcrumb { flex-wrap: wrap; }

  .timeline-item { gap: var(--sp-3); }
  .timeline-item__content { padding: var(--sp-4); }
  .timeline-item__year { font-size: var(--fs-3xl); }

  .lightbox__nav { display: none; }
  .lightbox__counter { bottom: var(--sp-4); }

  .search-overlay { padding-top: 10vh; }
  .search-overlay__input { font-size: var(--fs-base); padding: 16px 56px 16px 20px; }

  .staff-grid { grid-template-columns: repeat(2, 1fr); }

  .sponsors-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---- 400px: Small phones ---- */
@media (max-width: 400px) {
  :root { --container-pad: 1rem; }

  .players-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); }
  .staff-grid { grid-template-columns: 1fr 1fr; }
  .gallery-grid { gap: var(--sp-1); }
  .stats-bar__inner { grid-template-columns: repeat(2, 1fr); }
  .hero__cta { flex-direction: column; }
  .hero__cta .btn { width: 100%; justify-content: center; }
}

/* ---- Print ---- */
@media print {
  .nav, .footer, #back-to-top, #scroll-progress, .hero__arrow,
  .search-overlay, .lightbox, #page-loader, .nav__hamburger { display: none !important; }
  body { background: white; color: black; }
  .section--dark, .section--black { background: #f5f5f5; color: black; }
  a { color: black; }
  .section-title { color: black; }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}

/* ---- High contrast ---- */
@media (forced-colors: active) {
  .btn--primary { forced-color-adjust: none; }
  .nav__link.active { text-decoration: underline; }
}