/*
  cta-v3 — dual-card CTA on the red star plate.
  Desktop: Figma 371:1211 · Mobile: Figma 371:1517

  Two white cards:
  - Book (left / top): title + body + two red pills
  - Explore (right / bottom): title + three dark pills
*/

.cta-v3 {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* Fallback while the star plate loads */
  background-color: var(--color-primary);
}

/* ---------- Decorative red star plate ---------- */

.cta-v3__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Mobile: cover the band. Desktop uses the tall Figma crop below. */
.cta-v3__bg-img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}

/* ---------- Inner: stacked cards, 288px wide (Figma 371:1517) ---------- */

.cta-v3__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--cta-v3-card-gap); /* 32px between cards */
  box-sizing: border-box;
  inline-size: 100%;
  max-inline-size: var(--header-frame-max);
  margin-inline: auto;
  padding-block: var(--cta-v3-pad-y-mobile); /* 56px */
  padding-inline: var(--space-md); /* 16px */
}

/* ---------- Cards ---------- */

.cta-v3__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  box-sizing: border-box;
  inline-size: 100%;
  max-inline-size: var(--cta-v3-card-w-mobile); /* 288px */
  padding: var(--cta-v3-card-pad-mobile); /* 20px */
  background-color: var(--color-bg);
  /* Mobile shadow — Figma 371:1519 / 371:1530 */
  box-shadow: var(--shadow-cta-v3-card-mobile);
}

/* Book card: title + body stack, then 25px to the buttons */
.cta-v3__card--book {
  gap: var(--cta-v3-text-gap); /* 25px */
}

/* Explore card: title, then 25px to the three dark pills */
.cta-v3__card--explore {
  gap: var(--cta-v3-text-gap); /* 25px */
}

.cta-v3__copy {
  display: flex;
  flex-direction: column;
  gap: var(--cta-v3-text-gap); /* 25px title → body */
  inline-size: 100%;
}

.cta-v3__title {
  margin: 0;
  inline-size: 100%;
  font-family: var(--font-heading);
  font-weight: var(--fw-black);
  font-size: var(--fs-cta-v3-title); /* 24px */
  line-height: var(--lh-cta-v3-title); /* 29px */
  letter-spacing: var(--ls-cta); /* -0.48px at 24px */
  text-transform: uppercase;
  text-align: start;
  color: var(--color-text); /* #191919 on mobile */
}

.cta-v3__text {
  margin: 0;
  inline-size: 100%;
  font-family: var(--font-body-alt); /* Inter Medium */
  font-weight: var(--fw-medium);
  font-size: var(--fs-cta-v3-body); /* 18px */
  line-height: var(--lh-cta-v3-body); /* 23px */
  letter-spacing: var(--ls-cta);
  text-align: start;
  color: var(--color-text);
}

/* ---------- Button stacks ---------- */

.cta-v3__actions {
  display: flex;
  flex-direction: column;
  /* Full card width so hug-sized pills can sit in the center */
  align-items: center;
  gap: var(--cta-v3-btn-stack-gap); /* 16px */
  inline-size: 100%;
}

.cta-v3__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm); /* 10px */
  box-sizing: border-box;
  padding: var(--cta-v3-btn-pad); /* 20px */
  border: 0;
  border-radius: var(--radius-pill);
  font-family: var(--font-heading); /* Prompt Medium */
  font-weight: var(--fw-medium);
  font-size: var(--fs-cta); /* 18px */
  line-height: var(--lh-nav); /* 23px */
  letter-spacing: var(--ls-cta);
  text-decoration: none;
  white-space: nowrap;
  color: var(--color-text-inverse);
  transition: opacity var(--transition-base);
}

.cta-v3__btn:hover {
  opacity: 0.92;
}

.cta-v3__btn:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 3px;
}

/* Book card — Shine Red pills */
.cta-v3__btn--primary {
  background-color: var(--color-primary);
}

/* Explore card — Shine Grey pills */
.cta-v3__btn--dark {
  background-color: var(--color-text);
}

.cta-v3__btn-icon {
  display: block;
  flex-shrink: 0;
  inline-size: var(--cta-v3-btn-icon); /* 10px */
  block-size: var(--cta-v3-btn-icon);
}

.cta-v3__btn-icon--phone {
  inline-size: var(--cta-v3-phone-icon); /* 23px */
  block-size: var(--cta-v3-phone-icon);
}

/* Team label: shorter on mobile (Figma 693:3451) */
.cta-v3__btn-label--desktop {
  display: none;
}

.cta-v3__btn-label--mobile {
  display: inline;
}

/* ---------- Desktop — Figma 371:1211 ---------- */
/* --bp-lg: 1024px */

@media (min-width: 1024px) {
  /* Tall crop of the star plate, same pattern as cta-v2--local */
  .cta-v3__bg-img {
    inset: auto;
    inset-block-start: var(--cta-v3-bg-top); /* 0.04% */
    inset-inline-start: 0;
    inline-size: 100%;
    block-size: var(--cta-v3-bg-h); /* 732.38% */
  }

  .cta-v3__inner {
    flex-direction: row;
    align-items: stretch;
    gap: var(--cta-v3-card-gap); /* 32px gutter */
    padding-block: var(--cta-v3-pad-y); /* 120px */
    padding-inline: var(--header-pad-x); /* clamps toward 220px */
  }

  .cta-v3__card {
    flex: 1 1 0;
    min-inline-size: 0;
    max-inline-size: none;
    /* Hug content, but match Figma’s 403px floor so both cards align */
    min-block-size: var(--cta-v3-card-h); /* 403px */
    align-items: center;
    padding-block: var(--cta-v3-card-pad-y); /* 60px */
    padding-inline: var(--cta-v3-card-pad-x); /* 40px */
    border: 1px solid var(--color-border-subtle);
    box-shadow: var(--shadow-cta-v3-card);
  }

  /* Desktop inner gap is 60px (title stack → buttons) */
  .cta-v3__card--book,
  .cta-v3__card--explore {
    gap: var(--cta-v3-card-inner-gap); /* 60px */
  }

  .cta-v3__title,
  .cta-v3__text {
    text-align: center;
    color: var(--color-text-heading); /* #212529 on desktop */
  }

  .cta-v3__actions {
    align-items: center;
  }

  .cta-v3__btn-label--desktop {
    display: inline;
  }

  .cta-v3__btn-label--mobile {
    display: none;
  }
}