/* =========================================================
   AC-v3 Image lightbox + info-icon affordance (16.05.26, info-icon 17.05.26)

   Opt-in: any element with [data-lightbox] gets an info-icon
   button injected by lightbox.js. Click opens a full-viewport
   lightbox showing the largest srcset variant, with an optional
   caption (data-lightbox-caption, or img alt as fallback).

   Video case: [data-lightbox-video="<youtube-id>"] swaps the
   image for a 16:9 YouTube iframe in the same lightbox shell.

   Accessibility: aria-modal, focus moves to close on open,
   focus returns to the trigger on close, Esc dismisses, Tab is
   trapped inside the modal.
   ========================================================= */

/* ---------- Info-icon button (18.05.26 restyle, third pass) ----------
   Bottom-right corner of an opt-in figure. The pill is now sized to
   the icon (icon 26px, button 28px = 2px padding around the glyph)
   with a stronger white opacity layer so it reads as a tiny crisp
   light puck rather than a vague slab. SVG inherits currentColor;
   hover flips colour to --accent. */
.lightbox-trigger {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  /* 19.05.26: opaque white-glass backdrop retired per user. Icon
     now sits on the image / page directly. Drop-shadow on the SVG
     (see .lightbox-trigger svg) gives it enough contrast to read
     against any backdrop without a circular plate behind it. */
  background: transparent;
  color: #FFFFFF;
  cursor: pointer;
  transition: color 160ms ease, transform 160ms ease;
  -webkit-tap-highlight-color: transparent;
  /* 16.05.26: forced auto so the trigger receives clicks regardless of
     parent pointer-events. Needed because .btm-stage__figure has
     pointer-events: none (legacy section-btm.css rule whose .btm-selector
     override no longer matches the v4 DOM), which silently blocked the
     info-icon on every BtM era. */
  pointer-events: auto;
}
.lightbox-trigger:hover,
.lightbox-trigger:focus-visible {
  color: var(--accent);
  transform: scale(1.08);
}
.lightbox-trigger:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.lightbox-trigger svg {
  width: 26px;
  height: 26px;
  display: block;
  /* 19.05.26: drop-shadow on the SVG itself replaces the prior
     white-glass backdrop. Two-layer shadow gives enough contrast
     to read on both light and dark image areas without a plate. */
  filter:
    drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7))
    drop-shadow(0 0 4px rgba(0, 0, 0, 0.45));
}

/* ---------- Play-style trigger (25.05.26) ----------
   For figures that carry data-lightbox-video the auto-injected trigger
   swaps from the small (i) puck in the corner to a large centred play
   overlay, so the video reads as the primary affordance on the image.
   Used on the BtM Era 2 figure (Warm Fur, Old Blood) so the embedded
   animation is visibly the main thing -- the still-image (i) lives in
   the prose alongside the era 2 description. */
.lightbox-trigger--play {
  /* Anchor at bottom-LEFT corner (mirror of the (i)'s bottom-right) so
     both affordances sit on the image at the same vertical line, with
     the play disc as the primary action visible from a distance and
     the (i) as the secondary detail link. 25.05.26 v2: was centred and
     near-bottom; 25% smaller per Caoimhin (84 -> 63, 64 -> 48 mobile). */
  top: auto;
  right: auto;
  bottom: 12px;
  left: 12px;
  width: 63px;
  height: 63px;
  transition: color 160ms ease, transform 200ms ease, opacity 200ms ease;
  /* Subtle resting opacity so the play disc reads as inviting rather
     than as a permanent UI bug. */
  opacity: 0.92;
}
.lightbox-trigger--play:hover,
.lightbox-trigger--play:focus-visible {
  color: var(--accent);
  transform: scale(1.06);
  opacity: 1;
}
.lightbox-trigger--play svg {
  width: 63px;
  height: 63px;
  /* The play disc has its own ring + dark backdrop in the SVG, so the
     base trigger's drop-shadow filter (sized for the small 26px (i)) is
     overkill here. A single soft shadow keeps it lifted off varied image
     backdrops without doubling the ring. */
  filter: drop-shadow(0 4px 18px rgba(0, 0, 0, 0.55));
}
@media (max-width: 576px) {
  .lightbox-trigger--play {
    width: 48px;
    height: 48px;
    bottom: 10px;
    left: 10px;
  }
  .lightbox-trigger--play svg {
    width: 48px;
    height: 48px;
  }
}

