/* =========================================================
   CMS Lightbox — własny plugin, bez zewnętrznych bibliotek

   Stałe animacji (muszą zgadzać się z wartościami w JS):
   --cms-lb-slide-speed:    400ms   (TRANSITION_SPEED)
   --cms-lb-backdrop-speed: 300ms   (BACKDROP_SPEED)
   --cms-lb-soft-speed:     300ms   (zoom / thumbs / open-fade)
   Easing: ease (SLIDE_EASING)
   ========================================================= */

/* ── CSS Custom Properties ─────────────────────────────── */

.cms-lightbox {
    --cms-lb-slide-speed:    400ms;
    --cms-lb-backdrop-speed: 300ms;
    --cms-lb-soft-speed:     300ms;
    --cms-lb-easing:         ease;
    --cms-lb-thumb-width:    100px;
    --cms-lb-thumb-height:   80px;
    --cms-lb-thumb-gap:      5px;
    --cms-lb-thumb-bar:      96px;    /* height of thumbnails strip */
    --cms-lb-toolbar-h:      44px;    /* height of top toolbar */
    --cms-lb-arrow-zone:     64px;    /* left/right space for prev/next arrows */
    /* ── spacing ─────────────────────────────────────────────────────────── */
    --cms-lb-media-gap:       18px;   /* gap between media-group and stage edges */
    --cms-lb-bottom-safe-gap: 56px;   /* stage bottom when no thumbs */
    /* Max height reserved for caption in viewport-calc formulas */
    --cms-lb-caption-max-h:   clamp(60px, 18vh, 160px);
}

/* ── Keyframes ─────────────────────────────────────────── */

@keyframes cms-lb-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes cms-lb-fade-out {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* ── Root overlay ──────────────────────────────────────── */

.cms-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #000;
}

.cms-lightbox.is-open {
    display: block;
    animation: cms-lb-fade-in var(--cms-lb-backdrop-speed) var(--cms-lb-easing) forwards;
}

.cms-lightbox.is-open.is-closing {
    animation: cms-lb-fade-out var(--cms-lb-backdrop-speed) var(--cms-lb-easing) forwards;
    pointer-events: none;
}

/* ── Backdrop — transparent, for click detection only ──── */

.cms-lightbox__backdrop {
    position: absolute;
    inset: 0;
    z-index: 0;
    cursor: default;
}

/* ── Dialog — pointer-events:none container ─────────────── */

.cms-lightbox__dialog {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

/* ── Toolbar ─────────────────────────────────────────────── */

.cms-lightbox__toolbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--cms-lb-toolbar-h);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px;
    pointer-events: auto;
    background: linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, transparent 100%);
}

.cms-lightbox__counter {
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    line-height: 1;
    min-width: 36px;
    pointer-events: none;
}

.cms-lightbox__toolbar-actions {
    display: flex;
    align-items: center;
    gap: 1px;
    margin-left: auto;  /* zawsze po prawej, nawet gdy counter jest ukryty */
}

/* ── Toolbar / Zoom buttons ─────────────────────────────── */

.cms-lightbox__toolbar-btn,
.cms-lightbox__zoom-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.62);
    cursor: pointer;
    padding: 8px;
    border-radius: 3px;
    line-height: 1;
    transition: color 0.15s ease;
}

