/* Final image framing. Wide documentary photographs should read as pictures,
   not narrow slices squeezed into a tall side column. Text retains a dark,
   opaque-enough gradient so the image never becomes the text background. */
@media (min-width: 761px) {
  .editorial-reader .standalone-hero:has(> .standalone-hero__photo) {
    position: relative;
    display: block;
    isolation: isolate;
  }
  .editorial-reader .standalone-hero:has(> .standalone-hero__photo)::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(90deg,
      rgba(23, 43, 69, .99) 0%,
      rgba(28, 47, 77, .98) 32%,
      rgba(36, 55, 86, .87) 51%,
      rgba(32, 47, 73, .32) 75%,
      rgba(21, 32, 52, .12) 100%);
  }
  .editorial-reader .standalone-hero--resilience::before {
    background: linear-gradient(90deg,
      rgba(24, 53, 70, .99) 0%,
      rgba(29, 63, 79, .98) 32%,
      rgba(33, 69, 84, .85) 51%,
      rgba(25, 52, 66, .32) 75%,
      rgba(21, 37, 50, .12) 100%);
  }
  .editorial-reader .standalone-hero--workforce::before {
    background: linear-gradient(90deg,
      rgba(43, 39, 77, .99) 0%,
      rgba(52, 44, 89, .98) 32%,
      rgba(62, 50, 98, .85) 51%,
      rgba(43, 39, 75, .32) 75%,
      rgba(31, 29, 55, .12) 100%);
  }
  .editorial-reader .standalone-hero__copy {
    width: min(61%, 620px);
    min-height: clamp(480px, 42vw, 680px);
    padding-right: clamp(24px, 3vw, 50px);
    z-index: 2;
  }
  .editorial-reader .standalone-hero__photo {
    position: absolute;
    inset: 0;
    z-index: 0;
    min-height: 0;
  }
  .editorial-reader .standalone-hero__photo img {
    display: block;
    width: 100%;
    height: 100% !important;
    min-height: 0;
    object-fit: cover;
    object-position: center;
  }
  .editorial-reader .standalone-hero__photo figcaption {
    left: auto;
    right: 20px;
    bottom: 16px;
    width: min(40%, 380px);
    text-align: right;
    text-shadow: 0 2px 5px rgba(14, 25, 42, .85);
  }
}

/* The Land overview uses a panoramic Delaware Basin photograph. Give that
   panorama the full hero width so most of the landscape remains visible. */
@media (min-width: 951px) {
  .editorial-reader.web-edition #article-content > .land-umbrella-hero.land-umbrella-hero--opening {
    position: relative;
    display: block;
    min-height: 450px;
    isolation: isolate;
  }
  .editorial-reader.web-edition #article-content > .land-umbrella-hero.land-umbrella-hero--opening::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(90deg,
      rgba(53, 35, 31, .99) 0%,
      rgba(63, 38, 34, .98) 32%,
      rgba(66, 39, 35, .88) 49%,
      rgba(59, 40, 37, .32) 70%,
      rgba(46, 38, 38, .08) 100%);
  }
  .editorial-reader.web-edition .land-umbrella-hero--opening .land-umbrella-hero-copy {
    position: relative;
    z-index: 2;
    width: min(58%, 660px);
    min-height: 450px;
  }
  .editorial-reader.web-edition .land-umbrella-hero--opening .land-umbrella-photo {
    position: absolute;
    inset: 0;
    z-index: 0;
    min-height: 0;
    width: 100%;
  }
  .editorial-reader.web-edition .land-umbrella-hero--opening .land-umbrella-photo img {
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
    object-position: 50% 55%;
  }
  .editorial-reader.web-edition .land-umbrella-hero--opening .land-umbrella-photo figcaption {
    position: absolute;
    z-index: 3;
    bottom: 0;
    right: 0;
    width: min(42%, 410px);
    border-top: 0;
    background: linear-gradient(90deg, rgba(36, 40, 49, .88), rgba(36, 40, 49, .92));
  }
}

/* Keep all photos and their visible captions inside the viewport on phones. */
@media (max-width: 760px) {
  .editorial-reader .standalone-hero__photo img {
    object-position: center;
  }
  .editorial-reader .standalone-hero__photo figcaption {
    max-width: calc(100% - 35px);
  }
}