/*
 * The fullscreen viewers (UI/TimelinePhotoSheet for the gallery on the time axis, UI/PointMediaViewer
 * for a profile point's photo or video; markup in templates/lightbox/_panel.html.twig, behaviour in
 * assets/lightbox/lightbox_controller.ts): a lightbox over everything, hidden until an item is
 * chosen — by the controller (data-open + data-active; the Fullscreen API where the browser has it)
 * or, without JavaScript, by the :target panel. Fixed to the viewport either way, so iPhone Safari
 * (no element fullscreen) gets the same picture. Dark ground: a photo is looked at, not read.
 *
 * One stylesheet for both (loaded by assets/app.ts, not per component): either viewer may be on a
 * page without the other.
 *
 * The controls are paper on a dark translucent disc — they read on the dark ground and over a
 * bright photo alike (black-on-black icons were invisible once; PublicAccessibilityTest checks the
 * contrast of these tokens). They sit in their own row above the media, never under a zoomed photo.
 * The photo itself is shown as it is — no halftone screen over the full resolution.
 *
 * Touch: horizontal swipes belong to the controller (prev/next), vertical pans and pinch-zoom to
 * the browser (`touch-action: pan-y pinch-zoom`); a zoomed photo scrolls inside its figure.
 */
@layer components {
    .lightbox {
        --lightbox-ground: #141312;
        --lightbox-ink: var(--color-bg);
        --lightbox-control-backing: #141312;
        --lightbox-control-backing-hover: #2d2b2b;
        --lightbox-focus: #62c5ee;

        position: fixed;
        inset: 0;
        z-index: 60;
        display: none;
        background: var(--lightbox-ground);
        color: var(--lightbox-ink);
        overscroll-behavior: contain;
        touch-action: pan-y pinch-zoom;
    }

    .lightbox[data-open],
    .lightbox:has(.lightbox__panel:target) {
        display: block;
    }

    .lightbox__panel {
        display: none;
        flex-direction: column;
        block-size: 100%;
        padding-block: env(safe-area-inset-top) env(safe-area-inset-bottom);
        padding-inline: env(safe-area-inset-left) env(safe-area-inset-right);
    }

    .lightbox__panel[data-active],
    .lightbox:not([data-open]) .lightbox__panel:target {
        display: flex;
    }

    .lightbox__head {
        position: relative;
        z-index: 2;
        display: flex;
        align-items: center;
        gap: var(--space-2);
        padding: var(--space-2) var(--space-2) var(--space-1);
    }

    .lightbox__counter {
        flex: 1;
        font-size: var(--text-xs);
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--lightbox-ink);
    }

    /* Two classes: `.btn` (app.css) sets the ink colour at the same specificity. */
    .lightbox .lightbox__nav {
        min-inline-size: 44px;
        min-block-size: 44px;
        border: 1px solid color-mix(in srgb, var(--lightbox-ink) 35%, transparent);
        border-radius: 50%;
        background: color-mix(in srgb, var(--lightbox-control-backing) 72%, transparent);
        color: var(--lightbox-ink);
        transition: background-color 120ms ease, transform 120ms ease;
    }

    .lightbox .lightbox__nav svg {
        inline-size: 22px;
        block-size: 22px;
        color: inherit;
        fill: currentColor;
    }

    .lightbox .lightbox__nav:hover {
        background: var(--lightbox-control-backing-hover);
        color: var(--lightbox-ink);
    }

    .lightbox .lightbox__nav:active {
        transform: scale(0.94);
    }

    .lightbox .lightbox__nav[aria-disabled='true'] {
        opacity: 0.4;
        pointer-events: none;
    }

    .lightbox__figure {
        position: relative;
        z-index: 0;
        display: flex;
        flex: 1;
        min-block-size: 0;
        align-items: center;
        justify-content: center;
        margin: 0;
        overflow: hidden;
    }

    .lightbox__figure[aria-busy='true'] {
        animation: lightbox-pulse 1.2s ease-in-out infinite alternate;
    }

    .lightbox__img,
    .lightbox__video {
        display: block;
        max-inline-size: 100%;
        max-block-size: 100%;
        inline-size: auto;
        block-size: auto;
        object-fit: contain;
    }

    .lightbox__img {
        cursor: zoom-in;
    }

    .lightbox__video {
        inline-size: 100%;
        block-size: 100%;
        background: #000;
    }

    /* Zoomed: the photo at its own (full) resolution, panned by scrolling the figure. */
    .lightbox__figure[data-zoom='on'] {
        display: block;
        overflow: auto;
        touch-action: pan-x pan-y pinch-zoom;
    }

    .lightbox__figure[data-zoom='on'] .lightbox__img {
        max-inline-size: none;
        max-block-size: none;
        cursor: zoom-out;
    }

    .lightbox__failed {
        position: absolute;
        inset-block-end: 0;
        padding: 6px;
        font-size: 13px;
        color: var(--lightbox-ink);
    }

    .lightbox__foot {
        position: relative;
        z-index: 2;
        display: flex;
        flex-direction: column;
        gap: var(--space-1);
        max-inline-size: 40rem;
        inline-size: 100%;
        margin-inline: auto;
        padding: var(--space-2) var(--space-3) var(--space-3);
    }

    .lightbox__title {
        margin: 0;
        font-size: var(--text-h4);
        color: var(--lightbox-ink);
    }

    .lightbox__duration {
        font-weight: 400;
        color: color-mix(in srgb, var(--lightbox-ink) 80%, transparent);
    }

    .lightbox__title:focus {
        outline: none;
    }

    .lightbox__title:focus-visible,
    .lightbox a:focus-visible,
    .lightbox button:focus-visible,
    .lightbox video:focus-visible {
        outline: 2px solid var(--lightbox-focus);
        outline-offset: 2px;
    }

    .lightbox__caption {
        margin: 0;
        font-size: 18px;
        font-style: italic;
        line-height: 1.4;
        text-wrap: pretty;
    }

    .lightbox__actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--space-2);
        margin: 0;
        font-size: var(--text-s);
    }

    .lightbox .lightbox__file {
        color: var(--color-accent-300);
    }

    /* The zoom button needs the controller; without it the link to the full file does the job. */
    .lightbox .lightbox__zoom {
        display: none;
        min-block-size: 44px;
        color: var(--lightbox-ink);
    }

    .lightbox[data-enhanced] .lightbox__zoom {
        display: inline-flex;
    }

    @keyframes lightbox-pulse {
        from { opacity: 1; }
        to { opacity: 0.6; }
    }

    @media (prefers-reduced-motion: reduce) {
        .lightbox__figure[aria-busy='true'] {
            animation: none;
        }

        .lightbox .lightbox__nav {
            transition: none;
        }

        .lightbox .lightbox__nav:active {
            transform: none;
        }
    }
}