.cms-lightbox__toolbar-btn:hover,
.cms-lightbox__zoom-btn:hover { color: #fff; }

.cms-lightbox__toolbar-btn:focus-visible,
.cms-lightbox__zoom-btn:focus-visible {
    outline: 2px solid rgba(255,255,255,0.7);
    outline-offset: 1px;
    color: #fff;
}

.cms-lightbox__toolbar-btn:disabled,
.cms-lightbox__zoom-btn:disabled {
    opacity: 0.22;
    cursor: default;
    pointer-events: none;
}

.cms-lightbox__thumb-toggle[aria-pressed="true"] { color: rgba(255,255,255,0.9); }

/* Przycisk slideshow — wymuszenie białego koloru (▶ może dziedziczyć kolor systemu) */
.cms-lightbox__slideshow-toggle {
    color: rgba(255, 255, 255, 0.62);
    -webkit-appearance: none;
    appearance: none;
}
.cms-lightbox__slideshow-toggle:hover,
.cms-lightbox__slideshow-toggle:focus-visible {
    color: #fff;
}
.cms-lightbox__slideshow-toggle[aria-pressed="true"] {
    color: rgba(255, 255, 255, 0.9);
}

/* ── Przycisk „Wybierz" — per-slot, pod opisem/caption ─────────────────── */
.cms-lightbox__slot-select {
    flex-shrink: 0;
    align-self: center;
    text-align: center;
    padding: 10px 0 6px;
}
.cms-lightbox__btn-select {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #22c55e;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 7px 24px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    letter-spacing: 0.02em;
    transition: background 0.15s;
}
.cms-lightbox__btn-select:hover { background: #16a34a; }
.cms-lightbox__btn-select:focus-visible { outline: 2px solid rgba(255,255,255,0.7); outline-offset: 2px; }

/* ── Close button — wyraźna ikonka X w prawym górnym rogu ──── */

.cms-lightbox__btn-close {
    margin-left: 10px;
    min-width:  40px;
    min-height: 40px;
    padding: 8px;
    color: rgba(255, 255, 255, 0.85);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.06);
}

.cms-lightbox__btn-close:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.15);
}

.cms-lightbox__btn-close svg {
    width: 24px;
    height: 24px;
    stroke-width: 2.2;
}

.cms-lightbox__zoom-controls {
    display: flex;
    align-items: center;
    margin-right: 4px;
}

/* ── Stage — main slide viewport ────────────────────────── */

/*
  Stage spans from toolbar to thumbnails strip.
  Caption is now inside the stage (part of media-group flex flow),
  so no space reservation for caption is needed in stage bottom.
*/

.cms-lightbox__stage {
    position: absolute;
    top: var(--cms-lb-toolbar-h);                   /* 44px */
    bottom: var(--cms-lb-thumb-bar);                /* 96px */
    left: var(--cms-lb-arrow-zone);                 /* 64px */
    right: var(--cms-lb-arrow-zone);                /* 64px */
    overflow: hidden;
    z-index: 2;
    cursor: default;
}

/* When thumbnails hidden: stage stretches to viewport bottom */
.cms-lightbox:not(.has-thumbs) .cms-lightbox__stage {
    bottom: var(--cms-lb-bottom-safe-gap);
}

/* When caption is hidden: stage unchanged (caption already inside stage) */
.cms-lightbox.no-caption .cms-lightbox__caption {
    display: none !important;
}

/* When caption is visible but no thumbnails: use tighter bottom gap so the
   viewport space is used better (replaces the default 56px safe gap). */
.cms-lightbox:not(.has-thumbs):not(.no-caption) {
    --cms-lb-bottom-safe-gap: 20px;
}

/* Kursor nad obrazkiem:
   — domyślnie zwykły strzałka (żadna lupka, klikanie nic nie robi)
   — galeria (≥2 zdjęcia) lub zoom > 1 → rączka (sugeruje przeciąganie)
   — w trakcie przeciągania → chwytająca rączka
   !important zabezpiecza przed globalnym img { cursor: zoom-in } ze stylów strony */
.cms-lightbox__image {
    cursor: default !important;
}

.cms-lightbox__stage.is-draggable .cms-lightbox__image,
.cms-lightbox__stage.is-zoomed   .cms-lightbox__image {
    cursor: grab !important;
}

.cms-lightbox__stage.is-panning,
.cms-lightbox__stage.is-panning .cms-lightbox__image {
    cursor: grabbing !important;
}

/* ── Slide layer — absolute fill, one per slot ──────────── */

/*
  Two slide layers live in the stage. During animation both are visible.
  Each slide-layer centres its media-group (image + caption together).
*/

.cms-lightbox__slide-layer {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    will-change: transform;
    overflow: hidden;
    /* Transitions applied entirely by JS during animation */
}

/* ── Media group — flex container for image + caption ───── */

