/*
V7-HEADER
Title: Buktika - Media Lightbox Styles
Filename: assets/css/partials/media-lightbox.css
Version: v2.5.1
Issued: 2026-04-04
Owner: Buktika - Binka
Scope:
  Shared thumbnail and lightbox styles for images and videos.

ChangeLog:
- v2.5.1 (2026-04-04): Close control rebuilt without font glyph.
          FIXED   - .lightbox-close no longer uses the "×" character in ::before.
                    The close mark now renders as two centered strokes so it sits
                    consistently in the button across browsers.
- v2.5.0 (2026-04-04): Mobile-safe gallery navigation.
          FIXED   - Gallery arrows no longer rely on .lightbox-inner row layout.
                    They are now positioned on the media edges inside the shared
                    lightbox, which restores usable mobile behaviour for Teams,
                    Mamas, and Reporters.
          FIXED   - Arrow buttons now sit on the left and right edges of the media
                    instead of outside the media column.
- v2.3.0 (2026-03-20): VIDEO WHITE CARD.
          Owner instruction: video lightbox frame must match image frame with rounded corners.
          Applied padding:12px + background:#ffffff + border-radius:1.5rem + border + box-shadow
          directly to #media-lightbox.is-video .lightbox-video — same pattern as
          #media-lightbox.is-image .lightbox-image. padding/background/border-radius are
          standard CSS properties that work correctly on <video> elements.
- v2.2.0 (2026-03-05): Gallery group navigation arrows.
          ADDED     - .lightbox-prev / .lightbox-next arrow buttons injected by
                      media-lightbox.js v1.15.0 into .lightbox-inner as flex siblings
                      of .lightbox-media. Shown only when a gallery group (data-gallery)
                      with >1 image is open. Hidden at gallery boundaries (no wrap).
                      .lightbox-inner switches to flex-direction:row via :has() selector
                      when arrows are visible. Arrow styling matches .lightbox-close
                      frosted glass treatment.
- v2.1.0 (2026-03-05): Image card sizing + caption position fixes.
          BUG 1     - White card stretched to 90vw (full .lightbox-inner width).
                      ROOT CAUSE: .lightbox-inner was display:flex col with max-width:90vw.
                      .lightbox-media as flex child stretched to fill parent width.
                      FIX: added width:fit-content to .lightbox-inner — inner collapses
                      to content width. max-width:90vw still prevents viewport overflow.
          BUG 2     - Caption pill not rendering below media — visible only as browser
                      aria-label tooltip on hover.
                      ROOT CAUSE: .lightbox-media was display:inline-flex with
                      align-items:center (row axis). <figcaption> rendered beside
                      media, invisible or clipped.
                      FIX: added flex-direction:column to .lightbox-media — caption
                      always flows below the media element in both image and video mode.
          BUG 3     - Caption appeared inside white card (image mode), not outside it
                      on the dark backdrop as required by §8.8.6.
                      ROOT CAUSE: white card background/padding was on .lightbox-media,
                      which contains both the <img> and <figcaption>. Caption was inside
                      the white surface.
                      FIX: moved white card treatment from .is-image .lightbox-media
                      to .is-image .lightbox-image. .lightbox-media stays transparent —
                      caption sits outside the card on the dark backdrop.
- v2.0.0 (2026-03-05): Explicit [hidden] enforcement for media elements.
          ROOT CAUSE - Chromium renders <video controls> native UI even while the
                       element has the HTML hidden attribute, when preload="metadata"
                       is set. The UA stylesheet [hidden]{display:none} is overridden
                       by the parent flex layout context in .lightbox-media.
                       Symptom: inline video player visible on page before any user
                       interaction, partially overlapping the portrait card.
          FIXED      - .lightbox-image[hidden] and .lightbox-video[hidden] now carry
                       explicit display:none !important rules. These are definitive
                       regardless of parent layout context. UA stylesheet cannot be
                       relied upon when flex is in play.
          PAIRED WITH - mamadex-mama-profile.html v2.8.0: preload="metadata" changed
                       to preload="none" on the static <video> element. Belt-and-
                       suspenders: preload="none" prevents eager media activation;
                       display:none !important prevents any visual render while hidden.
- v1.9.1 (2026-03-02): Revert video sizing regression from v1.9.0.
          REGRESSION - v1.9.0 added #media-lightbox.is-video .lightbox-media:
                       width: min(90vw, 960px). This gave the media container a
                       resolved width in video mode — but the side-effect was that
                       if is-video class was absent or JS timing was off, the
                       container expanded to fill .lightbox-inner (90vw), making
                       the white image card too wide. Also, the approach of fixing
                       width on the container to give width:100% on the video
                       something to fill is unnecessary — video has intrinsic
                       dimensions. width:auto + max-width on the video element
                       itself is the correct approach, identical to how
                       .lightbox-image is sized. No container width needed.
          REVERTED  - #media-lightbox.is-video .lightbox-media: removed.
          FIXED     - .lightbox-video: width:auto, max-width:90vw, height:auto.
                      Video sizes to its intrinsic dimensions, capped at 90vw.
                      Same pattern as .lightbox-image. No container width required.
- v1.9.0 (2026-03-02): §8.8.2 compliance — .lightbox-video-frame removed.
          VIOLATION - .lightbox-video-frame was a non-canonical wrapper introduced
                      in v1.8.5 to fix a zero-width video bug. §8.8.2 canonical
                      structure places video.lightbox-video directly inside
                      .lightbox-media — no wrapper element. The HTML was correctly
                      updated (mamadex.html v4.6.3 removed the frame div) but
                      media-lightbox.css still targeted .lightbox-video-frame,
                      leaving the video unsized (width: auto inside inline-flex
                      with no intrinsic width = collapse).
          REMOVED   - .lightbox-video-frame rule block (non-canonical).
          FIXED     - .lightbox-video: width:100% inside .lightbox-media which is
                      display:inline-flex. This requires .lightbox-media to have
                      a defined width when in video mode. Added
                      #media-lightbox.is-video .lightbox-media rule:
                      width: min(90vw, 960px) — gives the flex container a
                      resolved width so video width:100% fills it correctly.
                      max-width removed from .lightbox-video (container governs).
- v1.8.9 (2026-02-28): Caption pill treatment.
          CHANGED - .lightbox-caption: font-size 0.8125rem → 1.1rem. Caption
                    shows the card title — primary identification content, not
                    a footnote. 13px was wrong for that purpose.
          CHANGED - font-weight: 500. Readable against the frosted pill.
          CHANGED - color: rgba(255,255,255,0.72) → rgba(255,255,255,0.92).
          ADDED   - Frosted glass pill: background rgba(255,255,255,0.12),
                    backdrop-filter blur(8px), border rgba(255,255,255,0.20),
                    border-radius 999px, padding 0.45rem 1.25rem. Matches
                    the close button frosted glass treatment for consistency.
- v1.8.8 (2026-02-28): Frame background #000 → #ffffff.
          BUG:      Frame background was #000000. Overlay backdrop is
                    rgba(10,14,26,0.94) — near-black. Black band on near-black
                    backdrop is invisible. Band was structurally correct from
                    v1.8.7 but visually identical to nothing.
          FIX:      background: #ffffff. White band on dark backdrop — same
                    treatment as the image white card. Clearly visible.
- v1.8.7 (2026-02-28): Frame sizing fixed — inline-block + content-box.
          ROOT CAUSE: DevTools Computed panel showed frame had no width/height.
                    A block child of inline-flex becomes a flex item with no
                    intrinsic size. video width:100% inside a zero-width flex
                    item = zero-width video. Padding rendered but contained
                    nothing — invisible.
          FIX:      .lightbox-video-frame: display:inline-block. Shrinks to
                    video's intrinsic size the same way .lightbox-image does.
                    box-sizing:content-box so max-width:90vw applies to content
                    only — padding 10px adds outside, giving video max 90vw-20px.
                    .lightbox-video: width:auto, max-width:calc(90vw - 20px)
                    matching frame content-box constraint exactly.
- v1.8.6 (2026-02-28): overflow:hidden on frame + border-radius removed from video.
          ADDED   - .lightbox-video-frame: overflow:hidden — clips video to
                    frame border-radius boundary.
          CHANGED - .lightbox-video: border-radius:0 — frame handles rounding,
                    video should be rectangular inside the padded frame.
- v1.8.5 (2026-02-28): Video band — structural fix via .lightbox-video-frame wrapper.
          ROOT CAUSE: DevTools confirmed is-video was correctly on #media-lightbox.
                    inset box-shadow on .lightbox-video was being painted over by
                    the video poster image. The poster renders as video content
                    fill — it sits on top of inset shadows in the browser
                    compositing order. No CSS-only approach on the video element
                    itself can produce a visible band behind the poster.
          FIX:      Added <div class="lightbox-video-frame"> wrapper in HTML.
                    The frame is a block element (not inline-flex) with
                    background: #000, padding: 10px, border-radius: 0.75rem.
                    The <video> inside is width:100% — it fills the content
                    box exactly. The padding is the visible black band.
                    Block elements with explicit content do not collapse —
                    padding is always rendered and always visible.
          CHANGED - .lightbox-video-frame: new rule (band carrier).
          CHANGED - .lightbox-video: width:100%, no box-shadow, simplified.
          REMOVED - #media-lightbox.is-video .lightbox-media: superseded.
- v1.8.4 (2026-02-28): Band moved from container to video element via inset box-shadow.
          ROOT CAUSE: .lightbox-media is display:inline-flex (shrink-to-fit).
                    Both padding and outline on the container fail because
                    the container collapses to the video's intrinsic size —
                    padding adds outside invisibly, outline sits at the collapsed
                    edge with nothing to show against. The band cannot be
                    applied to the container when the container has no fixed size.
          FIX:      box-shadow: inset 0 0 0 10px #000 on .lightbox-video.
                    Inset shadow renders INSIDE the element's border box, on
                    top of the video content. It is independent of the container
                    entirely. It cannot be clipped, collapsed, or hidden by
                    parent sizing behaviour.
- v1.8.3 (2026-02-28): Video band — padding approach replaced with outline.
          ROOT CAUSE: .lightbox-media is display:inline-flex and shrinks to
                    fit the video. padding adds space outside the content box
                    but the container collapses to content size — the video
                    filled wall-to-wall making the padding invisible. outline
                    renders outside the box geometry entirely, independent of
                    content size. Band is now unconditionally visible.
          CHANGED - .is-video .lightbox-media: padding removed, outline:10px
                    solid #000 added. background and border-radius adjusted.
          CHANGED - .lightbox-video: max-width restored to 90vw (no deduction
                    needed — outline does not affect layout or sizing).
- v1.8.2 (2026-02-28): Video band — black on black root cause fixed.
          FIXED   - .lightbox-video background: #000 removed → transparent.
                    The video element's own black background was covering the
                    10px black padding band on .lightbox-media. Black on black
                    — the band existed in the DOM but was invisible. The band
                    must come from .lightbox-media only.
          FIXED   - .is-video .lightbox-media padding: 6px → 10px. 6px was
                    too thin to read as a deliberate border even when visible.
          FIXED   - .lightbox-video max-width deduction updated: 12px → 20px
                    to match the new 10px × 2 padding.
- v1.8.1 (2026-02-28): Video border band.
          FIXED   - .is-video .lightbox-media: added padding: 6px + background:
                    #000 + border-radius: 1rem. Video was sitting flush against
                    the container edge with no separation. Dark band, not white
                    card — matches the overlay backdrop, contains the video
                    corners cleanly.
- v1.8.0 (2026-02-28): Professional overlay treatment.
          FIXED   - Backdrop opacity: 0.78 → 0.94. Page content was visible
                    through the overlay. Lightbox must isolate the media —
                    the page disappears, the media is all that exists.
          FIXED   - Close button repositioned from inside .lightbox-media
                    (top of white card) to top-right of .lightbox-inner.
                    Was reading as part of the image, not a UI control. Now
                    floats above the media against the dark backdrop with
                    frosted glass treatment.
          FIXED   - Video mode: white card suppressed. #media-lightbox gains
                    class "is-image" via JS when an image thumb opens, and
                    "is-video" when a video thumb opens. White card rules
                    are scoped to .is-image only. Video sits directly on the
                    dark backdrop — the content is self-contained. White card
                    is correct for images only (isolates image from dark surround).
          FIXED   - Breathing room: .lightbox-inner margin 16px → 5vw.
                    Media was clipping the viewport edge on smaller screens.
          FIXED   - Caption colour: var(--muted) → rgba(255,255,255,0.72).
                    var(--muted) is a page surface token (dark green on light
                    pages) — invisible on dark backdrop. Caption is always
                    rendered on the overlay, never on a page surface.
          FIXED   - Focus ring token: --accent-red → --sdx-color-teal-deep.
                    --accent-red is not a canonical token in the root token set.
- v1.7.0 (2025-11-25): Initial shared lightbox styles.
*/

