/* Keep both hero captions inside the clear space of their own artwork.
   The images, their aspect ratios and the slide layout are unchanged. */

/* Intermediate desktop/tablet widths: don't switch the PF2500 into a
   second, vertically stacked composition just because the window falls under
   950px. The picture and features remain in their original two-column order. */
@media (min-width: 561px) and (max-width: 950px) and (min-height: 510px) {
  #pf2500-overview .pf2500-overview-layout {
    grid-template-columns: minmax(0, 1.34fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    column-gap: clamp(16px, 2vw, 30px);
    row-gap: 0;
    align-content: stretch;
  }
  #pf2500-overview .pf2500-overview-features {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-self: stretch;
    gap: clamp(8px, 1.2svh, 16px);
    padding: clamp(8px, 1.5svh, 18px) 0;
    font-size: clamp(18px, min(2.45vw, 3.4svh), 36px);
    line-height: 1.22;
  }
}

/* A 560px-wide hero *container* is not necessarily a mobile viewport.
   Keep the title on the artwork's original upper-left coordinate, and
   remove the generic title band in side-by-side desktop/tablet layouts. */
@media (min-width: 561px) and (min-height: 510px) {
  #pf2500-overview .hero-stage > * {
    --fit-ar: var(--ar);
    --art-w: min(100cqw, 100cqh * var(--fit-ar));
    --art-h: calc(var(--art-w) / (var(--fit-ar)));
    --art-x: calc((100cqw - var(--art-w)) / 2);
    --art-y: calc((100cqh - var(--art-h)) / 2);
  }
  #pf2500-overview .hero-stage__title {
    left: calc(var(--art-x) + var(--art-w) * .035);
    top: calc(var(--art-y) + var(--art-h) * .036);
    right: auto;
    text-align: left;
  }
  #pf2500-overview .hero-stage__heading {
    font-size: calc(var(--art-w) * .1);
    line-height: 1;
  }
}

/* PF2500: The photo-finish projection cuts diagonally through the upper-right
   corner. Size the caption from the rendered image, not the browser width. */
#pf2500-overview .hero-stage__title {
  width: max(122px, calc(var(--art-w) * .36));
  max-width: calc(100cqw - var(--art-x) - 16px);
  white-space: normal;
}
#pf2500-overview .hero-stage__tagline {
  font-size: clamp(13px, calc(var(--art-w) * .037), 29px);
  overflow-wrap: normal;
}

/* PF300R: the source artwork contains a 28% transparent left gutter. The
   rendered projection starts about 32% into its fitted 4018px art box.
   Anchor the caption's RIGHT edge to that boundary, with a clear gap.
   Both elements now follow the same --art-x / --art-w scale. */
@container (min-width: 561px) {
  #pf300r-overview .hero-stage > * {
    --oc-visible-left: calc(var(--art-x) + var(--art-w) * .32);
    --oc-caption-gap: clamp(10px, 1.2cqw, 18px);
    --oc-caption-width: clamp(175px, 27cqw, 345px);
  }
  #pf300r-overview .hero-stage__title {
    left: max(12px, calc(var(--oc-visible-left) - var(--oc-caption-width) - var(--oc-caption-gap)));
    right: calc(100cqw - var(--oc-visible-left) + var(--oc-caption-gap));
    top: calc(var(--art-y) + var(--art-h) * .055);
    width: auto;
    max-width: none;
    text-align: left;
    transform: none;
  }
  #pf300r-overview .hero-stage__heading {
    font-size: min(calc(var(--art-w) * .1068), calc(var(--oc-caption-width) * .27));
  }
  #pf300r-overview .hero-stage__tagline {
    font-size: min(calc(var(--art-w) * .0427), clamp(17px, 2.35cqw, 27px));
    line-height: 1.18;
    overflow-wrap: normal;
  }
}

/* PF2500, short and narrow cards: the illustration is height-limited, so
   it leaves unused space beside it. Move the art toward the right and keep
   the title in that clear space at its left, at the SAME image scale. */
@container (max-width: 560px) and (min-aspect-ratio: 8 / 5) {
  #pf2500-overview .hero-stage > * {
    --art-x: calc(100cqw - var(--art-w) - 1cqw);
  }
  #pf2500-overview .hero-stage__title {
    left: 8px;
    right: calc(100cqw - var(--art-x) + 8px);
    top: clamp(6px, 2cqh, 12px);
    width: auto;
    max-width: none;
  }
}