/*
  media-group is the unit that is centred in the stage.
  For bottom/auto:  flex-direction column  → caption below image.
  For left:         flex-direction row-reverse → caption left of image.
  For right:        flex-direction row         → caption right of image.
  For overlay:      position:relative, caption absolute inside.
  Caption is part of this flow, so it can never escape past the stage
  and cannot overlap the thumbnail strip.
*/

.cms-lightbox__media-group {
    display: flex;
    flex-direction: column;     /* default: caption below image */
    align-items: flex-start;    /* children left-aligned by default */
    max-width: 100%;
    overflow: hidden;
}

/* ── Media frame — wraps the rendered image / video / iframe */

.cms-lightbox__media-frame {
    position: relative;         /* overlay caption anchors here */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

/* ── Image ───────────────────────────────────────────────── */

.cms-lightbox__image {
    display: block;
    max-width: 100%;
    /* max-height uses viewport calc so it works regardless of parent height chain.
       Default: bottom caption + thumbnails visible. */
    max-height: calc(100vh - var(--cms-lb-toolbar-h) - var(--cms-lb-thumb-bar)
                     - var(--cms-lb-caption-max-h) - var(--cms-lb-media-gap) * 2);
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 1px;
    user-select: none;
    -webkit-user-drag: none;
    transform-origin: center center;
    position: relative;
    z-index: 1;
    /* Zoom transition — disabled during pan via inline style.transition = 'none' */
    transition: transform var(--cms-lb-soft-speed) var(--cms-lb-easing);
}

/* No thumbnails: more vertical space for image */
.cms-lightbox:not(.has-thumbs) .cms-lightbox__image {
    max-height: calc(100vh - var(--cms-lb-toolbar-h) - var(--cms-lb-bottom-safe-gap)
                     - var(--cms-lb-caption-max-h) - var(--cms-lb-media-gap) * 2);
}

/* Side caption / overlay / no caption: caption doesn't take vertical space → full height */
.cms-lightbox.no-caption .cms-lightbox__image,
.cms-lightbox--caption-overlay .cms-lightbox__image,
.cms-lightbox--caption-left .cms-lightbox__image,
.cms-lightbox--caption-right .cms-lightbox__image {
    max-height: calc(100vh - var(--cms-lb-toolbar-h) - var(--cms-lb-thumb-bar)
                     - var(--cms-lb-media-gap) * 2);
}
.cms-lightbox.no-caption:not(.has-thumbs) .cms-lightbox__image,
.cms-lightbox--caption-overlay:not(.has-thumbs) .cms-lightbox__image,
.cms-lightbox--caption-left:not(.has-thumbs) .cms-lightbox__image,
.cms-lightbox--caption-right:not(.has-thumbs) .cms-lightbox__image {
    max-height: calc(100vh - var(--cms-lb-toolbar-h) - var(--cms-lb-bottom-safe-gap)
                     - var(--cms-lb-media-gap) * 2);
}

/* ── Caption ─────────────────────────────────────────────── */

/*
  Caption is a flex child of media-group (part of the DOM flow).
  For bottom/auto:  flex child below media-frame, width = image width.
  For left/right:   flex child beside media-frame, fixed width panel.
  For overlay:      position:absolute inside media-group at bottom.
  It can never overlap the thumbnail strip because media-group is
  contained within the stage which ends above the thumbs bar.
*/

.cms-lightbox__caption {
    /* Flex child — geometry managed by flexbox, not JS inline styles */
    flex: 0 0 auto;
    align-self: stretch;        /* matches media-frame width in column mode */
    margin: 0;                  /* reset <p> default margin (would create gap) */
    box-sizing: border-box;
    max-height: var(--cms-lb-caption-max-h);
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.8rem;
    line-height: 1.4;
    text-align: center;
    word-break: break-word;
    /* Default padding — overridden by --padding-* classes below */
    padding: 10px 16px;
}

/* ── Caption themes ──────────────────────────────────────── */

/* dark (default) — light text, no panel background */
.cms-lightbox__caption--theme-dark {
    color: rgba(255, 255, 255, 0.88);
    background: transparent;
}

/* light — white panel, dark text */
.cms-lightbox__caption--theme-light {
    color: #1a202c;
    background: #fff;
    border-radius: 3px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.18);
}

