/* ==========================================================================
   Block: Image and text
   ========================================================================== */

.awx-media-text__grid {
  display: grid;
  gap: var(--awx-space-lg);
  align-items: center;
}

.awx-media-text__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.awx-media-text__body {
  margin-top: var(--awx-space-sm);
}

.awx-media-text__actions {
  margin-top: var(--awx-space-md);
}

/* ---- Side by side ------------------------------------------------------ */

/* Same reasoning as .awx-am__stage in accordion-media: a visible edge
   around the photograph, independent of the photograph's own color, so it
   doesn't blend into a dark-theme surface. */
.awx-media-text--standard .awx-media-text__figure {
  border: var(--awx-rule) solid var(--surface-rule);
}

@media (min-width: 62rem) {
  .awx-media-text--standard .awx-media-text__grid {
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 5rem);
  }

  .awx-media-text--standard.awx-media-text--image-right .awx-media-text__figure {
    order: 2;
  }

  /* 628x632 measured (Who We Serve's media-text panels) — nearly square,
     not the previous 4:3 guess. */
  .awx-media-text--standard .awx-media-text__figure {
    aspect-ratio: 628 / 632;
  }
}

/* ---- Overlapping panel -------------------------------------------------
   The comp is one full-bleed photograph with a solid panel sitting on top
   of it — not an image column next to a panel. Below the large breakpoint
   the whole thing drops to a plain stack: full-width 16:9 photo, panel
   beneath, no overlap and no bleed — a phone has no room for a panel to
   overlap a photo and leave either one readable.
   ------------------------------------------------------------------------ */

.awx-media-text--overlap .awx-media-text__figure {
  aspect-ratio: 16 / 9;
}

.awx-media-text--overlap .awx-media-text__panel-inner {
  padding: var(--awx-space-md);
}

@media (min-width: 62rem) {
  /* Break the image out to full viewport width the same way media-band
     does, rather than filling .awx-section__inner — the comp has this
     photograph running edge to edge, past the container's own gutters. */
  .awx-media-text--overlap .awx-media-text__grid {
    position: relative;
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    /* Exactly square (1440x1440 measured) — aspect-ratio against the
       100vw width above lands on the right height at any viewport,
       rather than the previous guess at a fixed ~900px. */
    aspect-ratio: 1 / 1;
    height: auto;
    gap: 0;
  }

  .awx-media-text--overlap .awx-media-text__figure {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
  }

  /* Gradient overlay measured on this image specifically: the same navy
     as --awx-navy-900, at full opacity fading to 20% — rgb(from ...) reads
     the token's own channels rather than a hardcoded rgb triplet, so this
     still moves if the token ever does. Direction (strong toward the
     lower-right, where the panel sits, fading toward the upper-left) is a
     reasoned guess, not measured — check against the comp. */
  .awx-media-text--overlap .awx-media-text__figure::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      135deg,
      rgb(from var(--awx-navy-900) r g b / 0.2) 0%,
      rgb(from var(--awx-navy-900) r g b / 1) 100%
    );
    pointer-events: none;
  }

  /* The panel's own box is an absolutely positioned zone spanning the
     comp's x: 50%–96% (mirrored to 4%–50% when the image side is flipped),
     from the image's vertical midpoint down to its bottom edge. Centring
     the actual panel inside that zone with flex is what "vertically
     centred over the lower portion" means in practice — the zone's height
     already excludes the photo's top half. */
  .awx-media-text--overlap .awx-media-text__panel {
    position: absolute;
    inset: 40% 4% 0 50%;
    display: flex;
    align-items: center;
  }

  .awx-media-text--overlap.awx-media-text--image-right .awx-media-text__panel {
    inset: 40% 50% 0 4%;
  }

  .awx-media-text--overlap .awx-media-text__panel-inner {
    width: 100%;
    padding: 3.5rem;
  }
}