/*
 * Hero 03 — Full-Bleed Overlay. Block style on core/cover.
 * Reuse unit: block style. Consumes ONLY token CSS vars (no raw hex/px).
 *
 * core/cover renders:
 *   .wp-block-cover
 *     .wp-block-cover__background        (WP dim overlay — we replace with a scrim)
 *     img.wp-block-cover__image-background
 *     .wp-block-cover__inner-container   (kicker + heading + lead + buttons)
 *
 * Two block styles:
 *   is-style-wpdl-hero        — content anchored bottom-left (default).
 *   is-style-wpdl-hero-center — content centred.
 *
 * Ordering: base → scrim → inner layout → typography → CTA → states/motion.
 *
 * Tokens read:
 *   component.hero.text · color.green.900 (scrim) · color.green.800 (solid CTA text)
 *   semantic.typography.display.* · semantic.typography.body.*
 *   semantic.color.interactive.focus · space.7 / space.9 / space.12 / space.14
 *   duration.base · easing.default
 */

/* --- Base ----------------------------------------------------------------- */

.wp-block-cover.is-style-wpdl-hero,
.wp-block-cover.is-style-wpdl-hero-center {
  min-block-size: clamp(31.25rem, 60vh, 35rem); /* ~500–560px */
  overflow: hidden;
}

.wp-block-cover.is-style-wpdl-hero > .wp-block-cover__image-background,
.wp-block-cover.is-style-wpdl-hero-center > .wp-block-cover__image-background {
  object-fit: cover;
  block-size: 100%;
  inline-size: 100%;
}

/* --- Scrim ---------------------------------------------------------------- */

/* Replace WP's flat dim with a bottom-weighted brand scrim so the bottom-left
   copy stays legible while the top of the photo reads clean.
   Fallback for browsers without color-mix() support (Firefox < 113, Safari < 16.2). */
.wp-block-cover.is-style-wpdl-hero > .wp-block-cover__background,
.wp-block-cover.is-style-wpdl-hero-center > .wp-block-cover__background {
  background: var(--wp--custom--component--hero--overlay) !important;
  opacity: 1 !important;
}

@supports (background: color-mix(in srgb, red, blue)) {
  .wp-block-cover.is-style-wpdl-hero > .wp-block-cover__background,
  .wp-block-cover.is-style-wpdl-hero-center > .wp-block-cover__background {
    background:
      linear-gradient(
        90deg,
        color-mix(in srgb, var(--wp--custom--semantic--color--brand--strong) 55%, transparent) 0%,
        color-mix(in srgb, var(--wp--custom--semantic--color--brand--strong) 12%, transparent) 55%,
        transparent 78%
      ),
      linear-gradient(
        0deg,
        color-mix(in srgb, var(--wp--custom--semantic--color--brand--strong) 68%, transparent) 0%,
        color-mix(in srgb, var(--wp--custom--semantic--color--brand--strong) 16%, transparent) 50%,
        color-mix(in srgb, var(--wp--custom--semantic--color--brand--strong) 32%, transparent) 100%
      ) !important;
  }
}

/* --- Inner layout --------------------------------------------------------- */

.wp-block-cover.is-style-wpdl-hero > .wp-block-cover__inner-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end; /* anchor copy to the bottom */
  text-align: start;
  block-size: 100%;
  max-inline-size: 37.5rem; /* 600px content column */
  margin-inline: 0;
  padding-inline: var(--wp--custom--space--9);
  padding-block: var(--wp--custom--space--12);
}

.wp-block-cover.is-style-wpdl-hero-center > .wp-block-cover__inner-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  block-size: 100%;
  max-inline-size: 44rem;
  margin-inline: auto;
  padding-inline: var(--wp--custom--space--9);
  padding-block: var(--wp--custom--space--14);
}

@media (width >= 48em) {
  .wp-block-cover.is-style-wpdl-hero > .wp-block-cover__inner-container {
    padding-inline: var(--wp--custom--space--12);
  }
}

/* --- Typography ----------------------------------------------------------- */

/* Kicker — uppercase, letter-spaced eyebrow (Inter). */
.wp-block-cover.is-style-wpdl-hero .wpdl-hero__kicker,
.wp-block-cover.is-style-wpdl-hero-center .wpdl-hero__kicker {
  font-family: var(--wp--custom--semantic--typography--small--font-family);
  font-size: var(--wp--custom--semantic--typography--small--font-size);
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--wp--custom--component--hero--text);
  opacity: 0.82;
  margin-block: 0 var(--wp--custom--space--4);
}