/* transparent — no background at all */
.cms-lightbox__caption--theme-transparent {
    color: rgba(255, 255, 255, 0.82);
    background: transparent;
}

/* ── Caption padding ─────────────────────────────────────── */

.cms-lightbox__caption--padding-sm { padding:  6px 10px; }
.cms-lightbox__caption--padding-md { padding: 10px 16px; }
.cms-lightbox__caption--padding-lg { padding: 18px 26px; }

/* ── Thumbnails strip ────────────────────────────────────── */

.cms-lightbox__thumbs {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--cms-lb-thumb-bar);
    z-index: 4;
    overflow-x: auto;
    overflow-y: hidden;
    background: rgba(0, 0, 0, 0.6);
    pointer-events: auto;
    cursor: grab;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.2) transparent;
    /* Animated show/hide */
    transition:
        height  var(--cms-lb-soft-speed) var(--cms-lb-easing),
        opacity var(--cms-lb-soft-speed) var(--cms-lb-easing);
}

.cms-lightbox__thumbs.no-animate { transition: none !important; }

.cms-lightbox__thumbs.is-hidden {
    height: 0 !important;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
}

.cms-lightbox__thumbs::-webkit-scrollbar { height: 3px; }
.cms-lightbox__thumbs::-webkit-scrollbar-track { background: transparent; }
.cms-lightbox__thumbs::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.2);
    border-radius: 2px;
}

/* ── Thumbs inner track ──────────────────────────────────── */

.cms-lightbox__thumbs-track {
    display: flex;
    align-items: center;
    justify-content: center;   /* centered when few items */
    gap: var(--cms-lb-thumb-gap);
    padding: 0 12px;
    min-width: 100%;           /* enables centering while allowing scroll */
    min-height: 100%;
    box-sizing: border-box;
}

/* ── Thumbnail button ────────────────────────────────────── */

.cms-lightbox__thumb {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width:  var(--cms-lb-thumb-width);   /* 100px */
    height: var(--cms-lb-thumb-height);  /* 80px  */
    border: 2px solid rgba(255,255,255,0.28);
    border-radius: 2px;
    overflow: hidden;
    cursor: pointer;
    background: rgba(255,255,255,0.06);
    padding: 0;
    opacity: 0.7;
    transition: opacity 0.12s ease, border-color 0.12s ease;
}

.cms-lightbox__thumb:hover { opacity: 1; border-color: rgba(255,255,255,0.55); }

/* Active thumbnail: white border, full opacity */
.cms-lightbox__thumb.is-active {
    border-color: #fff;
    opacity: 1;
}

.cms-lightbox__thumb-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cms-lightbox__thumb-placeholder {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.65);
    user-select: none;
}

/* ── Prev / Next arrows ──────────────────────────────────── */

/*
  Arrows sit in the --cms-lb-arrow-zone (64px) on each side.
  They are position:fixed so they stay vertically centred regardless
  of toolbar / caption / thumbs layout changes.
  No background, no border, no circle — just a thin SVG chevron.
*/

.cms-lightbox__btn-prev,
.cms-lightbox__btn-next {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.65);
    cursor: pointer;
    padding: 12px 10px;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    pointer-events: auto;
    transition: color 0.15s ease;
    border-radius: 2px;
}

.cms-lightbox__btn-prev { left: 10px; }
.cms-lightbox__btn-next { right: 10px; }