/* ============================================================
   THUMBNAILS IN CARDS
   ============================================================ */

.cards .card .media-thumb {
  display: block;
  position: relative;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  background: #fdfaf7;
}

.cards .card .media-thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* Play icon overlay for video thumbs */

.media-thumb-video {
  position: relative;
}

.media-thumb-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  font-size: 34px;
  line-height: 1;
  color: #ffffff;
  text-shadow: 0 3px 8px rgba(0,0,0,0.55);
}

/* Focus ring for keyboard users */

.media-thumb:focus-visible {
  outline: 2px solid var(--sdx-color-teal-deep, #2f5c68);
  outline-offset: 3px;
}

/* ============================================================
   OVERLAY
   RULE: backdrop opacity must be >= 0.92. Page content must
   not be readable through the overlay. The media is the only
   thing that exists while the lightbox is open.
   ============================================================ */

#media-lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10,14,26,0.94);
}

#media-lightbox[hidden] {
  display: none;
}

/* Backdrop button — full overlay surface, behind the inner */

#media-lightbox .lightbox-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

/* ============================================================
   INNER CONTAINER
   Holds the close button, media, and caption as a column.
   padding-top reserves space for the close button above media.
   RULE: inner must never touch the viewport edge (margin 5vw).
   ============================================================ */