/* Headline — display scale, Cormorant Garamond. */
.wp-block-cover.is-style-wpdl-hero > .wp-block-cover__inner-container > .wp-block-heading,
.wp-block-cover.is-style-wpdl-hero-center > .wp-block-cover__inner-container > .wp-block-heading {
  font-family: var(--wp--custom--semantic--typography--display--font-family);
  font-size: var(--wp--custom--semantic--typography--display--font-size);
  font-weight: var(--wp--custom--semantic--typography--display--font-weight);
  line-height: var(--wp--custom--semantic--typography--display--line-height);
  letter-spacing: var(--wp--custom--semantic--typography--display--letter-spacing);
  color: var(--wp--custom--component--hero--text);
  margin-block: 0;
}

/* Lead copy. */
.wp-block-cover.is-style-wpdl-hero .wpdl-hero__lead,
.wp-block-cover.is-style-wpdl-hero-center .wpdl-hero__lead {
  font-family: var(--wp--custom--semantic--typography--body--font-family);
  font-size: var(--wp--custom--semantic--typography--body--font-size);
  font-weight: var(--wp--custom--semantic--typography--body--font-weight);
  line-height: var(--wp--custom--semantic--typography--body--line-height);
  color: var(--wp--custom--component--hero--text);
  opacity: 0.9;
  max-inline-size: 34rem;
  margin-block: var(--wp--custom--space--4) 0;
}

/* --- CTA row -------------------------------------------------------------- */

.wp-block-cover.is-style-wpdl-hero .wpdl-hero__ctas,
.wp-block-cover.is-style-wpdl-hero-center .wpdl-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wp--custom--space--7);
  margin-block-start: var(--wp--custom--space--9);
}

.wp-block-cover.is-style-wpdl-hero-center .wpdl-hero__ctas {
  justify-content: center;
}

/* Solid CTA — paper fill, deep-green label (reads on photo). Subtle-rounded
   (btn radius) to match the theme-wide "no pill" button treatment. */
.wpdl-hero__btn--solid .wp-block-button__link {
  background-color: var(--wp--custom--component--hero--text);
  color: var(--wp--custom--semantic--color--brand--strong);
  border: 0;
  border-radius: var(--wp--custom--semantic--radius--btn);
  padding-block: var(--wp--custom--space--3);
  padding-inline: var(--wp--custom--space--7);
  font-family: var(--wp--custom--semantic--typography--label--font-family);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: var(--wp--custom--semantic--typography--small--font-size);
  transition: transform var(--wp--custom--duration--base) var(--wp--custom--easing--default),
    background-color var(--wp--custom--duration--base) var(--wp--custom--easing--default);
}

/* Text-link CTA — underlined label on photo. */
.wpdl-hero__btn--link .wp-block-button__link {
  background: transparent;
  color: var(--wp--custom--component--hero--text);
  border: 0;
  border-radius: 0;
  padding: 0;
  font-family: var(--wp--custom--semantic--typography--label--font-family);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: var(--wp--custom--semantic--typography--small--font-size);
  box-shadow: inset 0 -0.09em 0 0 currentcolor;
  transition: opacity var(--wp--custom--duration--base) var(--wp--custom--easing--default);
}

.wpdl-hero__btn--solid .wp-block-button__link:hover {
  background-color: var(--wp--custom--semantic--color--surface--secondary);
  transform: translateY(-0.125rem);
}

.wpdl-hero__btn--link .wp-block-button__link:hover {
  opacity: 0.7;
}

/* --- States --------------------------------------------------------------- */

.wp-block-cover.is-style-wpdl-hero .wp-block-cover__inner-container :focus-visible,
.wp-block-cover.is-style-wpdl-hero-center .wp-block-cover__inner-container :focus-visible {
  outline: 3px solid var(--wp--custom--semantic--color--focus--ring);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .wpdl-hero__btn--solid .wp-block-button__link,
  .wpdl-hero__btn--link .wp-block-button__link {
    transition: none;
  }

  .wpdl-hero__btn--solid .wp-block-button__link:hover {
    transform: none;
  }
}

