/* ==========================================================================
   Block: Closing call to action
   ========================================================================== */

.awx-cta-closing {
  position: relative;
  overflow: hidden;
}

/* Gold swoosh continuing the motif from the stats band above, entering from
   the section's upper-left corner. Same vector-hero.svg mask and the same
   fill as the hero and stats-band — Figma node 9591:10410 (the swoosh
   vector) binds exactly one variable, Yellow #ffb81d, at 5% opacity; there
   is no separate "cream" swoosh anywhere in the file. This previously used
   --awx-sweep (a raw --awx-* token resolving to an opaque cream in light
   theme) with no opacity set at all, which was both a brand-token
   violation — --surface-* is the only vocabulary blocks are meant to read —
   and simply the wrong fill: a solid cream shape in light mode, next to
   invisible in dark. --awx-sweep itself is now unused; left in tokens.css
   rather than removed, since nothing else references it and deleting a
   token isn't this fix's job.
   Flipped vertically (scaleY(-1)) and anchored top-left, the opposite of
   the hero/stats-band's bottom anchor, so it reads as entering from the top
   rather than repeating their silhouette — this positioning is still a
   guess and still needs a comp check like the other masks; only the fill
   was in scope for this pass. z-index unnecessary here: .awx-section__inner
   is already z-index 1 in base.css, this sweep is 0. */
.awx-cta-closing::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: var(--surface-accent);
  opacity: 0.05;
  transform: scaleY(-1);
  -webkit-mask-image: url("../../assets/img/vector-hero.svg");
  mask-image: url("../../assets/img/vector-hero.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: top left;
  mask-position: top left;
  -webkit-mask-size: 100% auto;
  mask-size: 100% auto;
  pointer-events: none;
}

.awx-cta-closing__grid {
  display: grid;
  gap: var(--awx-space-lg);
}

/* ---- Media --------------------------------------------------------------
   Mobile: no offset, no bleed — the two photos sit side by side at equal
   height, full width. Desktop is a full-bleed composition instead (see
   below), positioned from the same 1440px reference frame every other
   full-bleed block in this theme is measured against. */

.awx-cta-closing__media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--awx-space-sm);
}

.awx-cta-closing__image-one,
.awx-cta-closing__image-two {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  /* A visible edge independent of the photograph's own color, so the frame
     reads even when the photo is close in value to the surface behind it. */
  border: var(--awx-rule) solid var(--surface-rule);
}

.awx-cta-closing__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 62rem) {
  /* The whole composition breaks out to full viewport width (the same
     calc(50% - 50vw) trick media-band and media-text's overlap use), because
     photo one bleeds off the left edge in the comp — x: 0 on the 1440
     reference frame, past the container's own gutter. Percentages below are
     that reference frame's x-coordinates read directly as percentages of
     this 100vw box. */
  .awx-cta-closing__grid {
    position: relative;
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    gap: 0;
    /* Photo one is the tallest element in the composition and is absolutely
       positioned (see below), so it does not contribute to this box's
       height on its own — this floor keeps the section from collapsing
       shorter than photo one when the text column is short. */
    min-height: var(--awx-cc-image-one-height);
    --awx-cc-image-one-height: clamp(20rem, 34vw, 35rem); /* ~560px at 1440 */
    --awx-cc-image-two-height: clamp(11rem, 18vw, 18.125rem); /* ~290px at 1440 */
  }

  .awx-cta-closing__media {
    display: contents;
  }

  .awx-cta-closing__image-one {
    position: absolute;
    top: 0;
    left: 0;
    width: clamp(18rem, 34.7vw, 31.25rem); /* x: 0–500 of 1440 */
    height: var(--awx-cc-image-one-height);
    aspect-ratio: auto;
  }

  .awx-cta-closing__image-two {
    position: absolute;
    top: 0;
    left: 55.6%; /* x: 800 of 1440 */
    width: 41.7%; /* x: 800–1400 of 1440 */
    height: var(--awx-cc-image-two-height);
    aspect-ratio: auto;
  }

  /* Mirrors every measurement above the centre line of the 1440 frame, so
     photo one bleeds off the right edge instead and the text column moves
     to the left. */
  .awx-cta-closing--images-right .awx-cta-closing__image-one {
    left: auto;
    right: 0;
  }

  .awx-cta-closing--images-right .awx-cta-closing__image-two {
    left: auto;
    right: 55.6%;
  }

  /* Text stays in normal flow rather than being absolutely positioned like
     the photos — its height is not knowable in advance (copy length
     varies), so letting it flow keeps the section tall enough for whatever
     is actually typed into it, rather than a fixed box clipping long copy
     or leaving a gap under short copy. */
  .awx-cta-closing__content {
    margin-left: 43.1%; /* x: 620 of 1440 */
    width: 54.2%; /* x: 620–1400 of 1440 */
    margin-top: calc(var(--awx-cc-image-two-height) + var(--awx-space-lg));
    padding-bottom: var(--awx-space-lg);
    text-align: center;
  }

  .awx-cta-closing--images-right .awx-cta-closing__content {
    margin-left: 0;
    margin-right: 43.1%;
  }

  .awx-cta-closing__body {
    margin-inline: auto;
  }
}

/* ---- Content -------------------------------------------------------------- */

.awx-cta-closing__body {
  margin-top: var(--awx-space-sm);
}

.awx-cta-closing__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--awx-space-sm);
  margin-top: var(--awx-space-md);
}

@media (min-width: 62rem) {
  .awx-cta-closing__actions {
    justify-content: center;
  }
}