.cms-lightbox__btn-prev:hover,
.cms-lightbox__btn-next:hover { color: #fff; }

.cms-lightbox__btn-prev:focus-visible,
.cms-lightbox__btn-next:focus-visible {
    outline: 2px solid rgba(255,255,255,0.7);
    outline-offset: 2px;
    color: #fff;
}

/* ── Video ───────────────────────────────────────────────── */

.cms-lightbox__video {
    display: block;
    max-width: 100%;
    max-height: calc(100vh - var(--cms-lb-toolbar-h) - var(--cms-lb-thumb-bar)
                     - var(--cms-lb-caption-max-h) - var(--cms-lb-media-gap) * 2);
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 2px;
}
.cms-lightbox.no-caption .cms-lightbox__video,
.cms-lightbox--caption-overlay .cms-lightbox__video,
.cms-lightbox--caption-left .cms-lightbox__video,
.cms-lightbox--caption-right .cms-lightbox__video {
    max-height: calc(100vh - var(--cms-lb-toolbar-h) - var(--cms-lb-thumb-bar)
                     - var(--cms-lb-media-gap) * 2);
}

/* ── Iframe ──────────────────────────────────────────────── */

.cms-lightbox__iframe {
    display: block;
    max-width: 100%;
    max-height: calc(100vh - var(--cms-lb-toolbar-h) - var(--cms-lb-thumb-bar)
                     - var(--cms-lb-caption-max-h) - var(--cms-lb-media-gap) * 2);
    width: min(calc(100vw - 160px), 960px);
    height: min(calc(100vh - 180px), 540px);
    border: none;
    background: #111;
    border-radius: 2px;
}

.cms-lightbox__message {
    color: rgba(255,255,255,0.6);
    font-size: 0.88rem;
    text-align: center;
    padding: 24px;
}

/* ── Caption positions ───────────────────────────────────── */

/* ── bottom (default) ─────────────────────────────────────
   flex column: media-frame on top, caption below, gap = 0      */
/* (default flex-direction: column already set on .cms-lightbox__media-group) */

/* ── left ─────────────────────────────────────────────────
   flex row-reverse: caption on left, image on right, gap = 0    */
.cms-lightbox--caption-left .cms-lightbox__media-group {
    flex-direction: row-reverse;
    align-items: stretch;
}
.cms-lightbox--caption-left .cms-lightbox__media-frame {
    flex: 1 1 auto;
    min-width: 0;
    align-items: flex-start;    /* image anchors to top of (stretched) frame */
}
.cms-lightbox--caption-left .cms-lightbox__caption {
    flex: 0 0 clamp(220px, 28vw, 340px);
    /* JS _syncCaptionSize() sets inline height = image rendered height.
       CSS fallback: cap at same height budget as image for this mode. */
    max-height: calc(100vh - var(--cms-lb-toolbar-h) - var(--cms-lb-thumb-bar)
                     - var(--cms-lb-media-gap) * 2);
    align-self: auto;
    align-items: flex-start;
    text-align: left;
    justify-content: flex-start;
    flex-direction: column;
    overflow-y: auto;
}

/* ── right ─────────────────────────────────────────────────
   flex row: image on left, caption on right, gap = 0            */
.cms-lightbox--caption-right .cms-lightbox__media-group {
    flex-direction: row;
    align-items: stretch;
}
.cms-lightbox--caption-right .cms-lightbox__media-frame {
    flex: 1 1 auto;
    min-width: 0;
    align-items: flex-start;    /* image anchors to top of (stretched) frame */
}
.cms-lightbox--caption-right .cms-lightbox__caption {
    flex: 0 0 clamp(220px, 28vw, 340px);
    max-height: calc(100vh - var(--cms-lb-toolbar-h) - var(--cms-lb-thumb-bar)
                     - var(--cms-lb-media-gap) * 2);
    align-self: auto;
    align-items: flex-start;
    text-align: left;
    justify-content: flex-start;
    flex-direction: column;
    overflow-y: auto;
}

/* Light theme in sidebar: clean white panel */
.cms-lightbox--caption-left .cms-lightbox__caption--theme-light,
.cms-lightbox--caption-right .cms-lightbox__caption--theme-light {
    border-radius: 0;
    box-shadow: none;
}

/* ── overlay ───────────────────────────────────────────────
   Caption sits at the bottom of the image via position:absolute */
.cms-lightbox--caption-overlay .cms-lightbox__media-group {
    position: relative;         /* anchor for absolute caption */
}
.cms-lightbox--caption-overlay .cms-lightbox__caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: auto;
    max-height: 50%;
    flex: none;
    align-self: auto;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* Solid panel — visible at bottom of image */
    background: rgba(0, 0, 0, 0.85);
    z-index: 5;
}
/* Overlay light theme: white solid panel */
.cms-lightbox--caption-overlay .cms-lightbox__caption--theme-light {
    background: rgba(255, 255, 255, 0.9);
    color: #1a202c;
    border-radius: 0;
    box-shadow: none;
}
/* Overlay transparent theme: slightly less opaque but still legible */
.cms-lightbox--caption-overlay .cms-lightbox__caption--theme-transparent {
    background: rgba(0, 0, 0, 0.72);
    color: rgba(255, 255, 255, 0.88);
}