/* ==========================================================================
 * Hero 04 — Asymmetric Gallery. 3-photo cascade beside editorial copy column.
 * Desktop: 2-col grid (0.85fr / 1fr). Tablet/mobile: single column, photo-2 only.
 *
 * DOM:
 *   .wpdl-hero-gallery > .wpdl-hero-gallery__inner
 *     .wpdl-hero-gallery__copy    (kicker / h1 / subcopy / CTA)
 *     .wpdl-hero-gallery__media   (3 absolutely-positioned portrait tiles)
 *       .wpdl-hero-gallery__photo-1  (leftmost / back / bottom-aligned)
 *       .wpdl-hero-gallery__photo-2  (center / front / highest)
 *       .wpdl-hero-gallery__photo-3  (rightmost / mid-z / mid-height)
 *
 * Tokens read:
 *   semantic.typography.display.*  semantic.typography.body.*
 *   semantic.color.text.primary / secondary / brand
 *   radius.sm  shadow.lg  space.4–14
 * ========================================================================== */

/*
 * Section padding and background live in the outer Group block attribute
 * (style.spacing.padding + style.color.background), not here.
 * Buyer adjusts via Site Editor; token swap auto-updates background.
 */
.wpdl-hero-gallery {
  padding-inline: clamp(var(--wp--custom--space--7), 6vw, var(--wp--custom--space--12));
}

/* ── Inner grid: single col mobile-first → 2-col desktop ──────────────────── */

.wpdl-hero-gallery__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--wp--custom--space--12);
  align-items: center;
}

@media (width >= 64em) {
  .wpdl-hero-gallery__inner {
    grid-template-columns: 0.85fr 1fr;
    gap: var(--wp--custom--space--14);
  }
}

/* ── Copy column ──────────────────────────────────────────────────────────── */

.wpdl-hero-gallery__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--wp--custom--space--5);
  margin-block: 0; /* reset WP is-layout-flow > * margin injection */
}

.wpdl-hero-gallery__kicker {
  font-family: var(--wp--custom--semantic--typography--body--font-family);
  font-size: 0.6875rem; /* 11px */
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--wp--custom--semantic--color--brand--primary);
  margin-block: 0;
}

/* stylelint-disable-next-line no-descending-specificity */
.wpdl-hero-gallery__copy > .wp-block-heading {
  font-family: var(--wp--custom--semantic--typography--display--font-family);
  font-size: var(--wp--custom--semantic--typography--display--font-size);
  font-weight: var(--wp--custom--semantic--typography--display--font-weight);
  line-height: var(--wp--custom--semantic--typography--display--line-height);
  letter-spacing: var(--wp--custom--semantic--typography--display--letter-spacing);
  color: var(--wp--custom--semantic--color--text--primary);
  margin-block: 0;
}

.wpdl-hero-gallery__subcopy {
  font-family: var(--wp--custom--semantic--typography--body--font-family);
  font-size: var(--wp--custom--semantic--typography--body--font-size);
  line-height: var(--wp--custom--semantic--typography--body--line-height);
  color: var(--wp--custom--semantic--color--text--secondary);
  max-inline-size: 25rem;
  margin-block: 0;
}

.wpdl-hero-gallery__ctas {
  margin-block-start: var(--wp--custom--space--4);
}

/* ── Media zone: slide carousel (active · prev · next depth) ──────────────────
 *
 * DOM after JS runs:
 *   .wpdl-hero-gallery__media        (positioned, overflow:visible — arrows protrude)
 *     .wpdl-hero-gallery__track      (JS-created wrapper, overflow:hidden clips slides)
 *       .wpdl-hero-gallery__slide ×n (wp:image blocks; JS adds is-slide-* classes)
 *     .wpdl-hero-gallery__btn--prev  (JS-injected)
 *     .wpdl-hero-gallery__btn--next  (JS-injected)
 *     .wpdl-hero-gallery__dots       (JS-injected)
 *
 * No-JS fallback: first slide shown (opacity 1 via :first-child), rest hidden.
 * Buyer adds/removes wp:image blocks in the editor to change photo count.
 * ========================================================================== */

.wpdl-hero-gallery__media {
  position: relative;
  inline-size: 100%;
  margin-block: 0; /* reset WP is-layout-flow margin injection */
  padding-block-end: var(--wp--custom--space--9); /* room for dots */
}