/* ---------- Overlay ----------
   Full-viewport modal. Hidden by default. 19.05.26: align-items
   flipped from center to flex-start so the panel anchors to the
   TOP of the viewport rather than centring vertically. With centred
   alignment, a longer caption (e.g. BtM Era 2 WFOB vs eras 1 + 3,
   or the AOoS caption with the bone-flute note) made the panel
   taller, which pushed the image upward to keep the panel centred -
   so the image visually shifted between adjacent lightbox views as
   the user navigated prev/next. Top-anchoring pins the image at a
   consistent screen position; captions extend downward as needed. */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: var(--s-5);
  /* 06.07.26: 0.92 -> 0.97. At 0.92 the page text ghosted through
     around the caption, part of the "crude text box" read the user
     flagged; near-opaque keeps focus on the media. */
  background: rgba(0, 0, 0, 0.97);
  overflow-y: auto;
}
.lightbox.is-open {
  display: flex;
}
.lightbox__panel {
  position: relative;
  max-width: min(1200px, 92vw);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  z-index: 1;
}

/* ---------- Media slot (image or video) ---------- */
.lightbox__media {
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: 80vh;
}
.lightbox__media img {
  max-width: 100%;
  max-height: 80vh;
  display: block;
  border-radius: 4px;
}
.lightbox__media iframe {
  width: min(1200px, 92vw);
  aspect-ratio: 16 / 9;
  height: auto;
  display: block;
  border: 0;
  border-radius: 4px;
}

/* ---------- Caption ----------
   Pulls from data-lightbox-caption, fallback to img alt. 19.05.26:
   lightbox.js now writes caption via innerHTML so inline markup
   (links, <small> aside notes) renders.
   06.07.26: caption gets the card-panel treatment (opaque dark
   surface, coral hairline, radius, padding). It previously sat as
   bare centred text on the 0.92 backdrop, where the page behind
   ghosted through around the lines and the whole thing read as a
   crude unstyled strip, per user. Opaque background also kills the
   ghosting regardless of backdrop opacity. */
.lightbox__caption {
  margin: 0;
  color: #FFFFFF;
  font-family: var(--font-serif);
  font-size: var(--body-small);
  line-height: 1.55;
  text-align: center;
  /* 19.05.26: widened from 70ch (~600px) to min(900px, 90vw) per
     user direction - matches the .et-card prose container width so
     the caption reads at the same visual scale as the site's other
     long-form text rather than as a narrow column. */
  max-width: min(900px, 90vw);
  margin-inline: auto;
  background: #14191F;
  border: 1px solid rgba(255, 107, 74, 0.12);
  border-radius: var(--radius-md);
  padding: clamp(12px, 1.6vw, 18px) clamp(16px, 2.4vw, 28px);
}
.lightbox__caption[hidden] {
  display: none;
}
.lightbox__caption a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.55);
  text-underline-offset: 2px;
  transition: text-decoration-color 160ms ease;
}
.lightbox__caption a:hover,
.lightbox__caption a:focus-visible {
  text-decoration-color: #FFFFFF;
}
/* 19.05.26: footnote-style aside inside a lightbox caption. Used for
   the AOoS bone-flute note (no Irish prehistoric bone instruments
   survive; we proceed on the global record). Sits on its own line
   beneath the main descriptive sentence, smaller and muted so it
   reads as commentary not description. */
.lightbox__caption-note {
  display: block;
  margin-top: clamp(8px, 1.2vw, 14px);
  font-size: 0.86em;
  font-style: normal;
  opacity: 0.75;
  line-height: 1.5;
}

