/* ab-media.css: the autobuild media kit's layout, v1. Restyle freely with the variables or your own rules, but keep
   the sizing: portrait films one per row on a phone and no taller than the screen, pictures contained and uncropped.
   Put the kit inside a box that scrolls (overflow: auto), never a fixed-height box with overflow: hidden.
     --ab-fg, --ab-muted, --ab-accent   text, secondary text, focus ring
     --ab-gap                            space between things (16px)
     --ab-chrome                         height your own frame takes on screen (title bar, close button): 120px */
.ab-media { --ab-gap: 16px; --ab-chrome: 120px; display: grid; gap: calc(var(--ab-gap) * 1.5); min-width: 0; color: var(--ab-fg, inherit); }
.ab-media *, .ab-lightbox * { box-sizing: border-box; }
.ab-media figure { margin: 0; min-width: 0; }
.ab-media figcaption { margin-top: 6px; font-size: .85em; color: var(--ab-muted, inherit); }
.ab-title { margin: 0; }
.ab-client, .ab-lede, .ab-text, .ab-credits { margin: 0; }
.ab-client, .ab-credits { font-size: .85em; color: var(--ab-muted, inherit); }
.ab-section { display: grid; gap: var(--ab-gap); min-width: 0; }
.ab-heading { margin: 0; font: inherit; font-weight: 600; }

/* films */
.ab-films { display: grid; gap: var(--ab-gap); grid-template-columns: minmax(0, 1fr); }
.ab-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.ab-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ab-portrait { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); justify-items: center; }
.ab-portrait .ab-film { width: min(100%, 360px, calc((100vh - var(--ab-chrome)) * 9 / 16)); width: min(100%, 360px, calc((100svh - var(--ab-chrome)) * 9 / 16)); }
.ab-portrait .ab-frame { aspect-ratio: 9 / 16; }

/* pictures: whole, centred, never taller than the screen; tap for full size */
.ab-image { display: grid; justify-items: center; }
.ab-zoom { all: unset; display: block; max-width: 100%; cursor: zoom-in; }
.ab-zoom:focus-visible { outline: 2px solid var(--ab-accent, currentColor); outline-offset: 3px; }
.ab-image img { display: block; width: auto; max-width: 100%; height: auto; max-height: calc(100vh - var(--ab-chrome)); max-height: calc(100svh - var(--ab-chrome)); object-fit: contain; }
.ab-group { display: grid; gap: var(--ab-gap); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 720px) {
  .ab-group[data-layout="row-2"], .ab-group[data-layout="row-match"], .ab-group[data-layout="split"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-group[data-layout="row-3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* sound */
.ab-sounds { display: grid; gap: calc(var(--ab-gap) * .75); }
.ab-audio audio { display: block; width: 100%; }

/* full-size picture */
.ab-lightbox { width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh; margin: 0; padding: 0; border: 0; background: rgba(0, 0, 0, .94); color: #fff; }
.ab-lightbox::backdrop { background: rgba(0, 0, 0, .6); }
.ab-lb-scroll { width: 100%; height: 100%; overflow: auto; display: grid; place-items: center; padding: 56px 12px 16px; }
.ab-lb-scroll img { display: block; max-width: 100%; height: auto; }
.ab-close { position: fixed; top: max(8px, env(safe-area-inset-top)); right: max(8px, env(safe-area-inset-right)); width: 44px; height: 44px; border: 0; border-radius: 22px; background: rgba(255, 255, 255, .16); color: #fff; font: 28px/44px system-ui, sans-serif; cursor: pointer; }
.ab-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }