/**
 * responsive.css
 * -----------------------------------------------------------------------
 * Incrementos progresivos sobre la base mobile-first definida en
 * layout.css / components.css. Breakpoints:
 *   640px  -> tablet pequeña / móvil grande apaisado
 *   768px  -> tablet
 *   960px  -> laptop
 *   1200px -> desktop
 *   1600px -> ultrawide
 * -----------------------------------------------------------------------
 */

/* ================================ 640px+ ================================ */
@media (min-width: 640px) {
    .stations-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

    .hero__title { font-size: var(--fs-4xl); }
}

/* ================================ 768px+ ================================ */
@media (min-width: 768px) {
    .site-footer__grid {
        grid-template-columns: 1.3fr 0.8fr 0.9fr 0.9fr 1.1fr;
    }

    .player-bar__station { display: block; }
    .player-bar__status { display: flex; }
    .player-bar__volume { display: flex; }
    .player-bar__mobile-select { display: none; }

    .contact {
        grid-template-columns: 1fr 1.3fr;
        align-items: start;
    }
}

/* ================================ 960px+ (laptop) ================================ */
@media (min-width: 960px) {
    .main-nav { display: block; }
    .station-select { display: inline-flex; }

    .site-header__actions .nav-toggle { display: none; }

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

    .ahora-suena {
        grid-template-columns: 1.1fr 0.9fr;
        align-items: start;
    }

    .player-bar__inner {
        grid-template-columns: 1fr auto 1fr;
    }

    .player-bar__volume {
        justify-self: end;
    }
}

/* ================================ 1200px+ (desktop) ================================ */
@media (min-width: 1200px) {
    .stations-grid {
        grid-template-columns: repeat(5, 1fr);
    }

    .hero__title { font-size: var(--fs-4xl); }

    .section { padding-block: var(--sp-9); }
}

/* ================================ 1600px+ (ultrawide) ================================ */
@media (min-width: 1600px) {
    .container {
        max-width: 1440px;
    }

    .hero__content {
        max-width: 820px;
    }
}

/* Pantallas muy pequeñas: reduce ligeramente el hero */
@media (max-width: 380px) {
    .hero { min-height: 78vh; }
    .hero__title { font-size: var(--fs-2xl); }
}