/* mp-cta — closing call-to-action band. Contract: COMPONENTS.md §7.39. */
@layer components {
  .mp-cta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--mp-space-s);
    padding: var(--mp-space-panel);
    border-radius: var(--mp-radius-lg);
  }
  @media (width >= 48rem) {
    .mp-cta { padding: var(--mp-space-xl); border-radius: var(--mp-radius-xl); }
  }
  .mp-cta__title { font-size: var(--mp-fs-display-l); }
  .mp-cta__title em { font-style: normal; color: var(--mp-color-accent-text); }
  .mp-cta__text { max-inline-size: var(--mp-measure); color: var(--mp-color-text-2); }
  .mp-cta__weeks { display: flex; flex-wrap: wrap; gap: var(--mp-space-xs) var(--mp-space-s); }
  .mp-cta__week { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mp-space-2xs); }
  .mp-cta__actions { display: flex; flex-wrap: wrap; gap: var(--mp-space-xs); margin-block-start: var(--mp-space-2xs); }

  /* --photo: the <img> fills the box behind a scrim; inside the closing band (mp-band--photo)
     the band is the box, edge to edge. */
  .mp-cta--photo { position: relative; isolation: isolate; overflow: hidden; }
  .mp-cta__img {
    position: absolute;
    inset: 0;
    z-index: -1;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: var(--mp-focus, 50% 50%);
  }
  .mp-cta--photo::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--mp-scrim-even); }
  /* An ink page's close (the MP Camp redesign): the line oversized, the band taller, the words
     centred in it; big buttons. */
  .mp-page-ink .mp-cta__title { font-size: var(--mp-fs-display-2xl); }
  .mp-page-ink .mp-cta__actions .mp-btn { min-block-size: var(--mp-h-control); padding-inline: var(--mp-space-l); font-size: var(--mp-fs-lead); }
  @media (width >= 48rem) {
    .mp-page-ink .mp-band--cta { display: grid; align-content: center; min-block-size: calc(var(--mp-space-3xl) * 5.5); }
  }

  /* MP Camp's closing invitation: one registration action, centred on ink with a soft green glow. */
  .mp-band--cta:has(.mp-cta--booking) { position: relative; isolation: isolate; }
  .mp-band--cta:has(.mp-cta--booking)::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: radial-gradient(ellipse at 50% 100%, var(--mp-color-accent-soft), transparent 65%);
  }
  .mp-cta--booking { align-items: center; text-align: center; gap: var(--mp-space-m); }
  .mp-cta--booking > .mp-eyebrow { color: var(--mp-color-text-2); letter-spacing: var(--mp-track-label); }
  .mp-cta--booking .mp-cta__title { font-size: calc(var(--mp-fs-display-2xl) * 1.25); }
  .mp-cta--booking .mp-cta__title em { display: inline-block; }
  .mp-cta--booking .mp-cta__actions { justify-content: center; margin-block-start: var(--mp-space-m); }
  .mp-cta--booking .mp-cta__actions .mp-btn {
    padding-inline: var(--mp-space-xl);
    font-size: var(--mp-fs-base);
    letter-spacing: var(--mp-track-caps);
    text-transform: uppercase;
    box-shadow: 0 var(--mp-space-xs) var(--mp-space-xl) var(--mp-color-accent-soft);
  }
}
@layer schemes {
  /* The outer band carries the ink fill; clear the inner scheme's fill so the glow stays continuous. */
  .mp-band--cta > .mp-cta--booking { background-color: transparent; }
}