/* =====================================================
   MOBILE OVERRIDES — max-width: 768px
   All rules here apply ONLY on small screens.
   Desktop styles in main.css are completely untouched.
   ===================================================== */

@media (max-width: 768px) {

    /* ── GLOBAL SCROLL FIX ────────────────────────────
       Desktop locks height+overflow for the sidebar-style
       layout. On mobile we release this so pages scroll. */
    body {
        height: auto !important;
        overflow: auto !important;
    }

    #outerContainer {
        height: auto !important;
        overflow: visible !important;
    }

    main.container-fluid {
        overflow-y: visible !important;
        flex: none !important;
    }

    main.container-fluid > div {
        flex: none !important;
        min-height: unset !important;
    }

    /* ── NAVBAR ───────────────────────────────────────*/
    #mainNav .navbar-brand {
        padding-left: 12px !important;
        font-size: clamp(1rem, 5vw, 1.4rem) !important;
        letter-spacing: 1px !important;
    }

    #nav-options {
        padding-right: 12px !important;
    }

    #poemSearchForm input {
        max-width: 100% !important;
        width: 100%;
    }

    /* ── HOME / LANDING HERO ──────────────────────────*/
    .landing-page-title {
        font-size: clamp(2rem, 8vw, 3rem) !important;
    }

    .landing-page-subtitle {
        font-size: 1rem !important;
    }

    /* ── GENRES GALLERY ───────────────────────────────
       Make genre card rows wrap instead of scrolling off-screen. */
    #card-container {
        margin-top: 30px !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .individualRowCards .d-flex.flex-row {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 16px !important;
    }

    .genre-card {
        width: clamp(130px, 40vw, 160px) !important;
        height: clamp(130px, 40vw, 160px) !important;
        min-height: unset !important;
        min-width: unset !important;
    }

    /* Inline min-height/min-width hardcoded on genre cards */
    .genre-card[style] {
        min-height: unset !important;
        min-width: unset !important;
    }

    /* ── FEATURED PAGE CAROUSEL ───────────────────────*/
    .carousel.slide {
        height: 420px !important;
    }

    .carousel-inner,
    .carousel-item {
        height: 100% !important;
    }

    /* ── READ POEM HERO ───────────────────────────────*/
    .poem-hero {
        height: 320px !important;
    }

    /* ── AUTH PAGES ───────────────────────────────────*/
    .auth-container {
        margin: 30px auto !important;
        padding: 24px !important;
        max-width: 95vw !important;
    }

    /* ── GENRE TEMPLATE PAGE ──────────────────────────*/
    .genre-template-page .m-xl-5,
    .genre-template-page .p-xl-5 {
        margin: 0 !important;
        padding: 0 !important;
    }

    /* ── FEATURED PAGE CATEGORY ROWS ─────────────────*/
    .featuredPage .card-group,
    [th\\:fragment="featuredPage"] .card-group {
        flex-direction: column !important;
    }

    /* Make featured page category cards stack vertically */
    .card-group {
        flex-direction: column !important;
        gap: 16px !important;
    }

    .card-group .card {
        width: 100% !important;
        margin-bottom: 0 !important;
    }

    /* ── PUBLISH PAGE ─────────────────────────────────*/
    .publish-page {
        padding: 16px !important;
    }

    /* ── FOOTER ───────────────────────────────────────*/
    footer {
        padding: 16px !important;
        font-size: 0.8rem;
    }

    /* ── ADMIN DASHBOARD ──────────────────────────────*/
    .admin-dashboard .col-md-6 {
        margin-bottom: 16px;
    }
}