:root {
    --mobile-header-height: 70px;
}

body.menu-open {
    overflow: hidden;
}

/* Tablet */
@media (max-width: 1100px) {
    .new-site-header {
        grid-template-columns: auto 1fr auto;
        gap: 16px;
        padding-inline: 18px;
    }

    .new-brand {
        width: 138px;
    }

    .radio-dashboard {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .radio-dashboard-card {
        min-height: 360px;
    }

    .new-radio-hero-shell {
        grid-template-columns: minmax(0, 1fr) 300px;
        gap: 24px;
    }

    .hero-live-card {
        padding: 16px;
    }

    .hero-live-card-body {
        grid-template-columns: 78px 1fr;
    }

    .hero-live-avatar {
        width: 78px;
        height: 78px;
    }
}

/* Mobiel menu en homepage */
@media (max-width: 900px) {
    .radio-topbar {
        position: relative;
        z-index: 60;
        min-height: 38px;
        grid-template-columns: 1fr auto;
        padding: 7px 14px;
        font-size: .72rem;
    }

    .radio-topbar > strong {
        display: none;
    }

    .socials a {
        width: 22px;
        height: 22px;
        font-size: .7rem;
    }

    .new-site-header {
        position: sticky;
        top: 0;
        z-index: 70;
        min-height: var(--mobile-header-height);
        grid-template-columns: auto 1fr auto;
        padding: 9px 14px;
    }

    .new-brand {
        position: relative;
        z-index: 73;
        width: 128px;
    }

    .new-menu-toggle {
        position: relative;
        z-index: 73;
        display: flex;
        width: 44px;
        height: 44px;
        justify-self: end;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 5px;
        cursor: pointer;
        background: #07172b;
        border: 1px solid #285886;
        border-radius: 9px;
    }

    .new-menu-toggle span {
        width: 21px;
        height: 2px;
        background: #fff;
        transition:
            transform .2s ease,
            opacity .2s ease;
    }

    .new-menu-toggle[aria-expanded="true"] span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .new-menu-toggle[aria-expanded="true"] span:nth-child(2) {
        opacity: 0;
    }

    .new-menu-toggle[aria-expanded="true"] span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    .new-main-nav {
        position: fixed;
        inset: 0;
        z-index: 72;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        gap: 7px;
        overflow-y: auto;
        padding:
            calc(var(--mobile-header-height) + 45px)
            22px
            35px;
        background:
            radial-gradient(
                circle at top right,
                rgba(12, 124, 255, .14),
                transparent 30%
            ),
            rgba(3, 13, 26, .995);
        opacity: 0;
        pointer-events: none;
        transform: translateY(-10px);
        transition:
            opacity .22s ease,
            transform .22s ease;
    }

    .new-main-nav.open {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }

    .new-main-nav a {
        width: min(100%, 360px);
        min-height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-inline: auto;
        padding: 13px 16px;
        font-size: .84rem;
        border: 1px solid rgba(54, 103, 150, .28);
        border-radius: 9px;
        background: rgba(6, 23, 43, .45);
    }

    .new-main-nav a.active,
    .new-main-nav a:hover {
        background: linear-gradient(135deg, #075ee9, #159cff);
        border-color: #3db7ff;
    }

    .header-listen-button {
        display: none;
    }

    .new-radio-hero {
        min-height: auto;
    }

    .new-radio-hero-shell {
        min-height: auto;
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 54px 0 40px;
    }

    .new-radio-hero-copy {
        max-width: 720px;
    }

    .new-radio-hero h1 {
        font-size: clamp(3.2rem, 13vw, 5.5rem);
    }

    .new-radio-hero p {
        font-size: 1rem;
    }

    .hero-live-card {
        width: min(100%, 540px);
        justify-self: start;
    }

    .radio-dashboard {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .radio-dashboard-card {
        min-height: 0;
    }

    .radio-features,
    .radio-benefits {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .radio-footer-main {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .radio-footer-brand,
    .radio-footer-player {
        grid-column: 1 / -1;
    }

    .radio-footer-bottom {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Kleine telefoons */
@media (max-width: 650px) {
    .radio-topbar {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .radio-topbar > div:first-child {
        justify-content: center;
    }

    .socials {
        display: none !important;
    }

    .new-site-header {
        min-height: 66px;
    }

    .new-brand {
        width: 118px;
    }

    .new-radio-hero-shell {
        width: min(100% - 24px, 1250px);
        padding: 38px 0 30px;
    }

    .hero-kicker {
        font-size: .88rem;
    }

    .new-radio-hero h1 {
        margin-top: 8px;
        font-size: clamp(2.9rem, 16vw, 4.6rem);
    }

    .new-radio-hero h2 {
        font-size: 1.3rem;
    }

    .new-hero-actions {
        flex-direction: column;
    }

    .new-primary-button,
    .new-secondary-button {
        width: 100%;
        min-height: 50px;
    }

    .hero-live-card {
        padding: 15px;
    }

    .hero-live-card-body {
        grid-template-columns: 66px minmax(0, 1fr);
        gap: 12px;
    }

    .hero-live-avatar {
        width: 66px;
        height: 66px;
    }

    .hero-live-info strong {
        font-size: .96rem;
    }

    .hero-equalizer {
        height: 45px;
        gap: 3px;
    }

    .radio-dashboard {
        width: min(100% - 22px, 1360px);
        grid-template-columns: 1fr;
        padding-top: 12px;
    }

    .radio-dashboard-card {
        padding: 15px;
        border-radius: 9px;
    }

    .dashboard-card-header {
        align-items: flex-start;
    }

    .home-schedule-item {
        grid-template-columns: 78px minmax(0, 1fr) auto;
        gap: 8px;
    }

    .home-news-item {
        grid-template-columns: 88px minmax(0, 1fr);
    }

    .home-news-image {
        width: 88px;
        height: 68px;
    }

    .home-request-form input {
        min-height: 46px;
    }

    .home-request-form button {
        min-height: 50px;
    }

    .radio-features,
    .radio-benefits {
        grid-template-columns: 1fr;
    }

    .radio-features > div,
    .radio-benefits > div {
        border-right: 0;
        border-bottom: 1px solid #24527f;
    }

    .radio-features > div:last-child,
    .radio-benefits > div:last-child {
        border-bottom: 0;
    }

    .radio-footer-main {
        grid-template-columns: 1fr;
    }

    .radio-footer-brand,
    .radio-footer-player {
        grid-column: auto;
    }

    .radio-footer-column {
        padding: 18px 0 0;
        border-top: 1px solid #173d68;
        border-left: 0;
    }

    .radio-footer-bottom nav {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .footer-play-button {
        width: 52px;
        height: 52px;
    }
}

/* Zeer kleine toestellen */
@media (max-width: 420px) {
    .new-radio-hero-shell {
        width: min(100% - 18px, 1250px);
    }

    .new-radio-hero h1 {
        font-size: 2.75rem;
    }

    .hero-live-card-header h3 {
        font-size: .9rem;
    }

    .home-schedule-item {
        grid-template-columns: 1fr auto;
    }

    .home-schedule-item time {
        grid-column: 1 / -1;
    }

    .home-news-item {
        grid-template-columns: 1fr;
    }

    .home-news-image {
        width: 100%;
        height: 160px;
    }

    .dashboard-card-header {
        flex-direction: column;
    }

    .dashboard-card-header > a {
        align-self: flex-start;
    }
}

/* Betere touchbediening */
@media (pointer: coarse) {
    .new-main-nav a,
    .new-primary-button,
    .new-secondary-button,
    .header-listen-button,
    .home-request-form button,
    .dj-week-button,
    .footer-play-button {
        min-height: 48px;
    }
}