.wpdl-hero-gallery__track {
  position: relative;
  block-size: 28rem;
  overflow: hidden; /* clips prev/next peek at track edges */
}

/* All slides share the same centered absolute position */
.wpdl-hero-gallery__slide {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 10%;
  inline-size: 68%;
  opacity: 0;
  scale: 0.72;
  translate: 0 0;
  z-index: 5;
  pointer-events: none;
  margin: 0;
  transition:
    opacity   550ms cubic-bezier(0.4, 0, 0.2, 1),
    scale     550ms cubic-bezier(0.4, 0, 0.2, 1),
    translate 550ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* No-JS: show the first slide */
.wpdl-hero-gallery__slide:first-child {
  opacity: 1;
  scale: 1;
  pointer-events: auto;
  z-index: 30;
}

.wpdl-hero-gallery__slide img {
  display: block;
  inline-size: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--wp--custom--radius--sm);
  box-shadow: var(--wp--custom--shadow--lg);
}

/* ── JS slide states ────────────────────────────────────────────────────────── */

.wpdl-hero-gallery__slide.is-slide-active {
  opacity: 1;
  scale: 1;
  translate: 0 0;
  z-index: 30;
  pointer-events: auto;
}

.wpdl-hero-gallery__slide.is-slide-prev {
  opacity: 0.58;
  scale: 0.78;
  translate: -80% 0;
  z-index: 10;
  pointer-events: auto;
}

.wpdl-hero-gallery__slide.is-slide-next {
  opacity: 0.58;
  scale: 0.78;
  translate: 80% 0;
  z-index: 10;
  pointer-events: auto;
}

/* ── Arrow buttons (injected by JS into .wpdl-hero-gallery__media) ───────────── */

.wpdl-hero-gallery__btn {
  position: absolute;
  inset-block-start: 40%;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  padding: 0;
  border: 1px solid var(--wp--custom--semantic--color--border--base);
  border-radius: var(--wp--custom--radius--full);
  background-color: var(--wp--custom--semantic--color--background--canvas);
  color: var(--wp--custom--semantic--color--text--secondary);
  box-shadow: var(--wp--custom--shadow--sm);
  cursor: pointer;
  transform: translateY(-50%);
  transition:
    background-color var(--wp--custom--duration--base) var(--wp--custom--easing--default),
    box-shadow       var(--wp--custom--duration--base) var(--wp--custom--easing--default),
    color            var(--wp--custom--duration--base) var(--wp--custom--easing--default);
}

.wpdl-hero-gallery__btn:hover {
  background-color: var(--wp--custom--semantic--color--surface--primary);
  box-shadow: var(--wp--custom--shadow--md);
  color: var(--wp--custom--semantic--color--text--primary);
}

.wpdl-hero-gallery__btn--prev {
  inset-inline-start: var(--wp--custom--space--4);
}

.wpdl-hero-gallery__btn--next {
  inset-inline-end: var(--wp--custom--space--4);
}

/* ── Dots ───────────────────────────────────────────────────────────────────── */

.wpdl-hero-gallery__dots {
  position: absolute;
  inset-block-end: var(--wp--custom--space--5);
  inset-inline-start: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: var(--wp--custom--space--3);
  align-items: center;
}

.wpdl-hero-gallery__dot {
  inline-size: 0.5rem;
  block-size: 0.5rem;
  padding: 0;
  border: none;
  border-radius: var(--wp--custom--radius--full);
  background-color: var(--wp--custom--semantic--color--text--secondary);
  opacity: 0.3;
  cursor: pointer;
  transition:
    inline-size      var(--wp--custom--duration--base) var(--wp--custom--easing--default),
    opacity          var(--wp--custom--duration--base) var(--wp--custom--easing--default),
    background-color var(--wp--custom--duration--base) var(--wp--custom--easing--default);
}

.wpdl-hero-gallery__dot.is-active {
  inline-size: 1.5rem;
  opacity: 1;
  background-color: var(--wp--custom--semantic--color--brand--primary);
}

/* Subtle warm glow behind the cluster */
.wpdl-hero-gallery__media::before {
  content: '';
  position: absolute;
  inset: -20% -10%;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    var(--wp--custom--semantic--color--brand--primary),
    transparent 68%
  );
  opacity: 0.04;
  z-index: 0;
  pointer-events: none;
}

