/* * Block: Yummo Hero Simple
 * Single-image background with scroll-driven 3D transform.
 * Reveal color (visible during deformation) is #5C1A34.
 */
.wp-block-yummo-hero-simple {
  --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-pink:          var(--wp--preset--color--pink);
  --c-mint:          var(--wp--preset--color--mint);
  --c-mint-el:       var(--wp--preset--color--mint-el);
  --r-card:          var(--wp--custom--radius--card);
  --r-btn:           var(--wp--custom--radius--button);
  --r-img:           var(--wp--custom--radius--image);
  --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);

  --h1: clamp(4.25rem, 10.56vw, 9.5rem);

  /* Reveal color visible behind the deforming background */
  background: #5C1A34;
  /* Full viewport height per designer feedback (was fixed 56rem). The
     `min-height: 37.5rem` floor (600px) protects 13" laptops with
     short viewports from cramming the title under the fixed menu and
     squashing the desc + CTAs into the bottom edge — without it,
     `100svh` on a 720p browser leaves no padding budget for the
     content stack. No max-height: real users on 4K monitors run at
     ≥150% OS scaling (effective ~2.5k CSS px), where the layout still
     reads correctly; only "4K at 100% scale" power-user setups would
     show extra whitespace, and that's acceptable. */
  height: 100svh;
  min-height: 37.5rem;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  perspective: 1500px;
  perspective-origin: 50% 40%;

  .hero-simple-stage {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding-block: 7.5rem 4rem;
    z-index: 3;
    transform-origin: 50% 50%;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    will-change: transform;
  }

  /* ── Single-image background ─────────────────────────── */
  .hero-simple-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    transform-origin: 50% 50%;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    will-change: transform;
    z-index: 1;
  }

  .hero-simple-bg__layer {
    position: absolute;
    inset: 0;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
  }

  .hero-simple-bg__layer--mobile { display: none; }

  /* ── Content column ── */
  .section-hero__content {
    position: relative;
    z-index: 3;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3rem;
    padding-inline: var(--page-px);
  }

  .hero-title {
    color: var(--c-primary);
    font-family: "Mazzard Soft M";
    font-size: var(--h1);
    font-weight: 700;
    line-height: 0.8;
    /* Figma node 5821:4860 — title wraps inside 1160px box at 152px h1,
       producing the 2-line layout from the design. No-op on narrow
       viewports where the natural reflow keeps it within the cap. */
    max-width: 72.5rem;
  }

  .hero-desc {
    font-size: var(--body);
    line-height: 22px;
    max-width: 39.5rem;
  }

  /* ── Actions (mirrors section-cta__actions Maestro Intrinsic Sizing) ── */
  .hero-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 ──────────────────
     Single full-button SVG as background, hover swaps via ::before.
     Same render pattern as section-cta__actions. */
  .hero-actions .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;
  }

  .hero-actions .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;
  }

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

  /* Mobile-first: wide badge variant (326×64). No hover asset shipped
     for the wide variant — ::before falls back to the default bg. */
  .hero-actions .btn-gplay {
    --btn-bg:       url('../../images/btn-google-play-wide.svg');
    --btn-bg-hover: url('../../images/btn-google-play-wide.svg');
  }
  .hero-actions .btn-appstore {
    --btn-bg:       url('../../images/btn-app-store-wide.svg');
    --btn-bg-hover: url('../../images/btn-app-store-wide.svg');
  }

  @media (min-width: 64rem) {
    /* Desktop: XL non-reversed badges with pink hover state. */
    .hero-actions .btn-gplay {
      --btn-bg:       url('../../images/btn-google-play-xl.svg');
      --btn-bg-hover: url('../../images/btn-google-play-xl-hover.svg');
    }
    .hero-actions .btn-appstore {
      --btn-bg:       url('../../images/btn-app-store-xl.svg');
      --btn-bg-hover: url('../../images/btn-app-store-xl-hover.svg');
    }

    .hero-simple-stage {
      /* Geometric centre per designer feedback ("прибрати
         компенсацію — виглядає кривувасто"). Previous
         `padding-block: 10rem 0` offset the content downward so it
         sat in the middle of the visible area below the fixed
         site-header — designer prefers pure section-centre even
         though the title can peek behind the transparent header at
         very short viewports. */
      padding-block: 0;
    }
  }

  /* ── Mobile layout ── */
  @media (max-width: 63.9375rem) {
    height: 100svh;

    .hero-simple-stage {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding-block: 0;
    }

    .hero-simple-bg__layer--desktop { display: none; }
    .hero-simple-bg__layer--mobile  { display: block; }

    .section-hero__content {
      width: 100%;
      padding-inline: 1rem;
      padding-block: 5.5rem 0;
    }

    .hero-desc {
      max-width: none;
    }

    /* Mobile (mirrors section-cta @container max-width: 48rem) */
    .hero-actions {
      grid-template-columns: 1fr;
      max-width: none;
    }

    .hero-actions .btn-store {
      width: 100%;
    }
  }
}