/* Media viewer shared by sections (core/media-viewer.js): a 16:9 frame showing one slide (a photo, or a video tile) with previous / next arrows
   over its sides, and a row of thumbnails under it, and the full-screen view its slides open in (core/lightbox.js). Sections place and
   size the block; this file draws it. */
.viewer {
  display: grid;
  gap: 12px;
  min-width: 0;
}

/* vertical swipes over the frame scroll the page; horizontal ones flip the photos (core/media-viewer.js) */
.viewer-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 4px;
  overflow: hidden;
  touch-action: pan-y;
}

.viewer-frame > picture {
  display: block;
  width: 100%;
  height: 100%;
}

.viewer-frame > [hidden] { display: none; }

/* photos fill the frame on white; a "fit" photo is shown whole on black instead */
.viewer-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #fff;
}

.viewer-photo-fit {
  object-fit: contain;
  background: #000;
}

/* previous / next arrows: plain line chevrons in ink, turning accent on hover, bare on the picture */
.viewer-arrow {
  position: absolute;
  top: 50%;
  display: grid;
  place-items: center;
  width: 56px;
  height: 64px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: none;
  color: var(--ink);
  cursor: pointer;
  translate: 0 -50%;
  transition: color .2s;
}

.viewer-arrow-prev { left: 20px; }
.viewer-arrow-next { right: 20px; }

.viewer-arrow svg {
  width: 40px;
  height: 40px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* over a photo on white the arrows turn black */
.viewer-frame:has(> picture:not([hidden]) .viewer-photo:not(.viewer-photo-fit)) .viewer-arrow:not(:hover) { color: #000; }

.viewer-arrow:focus-visible {
  outline: 2px solid var(--circle-base);
  outline-offset: 2px;
}

/* the full-screen button in the frame's top right corner; the photos under it open the same view on click */
.viewer-expand {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: none;
  color: var(--ink);
  cursor: pointer;
  transition: color .2s;
}

.viewer-expand svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.viewer-expand:focus-visible {
  outline: 2px solid var(--circle-base);
  outline-offset: 2px;
}

/* the corner icon is not drawn: a click on the photo opens the view, and the button shows only when reached by keyboard, so keyboard
   and screen reader users keep their way in and focus still returns to it on close */
.viewer-expand:not(:focus-visible) { opacity: 0; }

.viewer-frame:has(.viewer-expand) > picture { cursor: zoom-in; }

.viewer-thumbs {
  display: flex;
  gap: 8px;
}

.viewer-thumb {
  flex: 0 1 112px;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  cursor: pointer;
  opacity: .6;
  transition: opacity .2s, border-color .2s;
}

.viewer-thumb[aria-pressed="true"] { opacity: 1; }

.viewer-thumb[aria-pressed="true"] { border-color: var(--circle-base); }

.viewer-thumb:focus-visible {
  outline: 2px solid var(--circle-base);
  outline-offset: 2px;
}

.viewer-thumb picture,
.viewer-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* the full-screen view: a modal dialog over the whole viewport, the video or photo shown whole at its centre (a photo dialog also takes the
   viewer's arrows); the page under it does not scroll */
:root:has(.viewer-dialog[open]) { overflow: hidden; }

.viewer-dialog {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 72px var(--gutter);
  border: 0;
  background: rgb(0 0 0 / .94);
  color: var(--ink);
}

.viewer-dialog[open] {
  display: grid;
  place-items: center;
}

.viewer-dialog::backdrop { background: transparent; }

/* a photo's holder has no box of its own, so a click beside the photo lands on the dialog and closes it */
.viewer-dialog-media { display: contents; }

.viewer-dialog :is(video, img) {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: calc(100dvh - 144px);
  border-radius: 4px;
  background: var(--bg);
}

/* a photo dialog runs the photo edge to edge on phones, its arrows over it */
.viewer-dialog:has(.viewer-arrow) { padding-inline: 0; }

.viewer-dialog .viewer-arrow { position: fixed; }

.viewer-dialog .viewer-arrow-prev { left: max(4px, env(safe-area-inset-left, 0px)); }
.viewer-dialog .viewer-arrow-next { right: max(4px, env(safe-area-inset-right, 0px)); }

.viewer-dialog-close {
  position: fixed;
  top: max(12px, env(safe-area-inset-top, 0px));
  right: max(12px, env(safe-area-inset-right, 0px));
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: none;
  color: var(--ink);
  cursor: pointer;
  transition: color .2s;
}

.viewer-dialog-close svg {
  width: 32px;
  height: 32px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.viewer-dialog-close:focus-visible {
  outline: 2px solid var(--circle-base);
  outline-offset: 2px;
}

/* short (landscape phone) screens: the media takes the height and the × sits in the space beside it */
@media (max-height: 500px) {
  .viewer-dialog { padding-block: 16px; }
  .viewer-dialog :is(video, img) { max-height: calc(100dvh - 32px); }
}

/* wider screens: a photo dialog makes room for its arrows beside the photo */
@media (min-width: 761px) {
  .viewer-dialog:has(.viewer-arrow) { padding-inline: 96px; }

  .viewer-dialog .viewer-arrow-prev { left: max(20px, env(safe-area-inset-left, 0px)); }
  .viewer-dialog .viewer-arrow-next { right: max(20px, env(safe-area-inset-right, 0px)); }

  .viewer-dialog-close {
    top: max(24px, env(safe-area-inset-top, 0px));
    right: max(24px, env(safe-area-inset-right, 0px));
  }
}

/* hover-only looks, for devices that can hover: a phone keeps :hover after a tap until the next one elsewhere */
@media (hover: hover) {
  .viewer-arrow:hover { color: var(--circle-base); }
  .viewer-thumb:hover { opacity: 1; }
  .viewer-expand:hover, .viewer-dialog-close:hover { color: var(--circle-base); }
}