/* ==========================================================================
   mobile-fixes.css — Targeted mobile UI fixes
   No visual redesign — only layout/overflow/spacing corrections.
   ========================================================================== */

/* --- 1. FIND YOUR BOOK — Show only 2 cards on mobile --- */
@media (max-width: 767px) {
    #course-selection-container-wrapper {
        overflow-anchor: none;
    }
    #course-selection-container.grid {
        grid-template-columns: 1fr !important;
    }
    #course-selection-container-wrapper:not([data-expanded="true"]) > #course-selection-container > .course-major-item:nth-child(n+3) {
        display: none !important;
    }
    #course-selection-container-wrapper:not([data-expanded="true"]) > #course-selection-container > .skeleton-card:nth-child(n+3) {
        display: none !important;
    }
    .nb-fyb__popular .all {
        display: none !important;
    }
}

/* --- 2. TOP UNIVERSITY — Hide small photo cards on mobile, keep large nbu__card --- */
@media (max-width: 767px) {
    .nbu__topgrid {
        display: none !important;
    }
    .nbu__all .nbu__topgrid {
        display: none !important;
    }
    .nbu__more {
        display: none !important;
    }
    .nbu__all {
        display: block !important;
    }
    .nbu__all .nbu__redirect { display: block !important; }
    .nbu.is-open .nbu__all .nbu__topgrid { display: grid !important; }
}

/* --- 3. CLAUDE ACADEMY CARD — Fix container clipping --- */
@media (max-width: 767px) {
    #claude-academy-card {
        padding: 12px 10px 40px;
        overflow: visible;
    }
    .nbca {
        overflow: visible;
        border-radius: 24px;
    }
    .nbca__grid {
        padding: 20px 16px 10px;
        gap: 18px;
    }
    .nbca h2 {
        font-size: 1.7rem !important;
    }
    .nbca__search {
        padding: 12px 40px 12px 40px;
        font-size: 0.8rem;
    }
    .nbca__pill {
        padding: 8px 12px;
        font-size: 0.72rem;
    }
    .nbca__art {
        max-width: 100%;
    }
    .nbca__art img {
        max-height: 200px;
        object-fit: contain;
    }
    .nbca__marq {
        padding: 14px 0 20px;
    }
}

/* --- 4. CLAUDE ACADEMY CAROUSEL — Keep autoplay after touch --- */
.nbca__track {
    touch-action: pan-x;
}

/* --- 5. BUY. MEET. EXCHANGE. — Fix text/image overlap + reduce top space --- */
@media (max-width: 640px) {
    #how-it-works.nb-hiw {
        padding-top: 2rem;
    }
    .nb-hiw__hero {
        display: flex;
        flex-direction: column;
        margin-bottom: 20px;
    }
    .nb-hiw__hero img {
        position: relative;
        min-height: 160px;
        object-fit: cover;
        object-position: center;
        order: 1;
    }
    .nb-hiw__copy {
        position: relative;
        inset: auto;
        width: 100% !important;
        background: #fdfdfb !important;
        padding: 20px 18px !important;
        order: 0;
    }
    .nb-hiw__copy h2 {
        font-size: 1.5rem !important;
    }
    .nb-hiw__copy p {
        font-size: 0.82rem !important;
        margin-top: 8px;
    }
}

/* --- 6. FOOTER — Compact mobile layout --- */
@media (max-width: 767px) {
    .footer-premium .f-top {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.5rem 1rem;
    }
    .footer-premium .f-brand {
        grid-column: 1 / -1;
    }
    .footer-premium .f-brand p {
        max-width: 100%;
    }
    .nb-news {
        flex-wrap: wrap;
    }
    .nb-env {
        width: 100% !important;
        min-width: 0;
    }
    .nb-env input {
        min-width: 0;
        flex: 1 1 0;
    }
    .nb-env button {
        flex-shrink: 0;
        padding: 0 16px;
    }
    .footer-premium h4 {
        margin-bottom: 0.7rem;
    }
    .footer-premium ul {
        gap: 0.45rem;
    }
    .footer-premium ul a {
        font-size: 0.85rem;
    }
    .footer-premium .f-bottom {
        margin-top: 2rem;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0.8rem;
    }
    .footer-premium .f-social {
        justify-content: center;
    }
    .footer-premium .f-wrap {
        padding: 2.5rem 1rem calc(5rem + env(safe-area-inset-bottom));
    }
}

/* --- 7. FOOTER END TEXT — refined styling (text updated via JS) --- */
.nb-theend b {
    letter-spacing: 0.15em !important;
    font-size: 0.95rem !important;
}
.nb-theend small {
    font-size: 0.68rem !important;
}
.nb-theend .nb-colophon {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* --- 8. UPDATE PILL — Fix clipping near footer --- */
@media (max-width: 767px) {
    [class*="update-pill"],
    [id*="update-pill"],
    .nb-update-pill,
    #nb-update-pill,
    .nb-version-pill {
        position: fixed !important;
        bottom: calc(70px + env(safe-area-inset-bottom)) !important;
        right: 12px !important;
        z-index: 9980 !important;
        max-width: calc(100vw - 24px);
        overflow: visible !important;
    }
}

/* --- 9. GENERAL MOBILE QUALITY --- */

/* Faster, smoother scroll on mobile only */
@media (max-width: 767px) {
    html {
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
    }
    body {
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: auto;
    }
    main {
        overflow-x: hidden;
    }
    * {
        -webkit-tap-highlight-color: transparent;
    }

    /* Ensure no card exceeds viewport width */
    .course-card,
    .ai-course-card-apple,
    .card-apple-platform,
    .nbu__card,
    .nbu,
    .nb-hiw__hero,
    .nxh-card,
    .nbca,
    section {
        max-width: 100vw;
        box-sizing: border-box;
    }

    /* Fix images that could cause overflow */
    img {
        max-width: 100%;
        height: auto;
    }

    /* Ensure grids don't overflow */
    .grid {
        max-width: 100%;
    }

    /* College essentials cards */
    #college-essentials .grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem;
    }

    /* NEX social card fix */
    .nxh-card {
        flex-direction: column;
        min-height: auto;
    }
}

/* Extra-narrow screens (320px) */
@media (max-width: 360px) {
    .nbca h2 {
        font-size: 1.4rem !important;
    }
    .nbca__pill {
        padding: 6px 10px;
        font-size: 0.66rem;
    }
    .nb-hiw__copy h2 {
        font-size: 1.2rem !important;
    }
    .footer-premium .f-top {
        grid-template-columns: 1fr !important;
    }
    .nbu {
        padding: 18px 12px 22px;
    }
    .nbu__card {
        padding: 10px;
        gap: 10px;
    }
    .nbu__card img {
        width: 80px;
        height: 56px;
    }
    .nbu__card .bk {
        width: 36px;
        height: 36px;
    }
}