/**
 * lightbox.css — Lightbox gallery (ui-lightbox | .ui-lightbox)
 *
 * @layer      variables, components
 * @requires   layers.css, _variables.css, dialog.css, carousel.css, button.css
 * @uses       command="show-modal" — Invoker Commands open fullscreen dialog (no JS)
 * @uses       @container — thumb column count at narrow widths
 * @uses       @starting-style — dialog slide scale/opacity on snap
 * @uses       Embla sync — requires zazz/scripts/embla.js for carousel behaviour
 * @tokens     --ui-lightbox-* (@layer variables)
 */

@layer variables {
  :root {
    --ui-lightbox-aspect-ratio: 3 / 2;
    --ui-lightbox-object-fit: cover;
    --ui-lightbox-slide-radius: var(--radius-lg);
    --ui-lightbox-thumb-radius: var(--radius-md);
    --ui-lightbox-thumb-size: var(--step-16);
    --ui-lightbox-thumb-opacity: 0.5;
    --ui-lightbox-thumb-opacity--active: 1;
    --ui-lightbox-thumb-columns: 6;
    --ui-lightbox-thumb-gap: var(--step-1_5);
    --ui-lightbox-img-border: 1px solid var(--faded);

    /* Reveal transitions/animations */
    --ui-lightbox-slide-opacity--start: 0;
    --ui-lightbox-slide-opacity--end: 1;
    --ui-lightbox-slide-scale--start: 0.9;
    --ui-lightbox-slide-scale--end: 1;
    --ui-lightbox-img-scale--hover: 1.03;
    --ui-lightbox-img-filter--hover: brightness(0.8);
    --ui-lightbox-img-scale--active: 1;
    --ui-lightbox-img-filter--active: brightness(0.5);
    --ui-lightbox-img-transition-property: transform, filter;
    --ui-lightbox-img-transition-duration: calc(var(--default-transition-duration) * 3);
    --ui-lightbox-img-transition-timing-function: var(--default-transition-timing-function);
    --ui-lightbox-img-transition-delay: 0ms;
  }
}

