/*
  Modal — the shared <dialog> shell behind the video popup and the gallery
  lightbox. Both reuse this; component-specific bits (the video frame, the
  gallery image + prev/next) stay in their own files.

  A native :modal <dialog> is centred by the UA (position:fixed; inset:0;
  margin:auto). The theme's reset (* { margin: 0 }) wipes that margin, so we
  restore `margin: auto` here to re-centre on both axes. We only cap the size and
  strip the default chrome — position is left to the UA so the dialog stays in the
  centred top-layer flow (children still anchor to it: a modal dialog is fixed).
*/

.modal {
  width: 100%;
  max-width: min(var(--container-max), calc(100vw - 2 * var(--distance-to-edge)));
  max-height: calc(100vh - 2 * var(--distance-to-edge));
  margin: auto;
  padding: 0;
  border: 0;
  background: none;
  overflow: visible;
  /* Nothing in a modal is selectable content — suppress the highlight a stray
     double/rapid click on a control would otherwise paint over the image. */
  user-select: none;
}

.modal::backdrop {
  background-color: rgb(0 0 0 / 0.8);
}

/* Close button: pinned to the viewport's top-right corner (position:fixed
   resolves to the viewport inside a top-layer dialog), so it sits OUTSIDE the
   centred content regardless of the content's size. */
.modal__close {
  position: fixed;
  z-index: 1;
  inset-block-start: var(--distance-to-edge);
  inset-inline-end: var(--distance-to-edge);
  display: grid;
  place-items: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: var(--color-white);
  color: var(--color-green-dark);
  box-shadow: var(--shadow-soft);
  cursor: pointer;
}

.modal__close svg {
  inline-size: 1.25rem;
  block-size: 1.25rem;
}