/* =====================================================================
   COPA EDAM — Responsive
   Mobile-first. Breakpoints: 320 360 375 390 414 480 576 768 820 992
   1024 1200 1366 1440 1600 1920 2560 3840

   Nota: todas las columnas de grid usan minmax(0, ...) en vez de un
   simple "1fr". Sin el "0", un track de grid nunca se encoge por
   debajo del min-content de su contenido (por ejemplo la tabla de
   posiciones con white-space: nowrap para el scroll horizontal), lo
   que termina forzando un overflow horizontal de toda la página.
   ===================================================================== */

/* --- Base móvil (< 576px): todo apilado en una sola columna --- */
.main-layout { grid-template-columns: minmax(0, 1fr); }
.hero-grid { grid-template-columns: minmax(0, 1fr); text-align: center; }
.hero-actions { justify-content: center; }
.hero-meta { justify-content: center; }
.hero-trophy-wrap { order: -1; }
.hero-trophy-wrap .trofeo-svg { width: 160px; height: auto; }
/* El indicador de scroll solo aparece desde tablet: en móvil el hero es más
   compacto (apilado) y el indicador pisaría el contenido siguiente. */
.hero-scroll-cue { display: none; }

.stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.content-grid { grid-template-columns: minmax(0, 1fr); }
.news-list { grid-template-columns: minmax(0, 1fr); }
.footer-grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
.feature-strip .row-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.main-nav, .header-search { display: none; }
.btn-drawer-toggle { display: inline-flex; align-items: center; justify-content: center; }

.standings-table { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }

.container-edam { padding-inline: 16px; }

/* --- 360px --- */
@media (min-width: 360px) {
    .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- 375px / 390px / 414px (gama alta de móviles) --- */
@media (min-width: 375px) {
    .hero-title { font-size: clamp(2.4rem, 9vw, 3rem); }
}

/* --- 480px --- */
@media (min-width: 480px) {
    .news-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- 576px: sm --- */
@media (min-width: 576px) {
    .stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .feature-strip .row-features { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --- 768px: tablets, aparece el menú horizontal reducido --- */
@media (min-width: 768px) {
    .hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); text-align: left; }
    .hero-actions, .hero-meta { justify-content: flex-start; }
    .hero-trophy-wrap { order: initial; }
    .hero-scroll-cue { display: flex; }
    .content-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- 820px --- */
@media (min-width: 820px) {
    .stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --- 992px: lg --- */
@media (min-width: 992px) {
    .main-layout { grid-template-columns: 280px minmax(0, 1fr); }
    .main-layout .sidebar-right { grid-column: 1 / -1; }

    .standings-table { display: table; white-space: normal; }
}

/* --- 1220px: recién aquí caben cómodamente el logo + los 9 enlaces de
   navegación + el botón de Área Admin en una sola fila; por debajo de este
   ancho se mantiene el menú hamburguesa (ver medición real de anchos:
   logo+marca ~170px, nav completo ~700px, botón admin ~150px, más padding
   del contenedor — con margen de seguridad para evitar overflow). --- */
@media (min-width: 1220px) {
    .main-nav { display: flex; }
    .btn-drawer-toggle { display: none; }
}

/* --- 1024px --- */
@media (min-width: 1024px) {
    .main-layout { grid-template-columns: 280px minmax(0, 1fr) 300px; }
    .main-layout .sidebar-right { grid-column: auto; }
    .content-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.3fr) minmax(0, 1fr); }
    .footer-grid { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); }
    .stats-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .feature-strip .row-features { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* --- 1200px --- */
@media (min-width: 1200px) {
    .main-layout { grid-template-columns: 300px minmax(0, 1fr) 320px; }
}

/* --- 1366px / 1440px --- */
@media (min-width: 1366px) {
    .container-edam { padding-inline: 40px; }
}

/* --- 1600px --- */
@media (min-width: 1600px) {
    .container-edam { max-width: 1680px; }
    /* El buscador del header solo aparece aquí: con nav completo + botón
       admin ya usando la mayoría del ancho disponible entre 1220-1599px,
       añadirlo antes volvería a producir overflow horizontal. */
    .header-search { display: flex; }
}

/* --- 1920px: full HD --- */
@media (min-width: 1920px) {
    .container-edam { max-width: 1820px; }
    .hero-title { font-size: clamp(3.2rem, 5.2vw, 5.6rem); }
}

/* --- 2560px: 2K --- */
@media (min-width: 2560px) {
    html { font-size: 19px; }
    .container-edam { max-width: 2320px; }
}

/* --- 3840px: 4K --- */
@media (min-width: 3840px) {
    html { font-size: 24px; }
    .container-edam { max-width: 3400px; }
}

/* --- Accesibilidad: usuarios con preferencia de movimiento reducido --- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .hero-trophy-wrap .trofeo-svg,
    .stadium-lights span,
    .badge-live::before,
    .hero-scroll-cue span { animation: none !important; }
    * { transition-duration: 0.01ms !important; }
}