/* ── has-thumbs: stage transitions smoothly when thumbs toggle ─ */

.cms-lightbox__stage {
    transition:
        bottom var(--cms-lb-soft-speed) var(--cms-lb-easing),
        top    var(--cms-lb-soft-speed) var(--cms-lb-easing),
        left   var(--cms-lb-soft-speed) var(--cms-lb-easing),
        right  var(--cms-lb-soft-speed) var(--cms-lb-easing);
}

/* ── Responsive ──────────────────────────────────────────── */

@media (max-width: 900px) {
    .cms-lightbox {
        --cms-lb-thumb-bar:    80px;
        --cms-lb-thumb-width:  82px;
        --cms-lb-thumb-height: 60px;
        --cms-lb-arrow-zone:   44px;
        --cms-lb-bottom-safe-gap: 28px;
        --cms-lb-media-gap:       12px;
    }

    .cms-lightbox__btn-prev { left: 2px; }
    .cms-lightbox__btn-next { right: 2px; }

    .cms-lightbox__thumbs-track { padding: 0 8px; }

    /* On tablet: left/right sidebar falls back to bottom layout */
    .cms-lightbox--caption-left .cms-lightbox__media-group,
    .cms-lightbox--caption-right .cms-lightbox__media-group {
        flex-direction: column;
        align-items: flex-start;
    }
    .cms-lightbox--caption-left .cms-lightbox__media-frame,
    .cms-lightbox--caption-right .cms-lightbox__media-frame {
        flex: 0 0 auto;
    }
    .cms-lightbox--caption-left .cms-lightbox__caption,
    .cms-lightbox--caption-right .cms-lightbox__caption {
        flex: 0 0 auto;
        align-self: stretch;
        max-height: var(--cms-lb-caption-max-h);
        align-items: center;
        text-align: center;
        justify-content: center;
        flex-direction: row;
        width: auto;
    }
}

@media (max-width: 600px) {
    .cms-lightbox {
        --cms-lb-thumb-bar:    64px;
        --cms-lb-thumb-width:  60px;
        --cms-lb-thumb-height: 44px;
        --cms-lb-thumb-gap:    4px;
        --cms-lb-arrow-zone:   36px;
        --cms-lb-toolbar-h:    40px;
        --cms-lb-bottom-safe-gap: 24px;
        --cms-lb-media-gap:       10px;
    }

    .cms-lightbox__toolbar { padding: 0 10px; }
    .cms-lightbox__btn-prev { left: 0; padding: 10px 6px; }
    .cms-lightbox__btn-next { right: 0; padding: 10px 6px; }
    .cms-lightbox__thumbs-track { padding: 0 6px; }

    .cms-lightbox__toolbar-btn svg,
    .cms-lightbox__zoom-btn svg { width: 18px; height: 18px; }
    .cms-lightbox__btn-close svg { width: 20px; height: 20px; }
    .cms-lightbox__btn-close { min-width: 36px; min-height: 36px; margin-left: 6px; }
}

/* ── prefers-reduced-motion ──────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .cms-lightbox,
    .cms-lightbox.is-open,
    .cms-lightbox.is-open.is-closing {
        animation-duration: 1ms !important;
    }

    .cms-lightbox__stage,
    .cms-lightbox__caption,
    .cms-lightbox__slide-layer,
    .cms-lightbox__image,
    .cms-lightbox__thumbs,
    .cms-lightbox__toolbar-btn,
    .cms-lightbox__zoom-btn,
    .cms-lightbox__btn-prev,
    .cms-lightbox__btn-next,
    .cms-lightbox__thumb {
        transition-duration: 1ms !important;
    }
}