/* ── Section CTA ────────────────────────────────────────────
   Figma: full-screen section
   ──────────────────────────────────────────────────────── */

.wp-block-yummo-section-cta {
  --c-primary:       var(--wp--preset--color--primary);
  --c-primary-hover: var(--wp--preset--color--primary-hover);
  --c-cream:         var(--wp--preset--color--cream);
  --c-cream-lt:      var(--wp--preset--color--cream-light);
  --c-mint-el:       var(--wp--preset--color--mint-el);
  --ease:            var(--wp--custom--transition--ease);
  --dur:             var(--wp--custom--transition--dur);
  --page-px:         var(--wp--preset--spacing--page-x);
  --section-py:      var(--wp--preset--spacing--section);
  --h2:              var(--wp--preset--font-size--h-2, clamp(3.25rem, 7.78cqw, 7rem));

  background: var(--c-primary);
  /* Figma desktop 5821:2379 = 876px, mobile 5387:21733 = 588px */
  min-height: 54.75rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  /* Site-wide canon: 176px desktop / 80px mobile visible gap from
     section top to first content. Top content is .section-cta__blob-bg
     (-5deg around center, overflows .section-cta__top-graphic top by
     ~3.28%). Post-rotation top sits ~32px (desktop) / ~15px (mobile)
     above top-graphic's un-rotated top, so paddings are:
       desktop: 176 + 32 = 208px = 13rem
       mobile:  80  + 15 ≈ 96px  = 6rem */
  padding-block: 13rem var(--section-py);
  overflow: hidden;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  content-visibility: auto;
  contain-intrinsic-size: auto 54.75rem;

  container-type: inline-size;
  container-name: sectionCta;

  @media (max-width: 47.9375rem) {
    min-height: 36.75rem;
    contain-intrinsic-size: auto 36.75rem;
    padding-block-start: 6rem;
  }

  /* ── Inner ─────────────────────────────────────────────── */
  .section-cta__inner {
    width: 100%;
    max-width: 90rem;
    margin-inline: auto;
    padding-inline: var(--page-px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(3rem, 6.67cqw, 6rem);
  }

  /* Figma 2500: title/bubble stay at Figma sizes, inner just gets wider. */
  @media (min-width: 2500px) {
    .section-cta__inner { max-width: 147.25rem; }
  }

  /* ── Title group ───────────────────────────────────────── */
  .section-cta__text {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    isolation: isolate;
    /* Desktop: wide enough that the 123px title breaks into two
       lines ("харчування для" / "вашої дитини") instead of three.
       Mobile override below shrinks this to ~actions width. */
    width: clamp(18rem, 71.11cqw, 64rem); /* 64rem = 1024px @1440 */
    max-width: 100%;
  }

  /* ── Top graphic ───────────────────────────────────────── */
  .section-cta__top-graphic {
    position: relative;
    width: clamp(16rem, 37.08cqw, 33.375rem);
    aspect-ratio: 534 / 266;
    overflow: visible;
    flex-shrink: 0;
    margin-bottom: clamp(-0.75rem, -1.67cqw, -1.5rem);
  }

  .section-cta__blob-bg {
    position: absolute;
    width: 101.65%;
    height: auto;
    top: -3.28%;
    left: 50%;
    transform: translateX(-50%) rotate(-5deg);
    transform-origin: center center;
    pointer-events: none;
    user-select: none;
  }

  .section-cta__blob-text {
    position: absolute;
    top: 58.75%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-5deg);
    transform-origin: center center;
    font-size: var(--h2);
    font-weight: 700;
    line-height: 0.9;
    color: var(--c-primary);
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
  }

  /* ── Title ─────────────────────────────────────────────── */
  .section-cta__title {
    /* Desktop ceiling 123px (= 7.6875rem); 8.54cqw at 1440px container
       lands exactly on 123px. Mobile floor stays at 3.25rem so the
       title still breathes on small screens. */
    font-size: clamp(3.25rem, 8.54cqw, 7.6875rem);
    font-weight: 700;
    line-height: 0.9;
    color: var(--c-cream);
    position: relative;
    z-index: 1;
    /* Prefer balanced 2-line break ("харчування для" / "вашої дитини"). */
    text-wrap: balance;
    /* Cyrillic diacritic safety. Mazzard Soft M's ascender doesn't
       cover ї/й dots, so the global `text-box-trim: trim-both` clips
       them. Disable trim here and pull the title back up via negative
       margin so the visual gap to the bubble stays the same. */
    text-box-trim: none;
    margin-block-start: -0.18em;
  }

  /* ── Actions (Maestro Intrinsic Sizing) ────────────────── */
  .section-cta__actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    gap: 0.5rem;
    width: 100%;
    max-width: 24.5rem;
    justify-content: center;
  }

  /* ── App store / Google Play badge buttons ───────────── */
  .btn-store {
    position: relative;
    display: block;
    flex: none;
    width: 12rem;
    height: 4rem;
    padding: 0;
    overflow: visible;
    border-radius: 0.75rem;
    background: var(--btn-bg) center / contain no-repeat;
    justify-self: center;
  }

  .btn-store::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--btn-bg-hover) center / contain no-repeat;
    opacity: 0;
    transition: opacity 0.2s var(--ease);
    pointer-events: none;
  }

  .btn-store:hover::before,
  .btn-store:focus-visible::before {
    opacity: 1;
  }

  /* Section is data-nav-theme="light" → reversed (cream) bg */
  .btn-gplay {
    --btn-bg:       url('../../images/btn-google-play-xl-rev.svg');
    --btn-bg-hover: url('../../images/btn-google-play-xl-rev-hover.svg');
  }
  .btn-appstore {
    --btn-bg:       url('../../images/btn-app-store-xl-rev.svg');
    --btn-bg-hover: url('../../images/btn-app-store-xl-rev-hover.svg');
  }

  /* ── Mobile (Figma 5387:11734) ──
     Actions: 342 × 136, two w-full buttons stacked with gap-8.
     The SVG (3:1 native) keeps its 192 × 64 size centered via
     `contain`; the cream background-color fills the rest of the
     full-width button. */
  @container sectionCta (max-width: 48rem) {
    /* Match text column width to the actions stack on mobile. */
    .section-cta__text {
      max-width: 26rem;
    }

    .section-cta__actions {
      grid-template-columns: 1fr;
    }

    .btn-store {
      width: 100%;
      background-color: var(--c-cream);
    }

    .btn-store::before {
      background-color: var(--c-cream);
    }
  }
}