/* Gallery CTA — scoped lift on hover; global button.css unchanged */
/* stylelint-disable-next-line no-descending-specificity */
.wpdl-hero-gallery__ctas .wp-block-button__link {
  transition:
    background-color var(--wp--custom--duration--base) var(--wp--custom--easing--default),
    border-color     var(--wp--custom--duration--base) var(--wp--custom--easing--default),
    color            var(--wp--custom--duration--base) var(--wp--custom--easing--default),
    transform        var(--wp--custom--duration--base) var(--wp--custom--easing--default),
    box-shadow       var(--wp--custom--duration--base) var(--wp--custom--easing--default);
}

.wpdl-hero-gallery__ctas .wp-block-button__link:hover {
  transform: translateY(-0.125rem);
  box-shadow: var(--wp--custom--shadow--md);
}

/* ── Tablet + mobile (< 64em) — single col, full-width active slide ──────────── */

@media (width < 64em) {
  .wpdl-hero-gallery__media {
    inline-size: min(100%, 28rem);
  }

  /* aspect-ratio gives the track a concrete height even with all-absolute children */
  .wpdl-hero-gallery__track {
    block-size: auto;
    aspect-ratio: 4 / 3;
  }

  .wpdl-hero-gallery__slide {
    inset-inline-start: 0;
    inline-size: 100%;
  }

  /* No-JS: only first slide visible on mobile too */
  .wpdl-hero-gallery__slide:first-child {
    opacity: 1;
    scale: 1;
  }

  /* Peek slides hidden on mobile — only active shows full-width */
  .wpdl-hero-gallery__slide.is-slide-prev,
  .wpdl-hero-gallery__slide.is-slide-next {
    opacity: 0;
    pointer-events: none;
  }

  /* Landscape crop on mobile to save vertical space */
  .wpdl-hero-gallery__slide img {
    aspect-ratio: 4 / 3;
  }
}

/* ── Reduced motion ─────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .wpdl-hero-gallery__slide,
  .wpdl-hero-gallery__dot,
  .wpdl-hero-gallery__btn {
    transition: none;
  }

  .wpdl-hero-gallery__ctas .wp-block-button__link {
    transition:
      background-color var(--wp--custom--duration--base) var(--wp--custom--easing--default),
      border-color     var(--wp--custom--duration--base) var(--wp--custom--easing--default),
      color            var(--wp--custom--duration--base) var(--wp--custom--easing--default);
  }

  .wpdl-hero-gallery__ctas .wp-block-button__link:hover {
    transform: none;
    box-shadow: none;
  }
}

/* ==========================================================================
 * Hero Promo — split commerce banner.
 * Left: eyebrow tag + display H1 + body + CTA.
 * Right: portrait product image (buyer replaces via click).
 * Desktop: 2-col (55 / 45). Mobile: stacked, text above image.
 * Layout via wp:columns — buyer resizes columns in Site Editor.
 * ========================================================================== */

/* GENERATED from Figma fleur-homepage/hero (measured): 1440×680, 50/50 split,
   bg #fbf7f4 (surface.secondary), left pad 80, vertical-centered, gap 40;
   right = full-bleed photo (no radius, touches edge). */
.wpdl-hero-promo {
  margin-block: 0 !important;
  padding: 0 !important;
}

/* ── Columns: text | photo, full-bleed split, stretched ─────────────────── */
.wpdl-hero-promo__columns.wp-block-columns {
  align-items: stretch;
  gap: 0 !important;
  margin-block: 0;
  min-block-size: 21rem; /* compact promo strip — ~half of Figma 680px */
}

/* ── Copy column ─── left pad 80 (space.80), vertical-centered, gap 16 ──── */
.wpdl-hero-promo__copy.wp-block-column {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  flex-basis: 50%;
  gap: var(--wp--custom--space--4); /* tighter promo rhythm 16 */
  padding-block: var(--wp--custom--space--7);
  padding-inline: var(--wp--custom--space--80); /* 80 measured */
}

.wpdl-hero-promo__copy > * {
  margin-block: 0 !important;
}

