/* ===========================
   Tablet (768px – 1024px)
   =========================== */

@media (max-width: 1024px) {
    :root {
        --section-padding: 64px;
    }

    .hero__title {
        font-size: 2.5rem;
    }

    .info-boxes__grid {
        gap: 16px;
    }

    .founders__grid {
        gap: 40px;
    }

    .practical__grid {
        max-width: 100%;
    }

    .cta-box {
        max-width: 100%;
    }
}

/* ===========================
   Tablet portrait (same as mobile header/hero)
   =========================== */

@media (max-width: 1024px) and (orientation: portrait) {
    /* Header & Navigation */

    .header__hamburger {
        display: flex;
    }

    .header__nav {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        height: 100dvh;
        background-color: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 999;
    }

    .header__nav.is-open {
        display: flex;
    }

    .header__nav ul {
        flex-direction: column;
        align-items: center;
        gap: 28px;
    }

    .header__nav a {
        font-size: 1.125rem;
    }

    /* Hero */

    .hero {
        background-image: url('../img/hero-mobile.webp');
        background-position: center;
        padding: 120px 0 320px;
    }

    .hero__content {
        max-width: 70%;
    }
}

/* ===========================
   Mobile (pod 768px)
   =========================== */

@media (max-width: 767px) {
    :root {
        --section-padding: 48px;
        --container-padding: 16px;
    }

    /* Header & Navigation */

    .header__hamburger {
        display: flex;
    }

    .header__nav {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        height: 100dvh;
        background-color: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 999;
    }

    .header__nav.is-open {
        display: flex;
    }

    .header__nav ul {
        flex-direction: column;
        align-items: center;
        gap: 28px;
    }

    .header__nav a {
        font-size: 1.125rem;
    }

    /* Hero */

    .hero {
        background-image: url('../img/hero-mobile.webp');
        background-position: center bottom;
        padding: 120px 0 320px;
    }

    .hero__title {
        font-size: 2rem;
    }

    .hero__text {
        font-size: 1rem;
    }

    .hero__content {
        max-width: 100%;
    }

    /* Info Boxes */

    .info-boxes {
        margin-top: -40px;
    }

    .info-boxes__grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    /* Sections */

    .section-title {
        font-size: 1.75rem;
    }

    .subpage-hero {
        padding: 120px 0 40px;
    }

    .subpage-hero .section-title {
        font-size: 2.25rem;
    }

    /* Program */

    .program__buttons {
        flex-direction: column;
        align-items: center;
    }

    .program__buttons .btn {
        width: 100%;
        max-width: 340px;
    }

    /* Tabs */

    .tabs__list {
        flex-direction: column;
        align-items: center;
    }

    .tabs__list .btn {
        width: 100%;
        max-width: 340px;
    }

    .tabs__panel {
        padding: 28px 22px;
    }

    .legal__h2 {
        font-size: 1.5rem;
    }

    /* Events */

    .event-card {
        grid-template-columns: 1fr;
        text-align: left;
    }

    .event-card__date {
        text-align: left;
        display: block;
        padding: 12px;
    }

    .event-card__weekday {
        margin-bottom: 6px;
    }

    /* Contact */

    .contact-layout {
        grid-template-columns: 1fr;
    }

    .contact-card {
        padding: 28px 22px;
    }

    .contact-map__frame iframe {
        height: min(60vh, 420px);
    }

    /* Founders */

    .founders__grid {
        flex-direction: column;
        align-items: center;
        gap: 40px;
    }

    .founder {
        max-width: 100%;
    }

    /* Gallery */

    .gallery__arrow {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }

    /* Practical */

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

    .practical__item {
        grid-template-columns: 1fr;
        row-gap: 4px;
    }

    /* CTA */

    .cta-box {
        padding: 40px 24px;
        max-width: 100%;
    }

    .cta-box__title {
        font-size: 1.9rem;
    }

    /* Footer */

    .footer__nav ul {
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }
}