@layer zazz.components {
  /* ===========================================================================
  LIGHTBOX — image gallery with fullscreen dialog slideshow
  - Inline gallery: main Embla carousel + linked thumb strip.
  - Gallery slides are <button command="show-modal"> — opens dialog at current index.
  - Dialog repeats main carousel + thumbs with prev/next navigation.
  - No JavaScript required for open/close — uses Invoker Commands API.
  =========================================================================== */

  /* ---------------------------------------------------------------------------
  GALLERY — :where(ui-lightbox, .ui-lightbox)
  --------------------------------------------------------------------------- */

  :where(ui-lightbox, .ui-lightbox) {
    display: flex;
    flex-direction: column;
  }

  @container section (width <= 40rem) {
    :where(ui-lightbox, .ui-lightbox) {
      --ui-lightbox-thumb-columns: 4;
    }
  }

  /* ---------------------------------------------------------------------------
  INLINE GALLERY — [data-slot~="lightbox-gallery"] / [data-slot~="lightbox-stage"]
  --------------------------------------------------------------------------- */

  [data-slot~="lightbox-gallery"] {
    inline-size: 100%;
  }

  [data-slot~="lightbox-stage"] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: calc(var(--ui-lightbox-thumb-gap) * 2);
  }

  [data-slot~="lightbox-stage"] > [data-slot~="carousel-viewport"] {
    border-radius: var(--ui-lightbox-slide-radius);
    background: var(--card);
  }

  [data-slot~="lightbox-stage"]
    > [data-slot~="carousel-viewport"]
    > [data-slot~="carousel-container"] {
    border-radius: var(--ui-lightbox-slide-radius);
    margin-inline-start: calc(var(--gap-sm) * -1);
  }

  [data-slot~="lightbox-stage"] [data-slot~="lightbox-slide"] {
    appearance: none;
    border: none;
    background: none;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    block-size: 100%;
    cursor: zoom-in;
    overflow: clip;
    padding-inline-start: var(--gap-sm);
  }

  [data-slot~="lightbox-stage"] [data-slot~="lightbox-content"] {
    --_ring-width: 0px;

    aspect-ratio: var(--ui-lightbox-aspect-ratio);
    inline-size: 100%;
    block-size: 100%;
    overflow: clip;
    position: relative;
    border-radius: var(--ui-lightbox-slide-radius);
    border: var(--ui-lightbox-img-border);

    /* transparent twin of the inset ring for forced-colors / high-contrast modes */
    outline: var(--outline-width) var(--outline-style) transparent;
    outline-offset: calc(var(--outline-width) * -1);
  }

  /* The inset ring paints on an overlay so it sits above the slide image (an
     inset box-shadow on the figure itself would hide behind the img); the
     ring width animates from 0 so the ring grows in smoothly on focus. */
  [data-slot~="lightbox-stage"] [data-slot~="lightbox-content"]::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    box-shadow: inset 0 0 0 var(--_ring-width) var(--ring-color);
    transition: box-shadow var(--default-transition-duration)
      var(--default-transition-timing-function);
  }

  [data-slot~="lightbox-stage"] [data-slot~="lightbox-slide"]:focus-visible {
    outline: none;
  }

  [data-slot~="lightbox-stage"]
    [data-slot~="lightbox-slide"]:focus-visible
    [data-slot~="lightbox-content"] {
    --_ring-width: var(--ring-width);

    outline-color: transparent;
  }

  [data-slot~="lightbox-stage"] [data-slot~="lightbox-slide"] img {
    aspect-ratio: var(--ui-lightbox-aspect-ratio);
    inline-size: 100%;
    block-size: 100%;
    object-fit: var(--ui-lightbox-object-fit);
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
    transition-property: var(--ui-lightbox-img-transition-property);
    transition-duration: var(--ui-lightbox-img-transition-duration);
    transition-timing-function: var(--ui-lightbox-img-transition-timing-function);
    transition-delay: var(--ui-lightbox-img-transition-delay);
    transform: scale(var(--ui-lightbox-img-scale));
    opacity: var(--ui-lightbox-img-opacity);
  }

  [data-slot~="lightbox-stage"] [data-slot~="lightbox-slide"]:hover img {
    transform: scale(var(--ui-lightbox-img-scale--hover));
    filter: var(--ui-lightbox-img-filter--hover);
  }

  [data-slot~="lightbox-stage"] [data-slot~="lightbox-slide"]:active img {
    transform: scale(var(--ui-lightbox-img-scale--active));
    filter: var(--ui-lightbox-img-filter--active);
  }

  /* ---------------------------------------------------------------------------
  thumbs — [data-slot~="lightbox-thumbs"] / [data-slot~="lightbox-thumb"]
  --------------------------------------------------------------------------- */

  [data-slot~="lightbox-thumbs"] {
    position: relative;
    z-index: 2;
  }

  [data-slot~="lightbox-stage"] [data-slot~="lightbox-thumbs"] {
    display: flex;
    align-items: center;
    gap: var(--ui-lightbox-thumb-gap);
  }

  [data-slot~="lightbox-stage"] [data-slot~="lightbox-thumbs"] [data-slot~="carousel-viewport"] {
    flex: 1;
    min-inline-size: 0;
    border-radius: var(--ui-lightbox-thumb-radius);
  }

  [data-slot~="lightbox-thumbs-prev"],
  [data-slot~="lightbox-thumbs-next"] {
    flex-shrink: 0;
  }

  [data-slot~="lightbox-thumbs"] [data-slot~="carousel-container"] {
    gap: var(--ui-lightbox-thumb-gap);
  }

  /* Gallery thumbs: fill track evenly, centered, max 6 columns */
  [data-slot~="lightbox-stage"] [data-slot~="lightbox-thumbs"] [data-slot~="carousel-container"] {
    justify-content: start;
  }

  [data-slot~="lightbox-stage"] [data-slot~="lightbox-thumb"] {
    max-inline-size: calc(
      (100% - (var(--ui-lightbox-thumb-gap) * (var(--ui-lightbox-thumb-columns) - 1))) /
        var(--ui-lightbox-thumb-columns)
    );
  }

  [data-slot~="lightbox-thumb-content"] {
    --_ring-width: 0px;
    --_ring: var(--ring-color);

    appearance: none;
    cursor: pointer;
    position: relative;
    border: var(--ui-lightbox-img-border);
    border-radius: var(--ui-lightbox-thumb-radius);
    overflow: clip;

    /* transparent twin of the inset ring for forced-colors / high-contrast modes */
    outline: var(--outline-width) var(--outline-style) transparent;
    outline-offset: calc(var(--outline-width) * -1);
  }

  /* The inset ring paints on an overlay so it sits above the thumb image (an
     inset box-shadow on the button itself would hide behind the img). */
  [data-slot~="lightbox-thumb-content"]::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    box-shadow: inset 0 0 0 var(--_ring-width) var(--_ring);
    transition: box-shadow var(--default-transition-duration)
      var(--default-transition-timing-function);
  }

  [data-slot~="lightbox-thumb"] img {
    opacity: var(--ui-lightbox-thumb-opacity);
    transition:
      opacity var(--default-transition-duration) var(--default-transition-timing-function),
      transform var(--default-transition-duration) var(--default-transition-timing-function);
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  [data-slot~="lightbox-thumb"]:hover img {
    opacity: var(--ui-lightbox-thumb-opacity--active);
  }

  [data-slot~="lightbox-thumb"].is-active img {
    transform: scale(1.1);
    opacity: var(--ui-lightbox-thumb-opacity--active);
  }

  [data-slot~="lightbox-thumb"]:focus-visible {
    outline: none;
  }

  [data-slot~="lightbox-thumb"]:focus-visible [data-slot~="lightbox-thumb-content"] {
    --_ring-width: var(--ring-width);

    outline-color: transparent;
  }

  [data-slot~="lightbox-thumb"]:focus-visible img {
    transform: scale(1);
  }

  /* ---------------------------------------------------------------------------
  DIALOG — [data-slot~="lightbox-dialog"] (fullscreen dark overlay)
  --------------------------------------------------------------------------- */

  [data-slot~="lightbox-dialog"] {
    --ui-lightbox-thumb-radius: var(--radius-sm);
    --ui-dialog-background: transparent;
    --ui-dialog-border: none;

    overflow: clip;
    pointer-events: none;
    outline: none;
  }

  [data-slot~="lightbox-dialog"] [data-slot~="lightbox-thumb"] img {
    border-radius: var(--ui-lightbox-thumb-radius);
  }

  [data-slot~="lightbox-dialog"] [data-slot~="dialog-content"] {
    grid-template-rows: 1fr;
    max-block-size: 100svh;
    block-size: 100svh;
    overflow: clip;
  }

  [data-slot~="lightbox-dialog"] :where(ui-carousel, .ui-carousel) {
    display: grid;
    grid-template-rows: 1fr auto;
    block-size: 100%;
    max-block-size: 100svh;
  }

  [data-slot~="lightbox-dialog"] [data-slot~="carousel-container"] {
    block-size: 100%;
  }

  [data-slot~="lightbox-dialog"] [data-slot~="carousel-viewport"] {
    outline: none;
  }

  [data-slot~="lightbox-dialog"]
    :where(ui-carousel, .ui-carousel)
    > [data-slot~="carousel-viewport"]:first-of-type {
    min-block-size: 0;
  }

  [data-slot~="lightbox-dialog"] [data-slot~="lightbox-thumbs"] {
    padding-block: var(--gap-sm);
    pointer-events: auto;
  }

  [data-slot~="lightbox-dialog"] [data-slot~="lightbox-thumbs"] [data-slot~="carousel-container"] {
    justify-content: center;
    padding-block: var(--gap-xs);
  }

  [data-slot~="lightbox-dialog"] [data-slot~="lightbox-thumb"] {
    flex: 0 0 var(--ui-lightbox-thumb-size);
    inline-size: var(--ui-lightbox-thumb-size);
  }

  [data-slot~="lightbox-dialog"]
    [data-slot~="lightbox-thumb"]:focus-visible
    [data-slot~="lightbox-thumb-content"] {
    --_ring: var(--foreground);
  }

  /* ---------------------------------------------------------------------------
  SLIDE — [data-slot~="lightbox-slide"] (dialog full-size slides)
  --------------------------------------------------------------------------- */

  [data-slot~="lightbox-dialog"] [data-slot~="lightbox-slide"] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-block-size: 0;
    min-inline-size: 0;
    padding: clamp(var(--gap-sm), 4vi, var(--gap-lg));
  }

  [data-slot~="lightbox-dialog"] [data-slot~="lightbox-content"] {
    display: flex;
    align-items: center;
    justify-content: center;
    block-size: 100%;
    inline-size: 100%;
    min-block-size: 0;
    min-inline-size: 0;
    max-block-size: 100%;
    max-inline-size: 100%;
  }

  [data-slot~="lightbox-dialog"] [data-slot~="lightbox-slide"] img {
    --ui-lightbox-thumb-radius: var(--radius-xs);

    border-radius: var(--ui-lightbox-slide-radius);
    border: var(--ui-lightbox-img-border);
    overflow: clip;
    inline-size: 100%;
    block-size: 100%;
    max-block-size: fit-content;
    max-inline-size: fit-content;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
    transition:
      opacity var(--default-transition-duration) var(--default-transition-timing-function),
      transform var(--default-transition-duration) var(--default-transition-timing-function);
    opacity: var(--ui-lightbox-slide-opacity--start);
    transform: scale(var(--ui-lightbox-slide-scale--start));
    pointer-events: auto;
  }

  [data-slot~="lightbox-dialog"] [data-slot~="lightbox-slide"].is-in-view.is-snapped img {
    opacity: var(--ui-lightbox-slide-opacity--end);
    transform: scale(var(--ui-lightbox-slide-scale--end));

    @starting-style {
      opacity: 0;
      transform: scale(var(--ui-lightbox-slide-scale--start));
    }
  }

  /* ---------------------------------------------------------------------------
  NAV BUTTONS — [data-slot~="lightbox-prev"] / [data-slot~="lightbox-next"] (icon-size .ui-button)
  --------------------------------------------------------------------------- */

  [data-slot~="lightbox-prev"],
  [data-slot~="lightbox-next"] {
    --ui-button-ring-color: var(--foreground);
    --ring-opacity: 80%;

    pointer-events: auto;
    position: absolute;
    inset-block-start: 50%;
    transform: translateY(-50%);
    z-index: 50;
  }

  [data-slot~="lightbox-prev"] {
    inset-inline-start: var(--gap-md);
  }

  [data-slot~="lightbox-next"] {
    inset-inline-end: var(--gap-md);
  }

  /* ---------------------------------------------------------------------------
  CLOSE BUTTON — top-right
  --------------------------------------------------------------------------- */

  [data-slot~="lightbox-close"] {
    pointer-events: auto;
    position: absolute;
    inset-block-start: var(--gap-sm);
    inset-inline-end: var(--gap-sm);
    z-index: 10;
  }

  /* ---------------------------------------------------------------------------
  COUNTER — slide count indicator (optional)
  --------------------------------------------------------------------------- */

  [data-slot~="lightbox-counter"] {
    position: absolute;
    inset-block-end: var(--gap-sm);
    /* left + physical translate is a direction-neutral centering idiom; keep physical */
    left: 50%;
    translate: -50% 0;
    opacity: 0.7;
    font-size: var(--font-size-sm);
    font-variant-numeric: tabular-nums;
    pointer-events: none;
  }
}