/* Block: hero-split — scoped
 *
 * Desktop: copy on the left (aligned to standard container content edge),
 *          visual on the right bleeding to viewport edge with curved-left corners.
 * Mobile : copy on top, visual below, visual contained inside the container
 *          (left/right margins matching standard container padding).
 */

/* Section padding — top buffer below the sticky header */
.fs:has(.hero-bleed) { padding-block: var(--sp-600) 0; }

.hero-bleed {
  /* Standard .fs__container content-edge math, exposed as a custom property
   * so the copy column's left edge aligns with every other section. */
  --hero-gutter: calc(var(--container-pad) + max(0px, (100vw - var(--container-max)) / 2));

  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
}

/* ─── Copy column ─────────────────────────────────────────── */
.hero-bleed__copy {
  padding-inline: var(--hero-gutter);
  padding-block: var(--sp-300) var(--sp-500);
  align-self: center;
}

.hero-bleed__heading {
  font-size: var(--fs-900);
  line-height: var(--lh-vtight);
  margin-bottom: var(--sp-400);
  max-width: 18ch;
}

.hero-bleed__body {
  margin-bottom: var(--sp-500);
  font-size: var(--fs-400);
  max-width: 56ch;
}

.hero-bleed__ctas {
  margin-top: var(--sp-500);
  gap: var(--sp-300);
}

/* ─── Visual ──────────────────────────────────────────────── */
.hero-bleed__visual {
  position: relative;
  background: #ffffff;
  overflow: hidden;
  /* Mobile: contained inside container padding, all corners rounded */
  margin-inline: var(--container-pad);
  border-radius: var(--r-xl);
  aspect-ratio: 4 / 3;
  /* Layered shadow — atmospheric depth without harsh edges. */
  box-shadow:
    0 1px 2px   rgb(27 28 38 / 0.04),
    0 4px 8px   rgb(27 28 38 / 0.05),
    0 12px 24px rgb(27 28 38 / 0.07),
    0 28px 60px rgb(27 28 38 / 0.06);
}

.hero-bleed__media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left; /* anchor crop to upper-left of source */
  display: block;
}

.hero-bleed__placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: var(--color-fg-muted);
  font-size: var(--fs-200);
}

/* ─── Desktop layout (bleed) ──────────────────────────────── */
@media (min-width: 900px) {
  .hero-bleed {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: stretch;
    min-height: clamp(520px, 58vh, 680px);
  }

  .hero-bleed__copy {
    padding-block: var(--sp-600);
    padding-right: var(--sp-500);
    align-self: center;
  }
  .hero-bleed__copy > * { max-width: 60ch; }

  .hero-bleed__visual {
    /* Reset mobile margins; bleed to right viewport edge with curved-left corners */
    margin-inline: 0;
    aspect-ratio: auto;
    height: 100%;
    border-radius: var(--r-xl) 0 0 var(--r-xl);
  }
}

/* Dark surface — swap to pure-black layered shadow so the lift still reads */
.fs[data-surface="dark"] .hero-bleed__visual {
  box-shadow:
    0 1px 2px   rgb(0 0 0 / 0.4),
    0 12px 24px rgb(0 0 0 / 0.35),
    0 28px 60px rgb(0 0 0 / 0.3);
}