/* ═══════════════════════════════════════════════════════════════════════
   Lyra Image & Video Carousel — frontend styles

   The PHP renderer emits per-instance scoped rules inline (slides-per-view
   geometry, transition timing, arrow/dot colors, caption typography,
   media overlay gradient, split-mode width/alignment, heading/body
   typography, drop cap, gradient text fill). The global rules below
   cover:
     - Outer block-alignment wrapper (centered / left / right when
       max-width is set on the inner box)
     - Carousel chrome — viewport, track, slides, arrows, dots
     - Aspect-ratio modifiers and object-fit modifiers for media
     - Caption position variants (overlay-bottom / overlay-center / below)
     - Split layout flex container + side-swap + mobile stack-order
     - Lightbox modal styles
     - Animation initial states + keyframes for all 7 entrance types
     - prefers-reduced-motion fallback

   Per-instance CSS variables driving the entrance animation:
     --lyra-bt-ivc-anim-duration  (e.g. 600ms)
     --lyra-bt-ivc-anim-delay     (e.g. 0ms)
     --lyra-bt-ivc-anim-easing    (e.g. ease-out)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Outer wrapper ────────────────────────────────────────────────────── */
.lyra-bt-ivc-wrap { display: block; }
.lyra-bt-ivc-wrap--align-left   .lyra-bt-ivc { margin-left: 0;    margin-right: auto; }
.lyra-bt-ivc-wrap--align-center .lyra-bt-ivc { margin-left: auto; margin-right: auto; }
.lyra-bt-ivc-wrap--align-right  .lyra-bt-ivc { margin-left: auto; margin-right: 0;    }

/* ── Box ──────────────────────────────────────────────────────────────── */
.lyra-bt-ivc {
    box-sizing: border-box;
    position: relative;
    /* Per-instance rules (padding, bg, border, max-width) emitted inline. */
}
.lyra-bt-ivc *,
.lyra-bt-ivc *::before,
.lyra-bt-ivc *::after { box-sizing: border-box; }

/* Empty state (admins only) */
.lyra-bt-ivc--empty {
    padding: 14px 18px;
    border: 1px dashed #cbd5e1;
    background: #f8fafc;
    color: #64748b;
    border-radius: 6px;
}

/* ── Carousel chrome ──────────────────────────────────────────────────── */
.lyra-bt-ivc__carousel {
    position: relative;
    width: 100%;
}
.lyra-bt-ivc__viewport {
    position: relative;
    overflow: hidden;
    width: 100%;
}
.lyra-bt-ivc__track {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    /* gap + transition: transform are emitted per-instance */
    will-change: transform;
}

/* ── Slide ─────────────────────────────────────────────────────────────── */
.lyra-bt-ivc__slide {
    position: relative;
    /* flex sizing emitted per-instance for slides-per-view */
    min-width: 0; /* prevent flex children from overflowing */
}

/* ── Media wrapper ─────────────────────────────────────────────────────── */
.lyra-bt-ivc__media {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #000;
}

/* ── Aspect ratio modifiers (applied to .lyra-bt-ivc__media via class on root) */
.lyra-bt-ivc--ratio-16-9 .lyra-bt-ivc__media { aspect-ratio: 16 / 9; }
.lyra-bt-ivc--ratio-4-3  .lyra-bt-ivc__media { aspect-ratio: 4 / 3;  }
.lyra-bt-ivc--ratio-1-1  .lyra-bt-ivc__media { aspect-ratio: 1 / 1;  }
.lyra-bt-ivc--ratio-21-9 .lyra-bt-ivc__media { aspect-ratio: 21 / 9; }
.lyra-bt-ivc--ratio-3-2  .lyra-bt-ivc__media { aspect-ratio: 3 / 2;  }
/* original — no aspect-ratio constraint; height is natural */
.lyra-bt-ivc--ratio-original .lyra-bt-ivc__media { aspect-ratio: auto; }

/* ── Image / video / iframe inside media ──────────────────────────────── */
.lyra-bt-ivc__img,
.lyra-bt-ivc__video,
.lyra-bt-ivc__iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
}
/* original-aspect mode: media is natural height, img is positioned
   relatively rather than absolutely */
