/*
=========================================================
LIGHTBOX STYLESHEET - Joshua Dalton Media
=========================================================

Purpose
-------
This file contains the shared lightbox styles used across joshuadaltonmedia.com. It is designed to support reusable modal media viewing for embedded video, local video, and images, including standard landscape media, vertical media, 4:5 media, and scope/cinematic aspect ratios.

What belongs in this file
-------------------------
- Shared lightbox shell and overlay styling
- Shared lightbox inner layout and media container styling
- Shared caption and close button styling
- Shared aspect-ratio variants for different media formats
- Shared responsive breakpoint rules for the lightbox system

Asset path usage
----------------
This stylesheet is intended to be referenced from pages with:

<link rel="stylesheet" href="/assets/css/lightbox.css">

Relationship to page files
--------------------------
Page files should:
1. load this stylesheet in the head
2. use the shared lightbox markup and JS hooks consistently
3. keep only truly page-specific media trigger styling outside this file

Maintenance rule
----------------
If a selector is not part of the shared lightbox system itself, it should not be added here. Keep this file focused on reusable overlay, media container, caption, close control, and media format behaviour.
*/

/* ================= LIGHTBOX ================= */
.lb{position:fixed;inset:0;background:rgba(0,0,0,.88);display:none;align-items:center;justify-content:center;z-index:2000}
.lb.is-open{display:flex}
.lb-inner{width:min(92vw,1200px);display:grid;gap:clamp(8px,3vw,10px);padding-bottom:env(safe-area-inset-bottom);justify-items:center;max-height:100vh}
.lb-media{border-radius:12px;overflow:hidden;background:#000;aspect-ratio:16/9;width:100%}
.lb-media iframe,.lb-media video,.lb-media img{width:100%;height:100%;display:block;object-fit:contain}
.lb-ui{display:flex;gap:clamp(8px,3vw,10px);justify-content:center;align-items:center;color:#fff;max-width:100%;text-align:center}
.lb-cap{opacity:.9;max-width:90%;white-space:normal;overflow-wrap:anywhere}
.lb-close{position:fixed;top:calc(8px + env(safe-area-inset-top));right:calc(8px + env(safe-area-inset-right));background:var(--ink);border:1px solid rgba(255,255,255,.4);color:var(--accent);border-radius:999px;padding:6px 10px;margin:8px;cursor:pointer;z-index:2100}
.lb-media.is-vertical{aspect-ratio:9/16;max-width:420px;max-height:86vh;width:100%}
.lb-media.is-vertical iframe,.lb-media.is-vertical video{object-fit:cover}
.lb-media.is-45{aspect-ratio:4/5;max-width:520px;max-height:86vh;width:100%}
.lb-media.is-45 img,.lb-media.is-45 video,.lb-media.is-45 iframe{object-fit:cover}
.lb-media.is-scope{aspect-ratio:2.39/1;max-width:100%;max-height:82vh}
.lb-media.is-scope img,.lb-media.is-scope video,.lb-media.is-scope iframe{object-fit:cover}

@media(min-width:360px){
	.lb-inner{width:min(92vw,1200px)}
	.lb-close{padding:8px 12px}
}

@media(min-width:700px){
	.lb-cap{font-size:clamp(1rem,2vw,1.2rem)}
}

@media(min-width:1024px){
	.lb-inner{width:min(88vw,1200px)}
	.lb-cap{max-width:720px}
}