/* =============================================
   responsive.css — Mobile & Tablet Breakpoints
   MEJORADO: mobile-first, touch targets, tipografía
   ============================================= */

/* ─── Tablet: ≤ 1024px ─── */
@media (max-width: 1024px) {
  .news-grid {
    grid-template-columns: 1fr 1fr;
  }
  .news-card.featured {
    grid-column: span 2;
  }
  .instagram-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
}

/* ─── Mobile: ≤ 768px ─── */
@media (max-width: 768px) {
  /* Navbar */
  .nav-stripe { display: none; }
  .hamburger { display: flex; }

  /* Hero — padding seguro en móvil */
  #hero { height: calc(100dvh - var(--navbar-height)); min-height: 480px; }
  .hero-content {
    padding: 0 20px;
    padding-top: 52px;
    max-width: 100%;
    justify-content: flex-end;
    padding-bottom: 80px;
  }
  .hero-title {
    font-size: clamp(36px, 10vw, 52px);
    line-height: 1.0;
  }
  .hero-sub {
    font-size: 15px;
    max-width: 100%;
    margin-bottom: 24px;
  }
  .hero-eyebrow {
    font-size: 11px;
    letter-spacing: 0.18em;
  }
  .hero-ctas { gap: 10px; }

  /* Botones — touch target mínimo 44px */
  .btn {
    min-height: 44px;
    padding: 12px 22px;
    font-size: 13px;
  }
  .btn-tickets {
    min-height: 38px;
    padding: 10px 16px;
  }

  /* Next Game Banner */
  .next-game-cta { display: none; }
  .next-game-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 0 20px;
  }
  .next-game-date { font-size: 18px; }

  /* Schedule */
  .hide-mobile { display: none; }
  .schedule-filters { gap: 6px; flex-wrap: wrap; }
  .filter-btn {
    padding: 10px 14px; /* touch target aumentado */
    font-size: 12px;
    min-height: 38px;
  }

  /* News */
  .news-grid { grid-template-columns: 1fr; }
  .news-card.featured { grid-column: span 1; }
  .news-article-body { padding: 22px; }
  .news-article-copy { font-size: 15px; line-height: 1.65; }

  /* Gallery */
  .gallery-bento {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }
  .gallery-item.tall { grid-row: span 1; }

  /* Instagram */
  .instagram-grid { grid-template-columns: repeat(3, 1fr); }

  /* Roster */
  .roster-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .position-tabs { flex-wrap: wrap; border-radius: var(--radius-sm); }
  .pos-tab {
    border-right: none;
    border-bottom: 1.5px solid var(--color-navy);
    min-height: 44px; /* touch target */
  }
  .pos-tab:last-child { border-bottom: none; }

  /* Coaches */
  .coaches-grid { grid-template-columns: 1fr 1fr; gap: 16px; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }

  /* Section headers */
  .section-header { flex-direction: column; align-items: flex-start; }
  .roster-header  { flex-direction: column; align-items: flex-start; }

  /* Sección titles mobile */
  .section-title { font-size: clamp(24px, 7vw, 36px); }
  .section-label { font-size: 11px; }

  /* Container */
  .container { padding: 0 20px; }
  .footer-grid  { padding-left: 20px; padding-right: 20px; }
  .footer-bottom { padding-left: 20px; padding-right: 20px; }
  .next-game-inner { padding: 0 20px; }

  /* Secciones — menos padding vertical en mobile */
  .section-white,
  .section-gray,
  .section-navy,
  .section-red {
    padding: 48px 0;
  }
}

/* ─── Small Mobile: ≤ 480px ─── */
@media (max-width: 480px) {
  .gallery-bento { grid-template-columns: 1fr; grid-template-rows: auto; }
  .gallery-bento .gallery-item { height: 200px; }
  .coaches-grid { grid-template-columns: 1fr; }
  .instagram-grid { grid-template-columns: repeat(3, 1fr); }
  .hero-title { font-size: clamp(32px, 9vw, 44px); }
  .slide-arrows { display: none; }

  /* Slide dots más grandes en dedos */
  .slide-dot { width: 10px; height: 10px; }
  .slide-dot.active { width: 30px; }
  .slide-controls { bottom: 20px; left: 20px; }

  /* Nav mobile menu — font más legible */
  .mobile-nav-links a {
    font-size: 20px;
    padding: 18px 4px;
  }
}

/* ─── Hover solo en dispositivos que lo soportan ─── */
/* Evita estados hover falsos en táctil (iOS, Android) */
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-red);
  }
  .news-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
  }
}

/* ─── Print ─── */
@media print {
  #navbar, .slide-arrows, .slide-controls, #sponsors, footer { display: none; }
  #hero { margin-top: 0; height: auto; min-height: unset; }
  .slide { opacity: 1; position: relative; height: 300px; }
  .slide-1 { display: block; }
  .slide-2, .slide-3 { display: none; }
}