/*
 * Homepage photography layer.
 * Loaded after home.css, home-motion.css, and typography.css. It only composes
 * the supplied photography; it does not introduce motion, image effects, or
 * changes to the existing hero copy, tag, or ticket treatment.
 */

/* -------------------------------------------------------------------------- */
/* Bridge hero — preserve the natural dark left edge with a light reading wash. */
/* -------------------------------------------------------------------------- */

.editorial-home .hero-home .hero-photo > picture,
.editorial-home .hero-home .hero-photo > .home-hero-image,
.editorial-home .hero-home .home-hero-image picture {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
}

.editorial-home .hero-home .hero-photo > picture > img,
.editorial-home .hero-home .hero-photo > .home-hero-image > img,
.editorial-home .hero-home .home-hero-image picture > img,
.editorial-home .hero-home .home-hero-image > img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 40% 50%;
}

/* The supplied bridge image is naturally darker at the copy side. This remains
   a restrained tonal field rather than an opaque overlay on the photograph. */
.editorial-home .hero-home .hero-photo::after {
  background:
    linear-gradient(
      90deg,
      rgb(0 0 0 / 0.42) 0%,
      rgb(0 0 0 / 0.24) 34%,
      rgb(0 0 0 / 0.08) 63%,
      rgb(0 0 0 / 0.02) 100%
    ),
    linear-gradient(0deg, rgb(0 0 0 / 0.18), transparent 38%);
}

/* This remains an image credit, separate from the original tag at the right. */
.editorial-home .hero-home .hero-photo figcaption {
  position: absolute;
  z-index: 2;
  inset: auto auto 18px var(--gutter);
  max-inline-size: 30ch;
  margin: 0;
  color: rgb(255 255 255 / 0.94);
  font: 400 11px / 1.4 var(--machine);
  letter-spacing: 0.035em;
  text-shadow: 0 1px 12px rgb(0 0 0 / 0.7);
}

.editorial-home .hero-home .home-hero-credit {
  display: block;
  margin-top: 3px;
}

.editorial-home .hero-home .hero-photo figcaption a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* The existing mobile order keeps all copy on white above the image. The left
   focal point retains the bridge arch in the portrait crop. */
@media (max-width: 760px) {
  .editorial-home .hero-home .hero-photo > picture > img,
  .editorial-home .hero-home .hero-photo > .home-hero-image > img,
  .editorial-home .hero-home .home-hero-image picture > img,
  .editorial-home .hero-home .home-hero-image > img {
    object-position: 31% 48%;
  }

  .editorial-home .hero-home .hero-photo::after {
    background: linear-gradient(0deg, rgb(0 0 0 / 0.28), transparent 43%);
  }

  .editorial-home .hero-home .hero-photo figcaption {
    inset-block-end: 14px;
    font-size: 11px;
  }
}

/* -------------------------------------------------------------------------- */
/* Courtyard break — an ordinary-flow, full-bleed figure between proof and offer. */
/* -------------------------------------------------------------------------- */

.editorial-home .home-photo-break {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0 0 18px;
  background: var(--white);
  color: var(--ink);
}

.editorial-home .home-photo-break > picture {
  display: block;
  width: 100%;
}

/* A declared block size reserves the shallow panel before the lazy image loads. */
.editorial-home .home-photo-break > picture > img {
  display: block;
  width: 100%;
  height: clamp(250px, 28vw, 400px);
  max-width: none;
  object-fit: cover;
  object-position: 50% 55%;
}

/* The credit belongs to the white figure frame, never over the photograph. */
.editorial-home .home-photo-break .home-photo-caption {
  margin: 0;
  padding: 14px var(--gutter) 0;
  color: #626868;
  font: 400 12px / 1.45 var(--machine);
  letter-spacing: 0.02em;
}

.editorial-home .home-photo-break .home-photo-caption a {
  color: inherit;
  font-size: 12px;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

@media (max-width: 760px) {
  .editorial-home .home-photo-break {
    padding-bottom: 18px;
  }

  .editorial-home .home-photo-break > picture > img {
    height: clamp(230px, 72vw, 320px);
  }

  .editorial-home .home-photo-break .home-photo-caption {
    padding-top: 14px;
    font-size: 11px;
  }
}