/* ============================================================
   Photo utility.

   Photos are Pexels CDN URLs set as a background-image on an .img box, so
   the crop is handled by background-size and background-position rather
   than by the file. The design system's rule holds: a photograph is cropped
   into a rounded card inside the padding, never bled to the frame edge,
   unless it is the ground the frame is built on.
   ============================================================ */
.img {
  position: relative; overflow: hidden;
  background-size: cover; background-position: center;
  background-color: var(--sky-300);
  border-radius: var(--r-lg);
}
.img.r-xl   { border-radius: var(--r-xl); }
.img.r-2xl  { border-radius: var(--r-2xl); }
.img.r-md   { border-radius: var(--r-md); }
.img.square { aspect-ratio: 1; }
.img.circle { border-radius: var(--r-circle); aspect-ratio: 1; }
.img.wide   { aspect-ratio: 4 / 3; }
.img.tall   { aspect-ratio: 3 / 4; }
.img.arch   { border-radius: 999px 999px var(--r-lg) var(--r-lg); }

/* Full-bleed backdrop behind an overlay. Photo legibility in this system is
   normally solved by putting the copy on an adjacent white panel, through a
   notch, rather than by a scrim. The scrim exists for the one case the
   design system allows: text that has to sit on the image itself. */
.img-full { position: absolute; inset: 0; border-radius: 0; }
.img-full.scrim::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(21,21,21,0) 40%, rgba(21,21,21,.62) 100%); }
.img-full.scrim-hard::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(21,21,21,.30) 0%, rgba(21,21,21,.82) 74%); }
.img-full.veil::after { content: ""; position: absolute; inset: 0; background: rgba(21,21,21,.42); }

/* The bottom gradient a PhotoCard uses when a caption has to ride the image. */
.img.overlay::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(21,21,21,0) 45%, rgba(21,21,21,.55) 100%); }

/* The violet field laid over a photograph. Not a duotone: the photo keeps
   its own colour and the field only tints it. */
.wash { position: absolute; inset: 0; }
.wash.violet { background: var(--gradient-violet); opacity: .82; }
.wash.sky { background: var(--gradient-sky); opacity: .55; }

/* Captions ride on the photo as a small black pill in a corner. */
.img-cap {
  position: absolute; left: 24px; bottom: 24px; z-index: 2;
  background: var(--ink-900); color: var(--white);
  font-size: 19px; font-weight: var(--fw-medium);
  padding: 12px 22px; border-radius: var(--r-pill);
}
.img-cap.tr { left: auto; right: 24px; bottom: auto; top: 24px; }
.img-cap.br { left: auto; right: 24px; }

/* Mosaic backdrop for a cover built from four frames. */
.mosaic-bg { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.mosaic-bg .img { border-radius: 0; }
.mosaic-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(21,21,21,.42) 0%, rgba(21,21,21,.88) 74%); }

/* A corner block of photography, radiused on the inner corner only. */
.corner-photo { position: absolute; inset-block-end: 0; inset-inline-end: 0; width: 54%; height: 44%; }
.corner-photo .img { position: absolute; inset: 0; border-radius: var(--r-2xl) 0 0 0; }