/* ==========================================================================
   Fantel — system-wide mobile responsiveness
   ========================================================================== */

html {
    overflow-x: clip;
}

/* ---- Touch-friendly controls on phones/tablets ---- */
@media (max-width: 1023px) {
    .rt-mobile-toggle,
    .adm-header__toggle,
    .rt-mobile-filter-btn,
    .auth-toggle-pw,
    .stud-player-mobile-toggle,
    .stud-player-close,
    .rt-popular-nav__btn,
    .adm-table-action,
    .adm-btn--sm.stud-player-mobile-toggle {
        min-width: 2.75rem;
        min-height: 2.75rem;
    }

    .rt-mobile-toggle,
    .adm-header__toggle,
    .rt-mobile-filter-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* ---- Marketing header & mobile drawer ---- */
@media (max-width: 1023px) {
    /* Keep the open header (and therefore its drawer) above every page hero,
       image slider, and stats card, regardless of the page being viewed. */
    .rt-header,
    .rt-header--tiered {
        z-index: 1000;
    }

    .rt-header--menu-open,
    .rt-header--tiered.rt-header--menu-open {
        z-index: 1200;
    }

    /* Desktop primary nav hides on tablet/phone — lives here so it does not
       depend on home.css being loaded on every route. */
    .rt-header-main__inner {
        grid-template-columns: 1fr auto;
    }

    .rt-nav {
        display: none !important;
    }

    .rt-header-utils .rt-search-btn,
    .rt-header-utils .rt-lang {
        display: none !important;
    }

    .rt-mobile-nav-link,
    button.rt-mobile-nav-link {
        min-height: 3.15rem;
    }
}

@media (max-width: 640px) {
    .rt-hero-content {
        padding: 2.5rem 1.25rem 3.5rem !important;
    }

    .rt-hero-dot {
        min-width: 2.75rem;
        min-height: 2.75rem;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .rt-container {
        padding-inline: 1rem;
    }
}

/* ---- Portal shells: sidebar overlay + scroll lock ---- */
@media (max-width: 1023px) {
    .adm-body--sidebar-open {
        overflow: hidden;
        touch-action: none;
    }

    .adm-body--sidebar-open .adm-shell::after {
        content: '';
        position: fixed;
        inset: 0;
        z-index: 35;
        background: rgba(6, 16, 31, 0.45);
        backdrop-filter: blur(2px);
    }

    .adm-sidebar.is-mobile-open,
    .adm-sidebar.is-open {
        transform: translateX(0);
        z-index: 40;
    }

    .adm-content {
        padding: 1rem 1rem 2rem;
    }

    .adm-content .overflow-hidden:has(table),
    .adm-content div:has(> table.min-w-full) {
        overflow-x: auto !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch;
    }

    .adm-header__inner {
        padding-inline: 0.75rem;
        gap: 0.5rem;
    }

    .adm-header__chip span:not(.sr-only):not(.adm-header__badge) {
        display: none;
    }
}

@media (max-width: 640px) {
    .adm-content {
        padding: 0.85rem 0.75rem 1.75rem;
    }

    .adm-inner-title {
        font-size: 1.2rem;
        line-height: 1.35;
    }

    .adm-metric-grid {
        grid-template-columns: 1fr 1fr !important;
    }
}

@media (max-width: 400px) {
    .adm-metric-grid {
        grid-template-columns: 1fr !important;
    }
}


/* ---- Auth flows ---- */
@media (max-width: 640px) {
    .auth-row-2 {
        grid-template-columns: 1fr !important;
    }

    .auth-split-brand {
        padding: 1.5rem 1.25rem;
    }

    .auth-split-stats {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.65rem;
    }

    .auth-split-card-inner,
    .auth-register-card {
        padding-inline: 1.15rem;
    }

    .auth-site-main .auth-split {
        flex-direction: column;
    }
}

/* ---- Course catalog ---- */
@media (max-width: 400px) {
    .rt-catalog-grid {
        grid-template-columns: 1fr !important;
    }

    .rt-catalog-footer {
        flex-direction: column;
        align-items: stretch;
        gap: 0.65rem;
    }

    .rt-btn-enroll {
        width: 100%;
        text-align: center;
        white-space: normal;
    }
}

@media (max-width: 1023px) {
    .rt-filters-backdrop {
        position: fixed;
        inset: 0;
        z-index: 190;
        background: rgba(6, 16, 31, 0.4);
    }

    .rt-catalog.rt-catalog--filters-open {
        overflow: hidden;
    }

    .rt-filters-wrap.is-open {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 200;
        max-height: min(75dvh, 560px);
        overflow-y: auto;
        background: #fff;
        border-radius: 1.25rem 1.25rem 0 0;
        padding: 1.25rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom, 0px));
        box-shadow: 0 -12px 40px rgba(30, 58, 138, 0.18);
        margin-bottom: 0 !important;
    }
}

/* ---- Student learning ---- */
@media (max-width: 480px) {
    .stud-course-list__item {
        flex-direction: column;
    }

    .stud-course-list__thumb {
        width: 100%;
    }
}

@media (max-width: 1023px) {
    .stud-player__backdrop {
        position: fixed;
        inset: 0;
        z-index: 55;
        background: rgba(6, 16, 31, 0.45);
    }

    .stud-player-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        line-height: 1;
        padding: 0.35rem;
    }
}

/* ---- Identity language switcher (portal headers) ---- */
.id-lang--compact .id-lang__trigger {
    min-width: 2.5rem;
    min-height: 2.5rem;
    padding: 0.5rem 0.65rem;
}

@media (max-width: 1023px) {
    .id-lang--compact .id-lang__trigger {
        padding: 0.5rem;
    }
}

/* ---- Public / marketing page content ---- */
@media (max-width: 640px) {
    .rt-site-main section.mx-auto,
    .rt-site-main .mx-auto.max-w-7xl,
    .rt-site-main .mx-auto.max-w-4xl {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .rt-footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .rt-footer-grid {
        grid-template-columns: 1fr !important;
        gap: 2rem;
    }

    .rt-footer-newsletter {
        flex-direction: column;
        align-items: stretch;
        text-align: left;
    }

    /* Once the band stacks vertically, the form must not inherit the
       horizontal `flex: 1 1 320px` as a 320px HEIGHT (which stretched the
       pill input/button into giant ovals). Reset it to size by content. */
    .rt-footer-newsletter__form {
        flex: 0 0 auto;
        width: 100%;
        max-width: none;
        align-items: center;
    }

    .rt-footer-newsletter__input {
        height: 3rem;
    }

    .rt-footer-newsletter__btn {
        white-space: nowrap;
    }
}

@media (max-width: 420px) {
    .rt-footer-newsletter__form {
        flex-direction: column;
        align-items: stretch;
    }

    .rt-footer-newsletter__btn {
        width: 100%;
    }
}

/* ---- Course show page ---- */
@media (max-width: 1023px) {
    .rt-course-hero__grid,
    .rt-course-layout {
        grid-template-columns: 1fr !important;
    }

    .rt-course-sidebar {
        position: static;
        width: 100%;
        max-width: none;
    }
}

/* ---- Checkout ---- */
@media (max-width: 640px) {
    .rt-checkout {
        grid-template-columns: 1fr !important;
        gap: 1.25rem;
    }
}

/* ---- Safe area for notched devices ---- */
@supports (padding: env(safe-area-inset-bottom)) {
    .wlc-foot,
    .rt-mobile-menu__footer,
    .rt-footer {
        padding-bottom: calc(1rem + env(safe-area-inset-bottom));
    }
}