.lyra-bt-ivc--ratio-original .lyra-bt-ivc__img,
.lyra-bt-ivc--ratio-original .lyra-bt-ivc__video,
.lyra-bt-ivc--ratio-original .lyra-bt-ivc__iframe {
    position: relative;
    height: auto;
    inset: auto;
}

/* Fit modifiers (only meaningful with fixed aspect ratio) */
.lyra-bt-ivc--fit-cover   .lyra-bt-ivc__img,
.lyra-bt-ivc--fit-cover   .lyra-bt-ivc__video { object-fit: cover;   }
.lyra-bt-ivc--fit-contain .lyra-bt-ivc__img,
.lyra-bt-ivc--fit-contain .lyra-bt-ivc__video { object-fit: contain; }

/* Link wrap on the media (when slide has a link) */
.lyra-bt-ivc__link {
    display: block;
    width: 100%;
    height: 100%;
    color: inherit;
    text-decoration: none;
}
.lyra-bt-ivc--ratio-original .lyra-bt-ivc__link { height: auto; }

/* Video fallback (unknown URL format) */
.lyra-bt-ivc__video-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: #111;
    color: #fff;
    text-decoration: underline;
    word-break: break-all;
    padding: 16px;
}
.lyra-bt-ivc__video-fallback img { width: 100%; height: 100%; object-fit: cover; }

/* ── Media overlay (gradient over image/video) ────────────────────────── */
.lyra-bt-ivc__media-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    /* background-image emitted per-instance only when media_overlay_enabled */
    background-image: none;
}
/* When overlay is enabled, ensure it sits above media but below caption */
.lyra-bt-ivc--has-overlay .lyra-bt-ivc__media-overlay { z-index: 1; }

/* ── Caption — three positions ────────────────────────────────────────── */
.lyra-bt-ivc__caption {
    /* Per-instance: font-size, line-height, letter-spacing, text-transform,
       font-weight, padding, color, background-color, text-align */
    box-sizing: border-box;
    z-index: 2;
}
.lyra-bt-ivc__caption--overlay-bottom {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
}
.lyra-bt-ivc__caption--overlay-center {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.lyra-bt-ivc__caption--below {
    position: relative;
    width: 100%;
    /* No background by default (background-color is configurable but
       overlay positions are the typical use-case for it); admin can still
       set one. */
}

/* ── Arrows ────────────────────────────────────────────────────────────── */
.lyra-bt-ivc__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    /* color + background-color emitted per-instance */
}
.lyra-bt-ivc__arrow:hover { transform: translateY(-50%) scale(1.05); }
.lyra-bt-ivc__arrow:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.lyra-bt-ivc__arrow--prev { left: 12px; }
.lyra-bt-ivc__arrow--next { right: 12px; }
.lyra-bt-ivc__arrow svg { width: 22px; height: 22px; display: block; }
.lyra-bt-ivc__arrow[disabled] { opacity: 0.4; cursor: not-allowed; }

/* ── Dots ──────────────────────────────────────────────────────────────── */
.lyra-bt-ivc__dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
}
.lyra-bt-ivc__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 0;
    padding: 0;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
    /* background-color emitted per-instance */
}
.lyra-bt-ivc__dot:hover,
.lyra-bt-ivc__dot:focus-visible { opacity: 1; transform: scale(1.15); outline: none; }
.lyra-bt-ivc__dot.is-active { opacity: 1; transform: scale(1.2); }
/* Dots can be hidden by JS at runtime when slides-per-view changes the
   page count. JS toggles .is-hidden on dots that don't represent a page
   in the current SPV. */
.lyra-bt-ivc__dot.is-hidden { display: none; }

/* ── Fade transition mode ─────────────────────────────────────────────── */
/* In fade mode the track doesn't translate — slides stack on top of each
   other and only the active one is opaque. Track keeps its flex layout
   but its width is forced to viewport width (one slide wide). */
