/* ========================================================================
   CLS FIX — Cumulative Layout Shift patches for Tocanime Theme
   Target: CLS < 0.1 (was 0.584)
   ======================================================================== */

/* -------------------------------------------------------------------------
   1. CAROUSEL INITIAL SIZE — biggest CLS source
   Flickity carousels render as raw divs → JS transforms them.
   Reserve space BEFORE JS runs so layout doesn't jump.
   ------------------------------------------------------------------------- */

/* Hero/banner carousel — reserve space based on viewport */
.bn-carousel {
    min-height: 180px;
    position: relative;
    overflow: hidden;
}

/* Taxonomy featured carousel */
.taxonomy-featured-carousel {
    min-height: 280px;
    position: relative;
    overflow: hidden;
}

/* Playlist carousel (genre tabs etc.) */
.pl-carousel {
    min-height: 44px;
    position: relative;
    overflow: hidden;
}

/* Flickity cell dimensions — set BEFORE JS inits */
.tani-carousel .flickity-viewport {
    min-height: 200px;
}

/* Reserve height so content below carousel doesn't jump */
.tani-carousel {
    min-height: 200px;
    position: relative;
}

/* -------------------------------------------------------------------------
   2. BANNER IMAGE — explicit aspect ratio + size
   .bn-carousel-img had padding-bottom: 28.125% but no height: 0
   → padding trick broken → ảnh load gây shift
   ------------------------------------------------------------------------- */

.bn-carousel-img {
    /* MUST set height: 0 for padding-bottom % to work */
    height: 0 !important;
    padding-bottom: 28.125% !important;
    min-height: 0 !important;       /* kill conflicting min-height: 200px */
    background: #010609;
}

.bn-carousel-img .card-img-cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Keep mobile min-height */
@media (max-width: 767.98px) {
    .bn-carousel-img {
        padding-bottom: 40% !important;  /* taller on mobile */
    }
    .bn-carousel {
        min-height: 140px;
    }
}

/* -------------------------------------------------------------------------
   3. CARD IMAGE GRID — aspect ratio lock
   .card-item-img.r43 uses padding-top trick but needs height: 0
   và overflow: hidden (đã có) để aspect-ratio % hoạt động chính xác
   ------------------------------------------------------------------------- */

/* Fix: .r43 need explicit height: 0 for padding-top % to work */
.card-item-img.r43,
.card-item-img.r169,
.card-item-img.r11 {
    height: 0 !important;
    overflow: hidden !important;
}

/* -------------------------------------------------------------------------
   4. SEARCH RESULTS — prevent layout shift from AJAX dropdown
   #result / #result-mobile are injected dynamically.
   Use position: absolute so they overlay, not push content down.
   ------------------------------------------------------------------------- */

#result,
#result-mobile {
    position: absolute !important;
    z-index: 1060;
    width: 100%;
    max-height: 380px;
    overflow-y: auto;
    background: var(--bg-card, #22232a);
    border: 1px solid var(--border, #2a2b35);
    border-radius: var(--radius, 8px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    top: 100%;
    left: 0;
    margin-top: 2px;
}

/* Ensure the parent search box has position context */
.search-box {
    position: relative !important;
}

/* -------------------------------------------------------------------------
   5. FONT SWAP — reduce text reflow with size-adjust
   Montserrat metrics differ from fallback Segoe UI/Arial.
   This keeps fallback text ~same width as loaded font.
   ------------------------------------------------------------------------- */

@font-face {
    font-family: 'Montserrat-fallback';
    font-style: normal;
    font-weight: 400;
    src: local('Segoe UI'), local('Arial');
    size-adjust: 103%;
    ascent-override: 93%;
    descent-override: 23%;
}

/* Apply to body — fallback font has ~same metrics as Montserrat */
body {
    font-family: 'Montserrat', 'Montserrat-fallback', 'Segoe UI', Arial, sans-serif;
}

/* -------------------------------------------------------------------------
   6. IMAGES — explicit width/height attributes preserved
   Prevent browser from not knowing image size before load.
   card-img-cover already has width/height attrs on <img> — ensure
   the parent respects these sizes.
   ------------------------------------------------------------------------- */

/* Ensure card images don't grow before load */
.card-img-cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}

/* Taxonomy featured image — same fix */
.taxonomy-featured-img .card-img-cover {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}

/* -------------------------------------------------------------------------
   7. ADS / DYNAMIC CONTENT — prevent insertion shift
   If theme/widget injects ads or dynamic content, reserve space.
   (Add selectors matching your ad placements)
   ------------------------------------------------------------------------- */

/* Placeholder: if you have ad slots, uncomment and adjust
.ad-slot {
    min-height: 90px;
    background: transparent;
}
*/

/* -------------------------------------------------------------------------
   8. PREVENT FOUC — hide carousel until JS ready (graceful degrade)
   ------------------------------------------------------------------------- */

/* Flickity adds .flickity-enabled after init.
   Before that, cells are laid out vertically → huge shift.
   Force horizontal scroll until JS kicks in. */
.tani-carousel:not(.flickity-enabled) {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scroll-snap-type: x mandatory;
}

.tani-carousel:not(.flickity-enabled) > * {
    flex: 0 0 auto;
    scroll-snap-align: start;
}

/* -------------------------------------------------------------------------
   9. BOOTSTRAP NAVBAR — prevent mobile menu toggle layout shift
   ------------------------------------------------------------------------- */

/* Collapsed navbar — reserve height for toggle button */
.navbar-collapse.collapse:not(.show) {
    display: none;
}

/* -------------------------------------------------------------------------
   10. SINGLE PAGE — movie thumb image aspect ratio
   .movie-thumb .img — needs explicit ratio to prevent shift
   ------------------------------------------------------------------------- */

.movie-thumb {
    position: relative;
}

.movie-thumb .img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 3;        /* 300×450 → 2:3 */
    object-fit: cover;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}