#media-lightbox .lightbox-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 3rem 0 0;
  margin: 0 5vw;
  background: transparent;
  border: 0;
  box-shadow: none;
  box-sizing: border-box;
  width: fit-content;    /* collapse to content — prevents white card stretching to 90vw */
  max-width: 90vw;
  max-height: calc(100vh - 4rem);
}

/* ============================================================
   CLOSE BUTTON
   Floats at top-right of .lightbox-inner, above the media.
   Against the dark backdrop — not against the card or image.
   RULE: close button must be on the overlay, not the media.
   ============================================================ */

.lightbox-close {
  position: absolute;
  top: 0.5rem;
  right: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.22);
  padding: 0;
  margin: 0;
  cursor: pointer;
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: transparent;
  font-size: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.lightbox-close::before,
.lightbox-close::after {
  content: "";
  position: absolute;
  width: 0.95rem;
  height: 0.125rem;
  border-radius: 999px;
  background: #ffffff;
  left: 50%;
  top: 50%;
  transform-origin: center;
}

.lightbox-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.lightbox-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.lightbox-close:hover {
  background: rgba(255,255,255,0.24);
  border-color: rgba(255,255,255,0.44);
}

.lightbox-close:focus-visible {
  outline: 2px solid var(--sdx-color-teal-deep, #2f5c68);
  outline-offset: 2px;
}

/* ============================================================
   MEDIA CONTAINER
   Base: transparent, no padding — correct for video.
   .is-image modifier: white card isolates image from backdrop.
   RULE: white card for images only. Video is self-contained.
   ============================================================ */

.lightbox-media {
  position: relative;
  display: inline-flex;
  flex-direction: column;  /* caption flows below media in both image and video mode */
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  max-width: 100%;
}

/* Image mode: white card applied to the img element directly.
   Keeping .lightbox-media transparent means .lightbox-caption
   sits below the card on the dark backdrop — correct per §8.8.6. */
#media-lightbox.is-image .lightbox-image {
  padding: 12px;
  background: #ffffff;
  border-radius: 1.5rem;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow:
    0 32px 80px rgba(0,0,0,0.70),
    0 0 0 1px rgba(255,255,255,0.06);
  /* max dimensions account for the 12px padding on each side */
  max-width: calc(90vw - 24px);
  max-height: calc(100vh - 10rem);
}

