/* ── Section: Safe Food Delivery ───────────────────────────
   Figma desktop 5821:3544, mobile 5378:10871
   Desktop: text left (w:731), food layers right (w:1220, right:0)
   Mobile:  text top (w:full), food layers stacked below in grid
   Bubble + text rendered as a single inline SVG (.ssd-bubble).
   ──────────────────────────────────────────────────────── */

.wp-block-yummo-section-safe-delivery {
  --c-primary: var(--wp--preset--color--primary, #5c1a34);
  --c-cream:   var(--wp--preset--color--cream, #f6eddc);
  --c-mint:    var(--wp--preset--color--mint, #b8f2ce);
  --h2:        var(--wp--preset--font-size--h-2, clamp(3.25rem, 7.78cqi, 7rem));
  --body:      var(--wp--preset--font-size--body, 1.125rem);

  background: var(--c-cream);
  /* Figma desktop 5821:3542 = 838px, mobile 5387:12258 = 742px */
  height: 52.375rem;
  position: relative;
  overflow: clip;
  scroll-snap-align: start;
  scroll-snap-stop: always;

  /* Header offset for absolute children. The fixed site-header is 7rem
     tall on desktop (padding-block:2rem × 2 + 3rem logo). Padding on
     the section itself is a no-op for absolute children (CSS spec:
     absolute `top:0` references the OUTER padding edge), so we expose
     this as a custom property and the children below add it to their
     own `inset-block-start` / `height`. */
  --ssd-header-h: 7rem;

  container-type: inline-size;
  container-name: yummo-ssd;
  content-visibility: auto;
  contain-intrinsic-size: auto 52.375rem;

  /* Section-level mobile overrides MUST live in @media — an element
     cannot query its own container, so .wp-block-yummo-section-safe-delivery
     itself never sees the @container yummo-ssd rules below. */
  @media (max-width: 47.9375rem) {
    /* Figma mobile is 742 (46.375rem). The site-wide canon pushes
       .ssd-content's padding-block-start to 8.2rem (131px = 80 + 51
       post-rotation bubble overflow). The food container has
       aspect-ratio: 1220/1199, so its height scales with viewport
       width — at wider mobile viewports it exceeds the remainder of
       a fixed section height, and `overflow: clip` cuts the mid beet
       off at the bottom. Drop the fixed desktop height and let the
       section grow to fit the food stack on every mobile width.
       50.625rem matches Figma + the canon padding delta as the floor
       for typical phones. */
    height: auto;
    min-height: 50.625rem;
    --ssd-header-h: 0rem;
    contain-intrinsic-size: auto 50.625rem;
  }

  /* ── Food layers (right column, absolute on desktop) ──
     Figma: right:0, top:0, w:1220px (84.72% of 1440), h:1199px

     Two food containers exist: --desktop and --mobile. Visibility is
     toggled via @container query below; only the active one renders. */
  .ssd-food {
    position: absolute;
    inset-block-start: var(--ssd-header-h);
    inset-inline-end: 0;
    width: 84.72cqi;
    height: calc(100% - var(--ssd-header-h));
    z-index: 0;
    pointer-events: none;
  }

  /* Hide mobile food container by default (desktop view). */
  .ssd-food--mobile { display: none; }

  /* Layers stack in the food container. width:100% + height:auto
     renders each image at its native aspect (assets are 2440×2398
     ≈ 1220/1199), so the composition matches Figma 1:1: image fills
     food's full width and the bottom ~30% overflows the section,
     getting clipped by the section's `overflow: clip`. A previous
     `width: auto; height: 100%` pinned images to food's clipped
     height (726px), shrinking them ~60% AND squeezing them to the
     right side of food via inset-inline-end:0 — which the designer
     read as deformation.
     top:-20% gives a 20% buffer so the GSAP yPercent drift in
     view.js never reveals gaps above. */
  .ssd-layer {
    position: absolute;
    inset-block-start: -20%;
    inset-inline-end: 0;
    width: 100%;
    height: auto;
    display: block;
    will-change: transform;
  }

  .ssd-layer--down { z-index: 1; }
  .ssd-layer--mid  { z-index: 2; }
  .ssd-layer--top  { z-index: 3; }

  /* ── Text column (top-anchored on desktop) ──
     Figma: left:32px, w:731px. Top-anchored per site-wide canon:
     visible top of bubble must sit 176px from section top edge (header-
     inclusive). Bubble rotates -5deg around left-center; its post-
     rotation bounding box extends ~54px above the un-rotated top edge,
     so the un-rotated `.ssd-content` top sits at 176 + 54 = 230px ≈
     14.375rem. */
  .ssd-content {
    position: absolute;
    inset-inline-start: 2.22cqi; /* 32px at 1440 */
    inset-block-start: 14.375rem;
    width: clamp(20rem, 50.76cqi, 45.6875rem); /* 731px at 1440 */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    isolation: isolate;
    padding-block-end: 2.5rem;
    z-index: 10;
  }


  .ssd-bubble-wrap {
    display: inline-block;
    flex-shrink: 0;
    width:  clamp(20rem,    43.37cqi, 39.03rem); /* 624.468px @ 1440 */
    height: clamp(8.776rem, 19.03cqi, 17.13rem); /*    274px  @ 1440 */
    transform: rotate(-5deg);
    transform-origin: left center;
    margin-inline-start: -1rem;
    margin-block-end: -1rem;
    position: relative;
    z-index: 2;
    pointer-events: none;
  }

  .ssd-bubble {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
  }

  /* ── Title area (below bubble) ──
     Figma: pl:40px, gap:24px, title full-width, desc w:344 */
  .ssd-title-area {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: flex-start;
    padding-inline-start: 2.5rem; /* 40px */
    width: 100%;
    margin-block-end: -2.5rem;
  }

  .ssd-title {
    font-family: "Mazzard Soft M", sans-serif;
    font-size: var(--h2);
    font-weight: 700;
    line-height: 0.9;
    color: var(--c-primary);
    max-width: 50%;
  }

  .ssd-desc {
    font-family: "Mazzard Soft M", sans-serif;
    font-size: var(--body);
    font-weight: 500;
    line-height: 22px;
    font-size: 18px;
    color: var(--c-primary);
    max-width: 21.5rem; /* 344px */
  }

  /* ── Mobile layout (≤ 767px) ──
     Figma node 5378:10871: content column stacked, image grid below.
     Bubble 302×149 rotated -10deg, image aspect 1498/2398.
     Section-level rules live in the @media block above (an element
     cannot query its own container). */
  @container yummo-ssd (max-width: 47.9375rem) {
    .ssd-content {
      position: relative;
      inset-inline-start: auto;
      inset-block-start: auto;
      transform: none;
      width: 100%;
      /* Site-wide canon: visible top of bubble must sit 80px from
         section top edge. Bubble rotates -10deg around left-center;
         its post-rotation bbox extends ~51px above the un-rotated top,
         so padding-block-start = 80 + 51 = 131px ≈ 8.2rem. */
      padding-block-start: 8.2rem;
      z-index: 2;
    }

    .ssd-bubble-wrap {
      transform: rotate(-10deg);
      /* Pair width/height so the wrap keeps aspect 624.468 / 274
         independent of the GSAP width animation. */
      width:  min(18.875rem, 77.5cqi);  /* 302px */
      height: min(8.282rem,  34.0cqi);  /* 132.5px (302 × 0.4388) */
      /* margin-inline-start: 1rem; */
      margin-block-end: -0.5rem;
    }

    .ssd-title-area {
      padding-inline: 1rem; /* 16px */
      gap: 1.5rem;
      margin-block-end: -1rem;
    }

    /* Swap which food container renders on mobile. */
    .ssd-food--desktop { display: none; }
    .ssd-food--mobile  { display: grid; }

    /* Food becomes a stacked grid below the text, full width.
       Aspect ratio matches the actual mobile food image asset
       (Figma mobile 5387:12258 image stack ≈ 390×370 ≈ 1.05:1).
       Three layers occupy the same grid cell to overlap pixel-perfectly. */
    .ssd-food--mobile {
      position: relative;
      inset-block-start: auto;
      inset-inline-end: auto;
      width: 100%;
      height: auto;
      grid-template-columns: 1fr;
      grid-template-rows: 1fr;
      aspect-ratio: 1220 / 1199;
      z-index: 1;
      overflow: hidden;
    }

    .ssd-food--mobile .ssd-layer {
      grid-area: 1 / 1;
      position: relative;
      inset: auto;
      width: 100%;
      height: 120%;
      object-fit: cover;
      object-position: center top;
      will-change: transform;
    }

    /* Mid carries the hero beet composition (whole + halved beet),
       2440×2398 → aspect 1.018, which already matches the cell's
       1220/1199. The base `height: 120%; object-fit: cover; object-
       position: center top` rule therefore scales the mid image up
       ~22% and crops the bottom — exactly the area where the beet
       sits. Show it full-size instead:
         • height: 100% + object-fit: contain renders the whole image
           inside the cell, edge-to-edge (no crop, since aspects
           match), so the beet lands at the same coordinates as in
           the source asset.
         • object-position: center keeps it centred in case future
           assets have a slight aspect mismatch. */
    .ssd-food--mobile .ssd-layer--mid {
      height: 100%;
      object-fit: contain;
      object-position: center;
    }
  }

  @media (min-width: 2500px) {
    .ssd-food {
      width: 90.625rem;            /* 1450px */
    }


    .ssd-layer {
      width: 100%;
      height: auto;
      aspect-ratio: 1220 / 1199;
    }

    .ssd-content {
      width: 90.625rem;            /* 1450px text column */
      inset-inline-start: 2rem;    /* 32px → Figma text-col px-32 edge */
    }

    .ssd-bubble-wrap {
      margin-inline-start: 0;
    }

    .ssd-title {
      max-width: 32rem;            /* 512px → forces 2-line wrap */
    }
  }

  /* ── Accessibility: reduced motion ── */
  @media (prefers-reduced-motion: reduce) {
    .ssd-layer {
      transform: none !important;
      will-change: auto;
    }
  }
}