/* Title-stack — kicker + headline, gap 16 (space.4) */
.wpdl-hero-promo__title-stack {
  display: flex;
  flex-direction: column;
  gap: var(--wp--custom--space--4);
}

.wpdl-hero-promo__title-stack > * {
  margin-block: 0 !important;
}

/* Promo badge — light blush pill, rose text (Figma #f5ecef bg / #a34d63 text) */
.wpdl-hero-promo__badge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  padding: var(--wp--custom--space--2) var(--wp--custom--space--3); /* 6/12 → 8/12 snapped */
  border-radius: var(--wp--custom--radius--pill);
  background: color-mix(in srgb, var(--wp--custom--semantic--color--accent--primary) 12%, #fff);
  color: var(--wp--custom--semantic--color--accent--primary);
  font-family: var(--wp--custom--font--family--body);
  font-size: var(--wp--custom--font--size--xs);
  font-weight: var(--wp--custom--font--weight--semibold);
  letter-spacing: var(--wp--custom--font--letter-spacing--wide);
  text-transform: uppercase;
}

/* Kicker — gold eyebrow */
.wpdl-hero-promo__tag {
  font-family: var(--wp--custom--font--family--body);
  font-size: var(--wp--custom--font--size--xs);
  font-weight: var(--wp--custom--font--weight--medium);
  letter-spacing: var(--wp--custom--font--letter-spacing--wide);
  text-transform: uppercase;
  color: var(--wp--custom--semantic--color--accent--secondary);
}

/* Display headline — Cormorant. Figma 60px fixed; display token maxes 72px @1440
   (fluid-vs-fixed), so clamped to hit 60px at the desktop anchor. */
.wpdl-hero-promo__heading.wp-block-heading {
  font-family: var(--wp--custom--font--family--display);
  font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem); /* compact → ~40px @1440 */
  font-weight: var(--wp--custom--font--weight--regular);
  line-height: 1.1;
  letter-spacing: var(--wp--custom--font--letter-spacing--tight);
  color: var(--wp--custom--semantic--color--text--primary);
}

/* Subcopy — ink secondary, compact */
.wpdl-hero-promo__desc {
  font-family: var(--wp--custom--font--family--body);
  font-size: var(--wp--custom--font--size--base, 1rem);
  line-height: 1.55;
  color: var(--wp--custom--semantic--color--text--secondary);
  max-inline-size: 30rem;
}

/* CTA row — primary + outline inline, gap 16 (space.4); 40 below text-stack */
.wpdl-hero-promo__ctas.wp-block-buttons {
  margin-block-start: var(--wp--custom--space--4) !important;
  align-items: center;
  gap: var(--wp--custom--space--4);
}

/* ── Media column: photo bleeds to edge, fills 680 height ───────────────── */
.wpdl-hero-promo__media.wp-block-column {
  flex-basis: 50%;
  margin-block: 0;
}

.wpdl-hero-promo__media .wp-block-image {
  margin-block: 0;
  block-size: 100%;
  width: 100%;
}

/* stylelint-disable-next-line no-descending-specificity */
.wpdl-hero-promo__media .wp-block-image figure {
  block-size: 100%;
  margin: 0;
}

.wpdl-hero-promo__media .wp-block-image img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  min-block-size: 21rem; /* compact — matches shortened strip */
  object-fit: cover;
}

/* ── Mobile (< 48em): photo on top, text below, full-width CTA ──────────── */
@media (width < 48em) {
  /* Override WP .is-not-stacked-on-mobile (forces nowrap) → stack below tablet. */
  .wpdl-hero-promo__columns.wp-block-columns {
    flex-wrap: wrap !important;
    min-block-size: 0; /* release the 680px desktop lock when stacked */
  }

  .wpdl-hero-promo__copy.wp-block-column {
    order: 2;
    flex-basis: 100% !important;
    flex-grow: 0 !important;
    padding-block: var(--wp--custom--space--9);
    padding-inline: var(--wp--custom--space--6);
  }

  .wpdl-hero-promo__media.wp-block-column {
    order: 1;
    flex-basis: 100% !important;
    flex-grow: 0 !important;
  }

  .wpdl-hero-promo__media .wp-block-image img {
    min-block-size: 20rem;
  }

  .wpdl-hero-promo__ctas.wp-block-buttons {
    flex-direction: column;
    align-items: stretch;
  }
}