.lyra-bt-ivc__carousel[data-transition="fade"] .lyra-bt-ivc__track {
    position: relative;
    transform: none !important;
    transition: none !important;
}
.lyra-bt-ivc__carousel[data-transition="fade"] .lyra-bt-ivc__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    flex: 0 0 100% !important;
    max-width: 100% !important;
    /* Transition timing is set on the per-instance .slide rule */
}
.lyra-bt-ivc__carousel[data-transition="fade"] .lyra-bt-ivc__slide.is-active {
    opacity: 1;
    pointer-events: auto;
    z-index: 1;
}
.lyra-bt-ivc__carousel[data-transition="fade"] .lyra-bt-ivc__viewport {
    /* Force a height since absolutely-positioned slides collapse the
       viewport height. The first slide is left static-positioned (and
       initially opaque) to give the viewport a height before JS adds
       .is-active. JS will toggle .is-active appropriately on init. */
}
.lyra-bt-ivc__carousel[data-transition="fade"] .lyra-bt-ivc__slide:first-child {
    position: relative;
    opacity: 1; /* visible on initial paint; JS may swap to another active slide after */
    pointer-events: auto;
}
/* Once JS has booted (data-lyra-bt-init=1), the cascade above is overridden
   by the .is-active rule for whichever slide is current. If JS never
   runs (unlikely — no JS = no carousel anyway), the user still sees the
   first slide. */
.lyra-bt-ivc[data-lyra-bt-init="1"] .lyra-bt-ivc__carousel[data-transition="fade"] .lyra-bt-ivc__slide:first-child:not(.is-active) {
    opacity: 0;
    pointer-events: none;
}

/* ── Split mode (Heading and Text) ────────────────────────────────────── */
.lyra-bt-ivc__split {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    /* column-gap + align-items emitted per-instance */
}
/* Side swap: text-side default order is 0, media-side is 1.
   When --split--right, swap with flex order. */
.lyra-bt-ivc__split--left  .lyra-bt-ivc__text-side  { order: 0; }
.lyra-bt-ivc__split--left  .lyra-bt-ivc__media-side { order: 1; }
.lyra-bt-ivc__split--right .lyra-bt-ivc__text-side  { order: 1; }
.lyra-bt-ivc__split--right .lyra-bt-ivc__media-side { order: 0; }

/* Mobile stack: media-first inverts the order on narrow screens. */
@media (max-width: 768px) {
    .lyra-bt-ivc__split--mobile-text_first  .lyra-bt-ivc__text-side  { order: 0; }
    .lyra-bt-ivc__split--mobile-text_first  .lyra-bt-ivc__media-side { order: 1; }
    .lyra-bt-ivc__split--mobile-media_first .lyra-bt-ivc__text-side  { order: 1; }
    .lyra-bt-ivc__split--mobile-media_first .lyra-bt-ivc__media-side { order: 0; }
}

.lyra-bt-ivc__text-side {
    /* width emitted per-instance for desktop;
       100% on mobile via media query in build_style_tag */
}
.lyra-bt-ivc__media-side {
    /* width emitted per-instance */
}

/* Eyebrow / heading / body typography defaults; per-instance overrides
   layered on top via the inline <style>. */
.lyra-bt-ivc__eyebrow {
    font-size: 0.82em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.6em;
    /* color emitted per-instance */
}
.lyra-bt-ivc__heading {
    /* font-size/weight/etc emitted per-instance */
}
.lyra-bt-ivc__body {
    /* font-size/line-height/color emitted per-instance */
}
.lyra-bt-ivc__body > p:first-child  { margin-top: 0; }
.lyra-bt-ivc__body > p:last-child   { margin-bottom: 0; }

/* ── Lightbox ─────────────────────────────────────────────────────────── */
/* The lightbox modal is appended to body by JS. We scope all styles
   under .lyra-bt-ivc-lightbox so a single global-z-index modal works across
   all carousels on the page (only one is open at a time). */