/* Multi-image grid (19.05.26): used by figures that carry a
   data-lightbox-images attribute (comma-separated image URLs).
   Currently the VotF curlew tile uses this to open the four
   narrator portraits in one view. 2x2 grid; each image scaled to
   fit its cell with object-fit: contain so the full artwork is
   visible. Mobile keeps the 2x2 layout since each tile is small. */
.lightbox__media--multi {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(6px, 1vw, 12px);
  width: 100%;
  max-height: 80vh;
}
.lightbox__media--multi img {
  width: 100%;
  height: 100%;
  max-height: 38vh;
  object-fit: contain;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 4px;
}

/* ---------- Panel content (25.05.26) ----------
   Used by figures with data-lightbox-panel-ref where the media slot
   renders arbitrary HTML from a template (e.g. the Support popup).
   The slot otherwise centres a single image; here we let the panel
   sit on the dark overlay backdrop as a self-contained card. The
   styling for the panel content (e.g. .support-modal) lives near
   the relevant section so the panel can pick up its own look without
   the lightbox infrastructure prescribing it. */
.lightbox__media--panel {
  display: block;
  max-height: none;
  width: min(560px, 92vw);
  margin-inline: auto;
}

/* ---------- Close button (18.05.26: 33% smaller per user) ---------- */
.lightbox__close {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(50%, -50%);
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #FFFFFF;
  color: #0F1419;
  cursor: pointer;
  z-index: 2;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 160ms ease, color 160ms ease;
}
.lightbox__close:hover,
.lightbox__close:focus-visible {
  background: var(--accent);
  color: #FFFFFF;
}
.lightbox__close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.lightbox__close svg {
  width: 14px;
  height: 14px;
  display: block;
}

/* ---------- Prev / next navigation (18.05.26 revised) ----------
   Shown when the opened lightbox figure belongs to a navigable group
   (currently only the BtM era figures). Hidden by default via the
   `hidden` attribute; lightbox.js toggles them on/off per group.
   Positioned ON the image (left/right inset 12px) per user direction.
   No pill background - just a white arrow glyph with drop-shadow for
   contrast against varied image content. Hover/focus flips to accent. */
.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: #FFFFFF;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6));
  cursor: pointer;
  z-index: 2;
  -webkit-tap-highlight-color: transparent;
  transition: color 160ms ease;
}
.lightbox__nav:hover,
.lightbox__nav:focus-visible {
  color: var(--accent);
}
.lightbox__nav:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.lightbox__nav svg {
  width: 28px;
  height: 28px;
  display: block;
}
.lightbox__nav--prev { left: 12px; }
.lightbox__nav--next { right: 12px; }
.lightbox__nav[hidden] { display: none; }

/* ---------- BtM era-specific visibility ----------
   The BtM card stacks three era figures at the same position, each with
   data-lightbox. Only the active era's image is visually present
   (opacity 1); the other two sit at opacity 0 in the same space. We
   suppress the info-icon on the inactive eras so they don't pick up tab
   focus or stack three triggers behind the visible one. */
.et-card--btm .btm-stage__figure .lightbox-trigger {
  visibility: hidden;
}
.et-card--btm[data-era="1"] .btm-stage__figure[data-era="1"] .lightbox-trigger,
.et-card--btm[data-era="2"] .btm-stage__figure[data-era="2"] .lightbox-trigger,
.et-card--btm[data-era="3"] .btm-stage__figure[data-era="3"] .lightbox-trigger {
  visibility: visible;
}

/* ---------- Body lock ----------
   Prevents background scroll while the lightbox is open. */
body.lightbox-open {
  overflow: hidden;
}

/* ---------- Narrow viewport tuning ---------- */
@media (max-width: 576px) {
  .lightbox {
    padding: var(--s-3);
  }
  .lightbox-trigger {
    width: 26px;
    height: 26px;
    right: 10px;
    bottom: 10px;
  }
  .lightbox-trigger svg {
    width: 24px;
    height: 24px;
  }
  /* Tighten nav insets at narrow widths. */
  .lightbox__nav--prev { left: 6px; }
  .lightbox__nav--next { right: 6px; }
  .lightbox__nav { width: 36px; height: 36px; }
  .lightbox__nav svg { width: 22px; height: 22px; }
}