/* -----------------------------------------------------------------------------
   mod-cta — the dark call-to-action band.

   Two arrangements, one module:

     ≥ 1024px   SPLIT.   Solid dark panel 56% left, photograph 44% right,
                         buttons centred ON the photograph. Measured on the
                         reference: ground panel 0→805 of 1440 (55.9%), photo
                         806→1429, action centred on the media panel to within
                         1px and vertically centred in the band.

     < 1024px   CENTRED. The split does not stack, it dissolves. The
                         photograph goes full-bleed behind everything at 0.2
                         opacity — measured, not guessed — and the copy and
                         buttons centre on top of it.

   .b-cta--center pins the centred arrangement at every width.
   -------------------------------------------------------------------------- */

.b-cta {
  position: relative;
  overflow: clip;
  isolation: isolate;
  /* THIS MODULE OWNS ITS OWN VERTICAL SPACE — the band padding must not apply.
     All 17 instances are written `band--dark b-cta`, and .band--dark carries
     `padding-block: var(--band-pad-tall)` for its own sake. That padding sat
     OUTSIDE __inner, and the photograph is absolutely positioned to __inner,
     so every CTA band on the site rendered a bare strip of flat dark above
     and below the picture — 80px at 390 and 834, 128px at 1440 — which read
     as an empty green gap under the buttons rather than as a photo band.
     __inner already pays for the air: `clamp(--sp-16, 9vw, --sp-24)` centred,
     and a measured `min-height` in the split. */
  padding-block: 0;
}

/* --- the centred arrangement — also the small-screen default ---------------
   Written first, unconditionally, so a browser that never reaches the split
   still gets a complete, correct band. */

.b-cta__inner {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: var(--sp-8);
  padding: clamp(var(--sp-16), 9vw, var(--sp-24)) var(--page-pad);
  text-align: center;
}

.b-cta__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.b-cta__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.2;                 /* measured scrim: image over the flat ground */
}

.b-cta__copy {
  max-width: var(--measure-tight);
}

/* The break between the two lines is authored, not a wrap. Both spans are
   block-level so the headline always breaks exactly where the copy says. */
.b-cta__line {
  display: block;
}

.b-cta__line--accent {
  color: var(--sage-light);     /* 7.13:1 on --dark */
}

.b-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-4);
  margin: 0;
}

/* Booking and phone are co-primary. Equal minimum width so neither reads as
   the secondary of the pair when the two labels differ in length. */
.b-cta__actions .btn {
  min-width: 11rem;
}

/* --- the closing band -----------------------------------------------------
   Bottom-of-page placement. One size up on the headline and more air. The
   reference's closing CTA measures 63px against the mid-page band's 50px. */

.b-cta--closing .b-cta__heading {
  font-size: var(--t-display-xl);
}

.b-cta--closing .b-cta__inner {
  padding-block: clamp(var(--sp-20), 11vw, var(--sp-32));
}

/* --- the split ------------------------------------------------------------
   1024 and up, unless --center has pinned the centred arrangement. */

@media (min-width: 1024px) {
  .b-cta:not(.b-cta--center) .b-cta__inner {
    grid-template-columns: 56fr 44fr;
    justify-items: stretch;
    align-content: stretch;
    align-items: center;
    gap: 0;
    padding: 0;
    text-align: left;
    /* Reference measures 342px. Built from the spacing scale rather than
       typed as a number: 128 + 128 + 80 = 336. min-height, never height —
       a long headline should make the band taller, not get clipped. */
    min-height: calc(var(--sp-32) * 2 + var(--sp-20));
  }

  .b-cta--closing:not(.b-cta--center) .b-cta__inner {
    min-height: calc(var(--sp-32) * 3);
  }

  .b-cta:not(.b-cta--center) .b-cta__copy {
    grid-column: 1;
    grid-row: 1;
    max-width: none;
    padding: var(--sp-16) var(--page-pad);
  }

  /* The photograph stops being a background and becomes the right-hand panel:
     full height, square corners, flush to the band's right edge. */
  .b-cta:not(.b-cta--center) .b-cta__media {
    position: relative;
    inset: auto;
    z-index: 0;
    grid-column: 2;
    grid-row: 1;
    align-self: stretch;
    min-height: 100%;
  }

  .b-cta:not(.b-cta--center) .b-cta__media img {
    position: absolute;
    inset: 0;
    opacity: 1;                 /* no scrim: the copy has moved off the photo */
  }

  /* The action sits ON the media, in the same grid cell, centred both ways.
     This is the measured arrangement and the whole character of the band. */
  .b-cta:not(.b-cta--center) .b-cta__actions {
    grid-column: 2;
    grid-row: 1;
    z-index: 1;
    place-self: center;
  }
}

/* --- copy slots ---------------------------------------------------------- */

.b-cta .s-slot {
  color: var(--sage-light);
  text-decoration: underline dashed color-mix(in srgb, var(--sage) 55%, transparent);
  text-underline-offset: 0.35em;
  text-decoration-thickness: 1px;
}

.b-cta .s-slot--inline {
  display: inline-block;
}

/* --- very narrow ---------------------------------------------------------- */

@media (max-width: 560px) {
  .b-cta__actions {
    width: 100%;
    flex-direction: column;
  }
  .b-cta__actions .btn {
    width: 100%;
    min-width: 0;
  }
}