.lyra-bt-ivc-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: lyra-bt-ivc-lb-fade-in 0.2s ease;
}
.lyra-bt-ivc-lightbox__inner {
    position: relative;
    max-width: 95vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.lyra-bt-ivc-lightbox__img {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
    border-radius: 4px;
}
.lyra-bt-ivc-lightbox__caption {
    color: #fff;
    margin-top: 12px;
    font-size: 14px;
    text-align: center;
    max-width: 80vw;
}
.lyra-bt-ivc-lightbox__close,
.lyra-bt-ivc-lightbox__nav {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: background 0.2s ease;
    z-index: 1;
}
.lyra-bt-ivc-lightbox__close:hover,
.lyra-bt-ivc-lightbox__nav:hover { background: rgba(255, 255, 255, 0.3); }
.lyra-bt-ivc-lightbox__nav { top: 50%; transform: translateY(-50%); }
.lyra-bt-ivc-lightbox__nav--prev { left: 16px; right: auto; }
.lyra-bt-ivc-lightbox__nav--next { right: 16px; }
.lyra-bt-ivc-lightbox__nav svg,
.lyra-bt-ivc-lightbox__close svg { width: 20px; height: 20px; }

@keyframes lyra-bt-ivc-lb-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Cursor on lightbox-eligible image slides */
.lyra-bt-ivc__carousel[data-lightbox="1"] .lyra-bt-ivc__slide--image[data-lightbox-src] .lyra-bt-ivc__media {
    cursor: zoom-in;
}

/* ── Animation initial states ─────────────────────────────────────────── */
.lyra-bt-ivc--has-anim {
    opacity: 0;
}
.lyra-bt-ivc--anim-fade-in.is-visible {
    animation: lyra-bt-ivc-fade-in var(--lyra-bt-ivc-anim-duration, 600ms) var(--lyra-bt-ivc-anim-easing, ease-out) var(--lyra-bt-ivc-anim-delay, 0ms) forwards;
}
.lyra-bt-ivc--anim-slide-up.is-visible {
    animation: lyra-bt-ivc-slide-up var(--lyra-bt-ivc-anim-duration, 600ms) var(--lyra-bt-ivc-anim-easing, ease-out) var(--lyra-bt-ivc-anim-delay, 0ms) forwards;
}
.lyra-bt-ivc--anim-slide-from-left.is-visible {
    animation: lyra-bt-ivc-slide-from-left var(--lyra-bt-ivc-anim-duration, 600ms) var(--lyra-bt-ivc-anim-easing, ease-out) var(--lyra-bt-ivc-anim-delay, 0ms) forwards;
}
.lyra-bt-ivc--anim-slide-from-right.is-visible {
    animation: lyra-bt-ivc-slide-from-right var(--lyra-bt-ivc-anim-duration, 600ms) var(--lyra-bt-ivc-anim-easing, ease-out) var(--lyra-bt-ivc-anim-delay, 0ms) forwards;
}
.lyra-bt-ivc--anim-zoom-in.is-visible {
    animation: lyra-bt-ivc-zoom-in var(--lyra-bt-ivc-anim-duration, 600ms) var(--lyra-bt-ivc-anim-easing, ease-out) var(--lyra-bt-ivc-anim-delay, 0ms) forwards;
}
.lyra-bt-ivc--anim-blur-in.is-visible {
    animation: lyra-bt-ivc-blur-in var(--lyra-bt-ivc-anim-duration, 600ms) var(--lyra-bt-ivc-anim-easing, ease-out) var(--lyra-bt-ivc-anim-delay, 0ms) forwards;
}

/* Keyframes — block-level entrance animations */
@keyframes lyra-bt-ivc-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes lyra-bt-ivc-slide-up {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0);    }
}
@keyframes lyra-bt-ivc-slide-from-left {
    from { opacity: 0; transform: translateX(-48px); }
    to   { opacity: 1; transform: translateX(0);     }
}
@keyframes lyra-bt-ivc-slide-from-right {
    from { opacity: 0; transform: translateX(48px); }
    to   { opacity: 1; transform: translateX(0);    }
}
@keyframes lyra-bt-ivc-zoom-in {
    from { opacity: 0; transform: scale(0.92); }
    to   { opacity: 1; transform: scale(1);    }
}
@keyframes lyra-bt-ivc-blur-in {
    from { opacity: 0; filter: blur(8px); }
    to   { opacity: 1; filter: blur(0);   }
}

/* Reduced motion: no entrance animation, no track translate transition. */
@media (prefers-reduced-motion: reduce) {
    .lyra-bt-ivc--has-anim,
    .lyra-bt-ivc--has-anim.is-visible {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
    .lyra-bt-ivc__track,
    .lyra-bt-ivc__slide {
        transition: none !important;
    }
    .lyra-bt-ivc-lightbox {
        animation: none !important;
    }
}