/* Video mode: white card applied directly to the video element.
   object-fit:fill stretches poster to fill padding box exactly — no letterbox gaps.
   object-fit:fill is intentional here: poster is a preview image, not constrained
   by video aspect ratio. During playback the video renders correctly regardless. */
#media-lightbox.is-video .lightbox-video {
  padding: 12px;
  background: #ffffff;
  border-radius: 1.5rem;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow:
    0 32px 80px rgba(0,0,0,0.70),
    0 0 0 1px rgba(255,255,255,0.06);
  max-width: calc(90vw - 24px);
  max-height: calc(100vh - 10rem);
  object-fit: fill; /* eliminates UA letterbox black bar above poster */
}

/* Explicit [hidden] enforcement — UA stylesheet [hidden]{display:none} can be
   overridden by parent flex context in Chromium. These rules are definitive.
   Also prevents <video controls preload="none"> from rendering native UI
   while the overlay is closed. */
.lightbox-image[hidden],
.lightbox-video[hidden] {
  display: none !important;
}

/* ============================================================
   MEDIA ELEMENTS
   Image: constrained inside card (card padding deducted).
   Video: full width of inner, no card padding.
   RULE: neither element may touch the viewport edge.
   ============================================================ */

.lightbox-image {
  display: block;
  margin: 0;
  border-radius: 1.125rem;
  object-fit: contain;
  width: auto;
  height: auto;
  max-width: calc(90vw - 24px);
  max-height: calc(100vh - 10rem);
}

/* Video mode: no card on .lightbox-media — video sits directly on dark backdrop.
   §8.8.2 canonical: video.lightbox-video directly inside .lightbox-media.
   Video has intrinsic dimensions — width:auto lets it size naturally.
   max-width:90vw caps it at the viewport. No container width rule needed. */

.lightbox-video {
  display: block;
  margin: 0;
  border-radius: 0.75rem;
  background: #000;
  object-fit: contain;
  width: 100%;           /* resolved width so border-radius renders on poster before playback */
  height: auto;
  max-width: 90vw;
  max-height: calc(100vh - 12rem);
  box-shadow: 0 32px 80px rgba(0,0,0,0.70);
}

/* ============================================================
   CAPTION
   Always on the dark backdrop — never on a page surface.
   RULE: caption must use white/light colour. var(--muted) is
   a page surface token and is invisible on dark backdrop.
   ============================================================ */

.lightbox-caption {
  margin-top: 0.875rem;
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1.4;
  color: rgba(255,255,255,0.92);
  text-align: center;
  max-width: min(90vw, 640px);
  font-family: var(--text-font, sans-serif);
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.20);
  border-radius: 999px;
  padding: 0.45rem 1.25rem;
}

/* ============================================================
   GALLERY NAVIGATION ARROWS
   Shown only when a gallery group with >1 image is open.
   Positioned as flex siblings of .lightbox-media inside .lightbox-inner.
   Sit to the left and right of the media column.
   ============================================================ */

#media-lightbox .lightbox-media {
  flex-direction: column;
  align-items: center;
}

.lightbox-prev,
.lightbox-next {
  position: absolute;
  top: calc(50% - 1.5rem);
  z-index: 2;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #ffffff;
  font-size: 1.75rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background 0.18s ease, border-color 0.18s ease;
  margin: 0;
}

.lightbox-prev {
  left: -3.75rem;
}

.lightbox-next {
  right: -3.75rem;
}

.lightbox-prev[hidden],
.lightbox-next[hidden] {
  display: none !important;
}

.lightbox-prev:hover,
.lightbox-next:hover {
  background: rgba(255,255,255,0.24);
  border-color: rgba(255,255,255,0.44);
}

.lightbox-prev:focus-visible,
.lightbox-next:focus-visible {
  outline: 2px solid var(--sdx-color-teal-deep, #2f5c68);
  outline-offset: 2px;
}

/* ============================================================
   SMALL SCREEN
   ============================================================ */

@media (max-width: 640px) {
  #media-lightbox .lightbox-inner {
    margin: 0 3vw;
    max-width: 94vw;
    padding-top: 2.75rem;
  }

  #media-lightbox.is-image .lightbox-image {
    padding: 8px;
    border-radius: 1rem;
    max-width: calc(94vw - 16px);
    max-height: calc(100vh - 9rem);
  }

  .lightbox-image {
    max-width: calc(94vw - 16px);
    max-height: calc(100vh - 9rem);
    border-radius: 0.75rem;
  }

  .lightbox-video {
    max-width: 94vw;
    max-height: calc(100vh - 9rem);
  }

  .lightbox-close {
    top: 0.375rem;
  }

  .lightbox-prev,
  .lightbox-next {
    top: calc(50% - 1.25rem);
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.5rem;
  }

  .lightbox-prev {
    left: 0.5rem;
  }

  .lightbox-next {
    right: 0.5rem;
  }
}