/* ── Section: Plates ───────────────────────────────────────
   Figma desktop 5821:3930 (content 1440×758, items-start, pr-[344];
   each child is 892 wide via flex-[1_0_0] + mr-[-344]: image at
   (0,0) 892×877.4, text at (548,0) 892×758).
   Figma mobile  5378:11108 (content 390×710 at y=134 from section
   top; text on top 271 tall, image 404×397 right-aligned below).
   ──────────────────────────────────────────────────────── */

.wp-block-yummo-plates {
  --c-primary: var(--wp--preset--color--primary, #5c1a34);
  --c-pink:    var(--wp--preset--color--pink, #fa8fc2);
  --h2:        var(--wp--preset--font-size--h-2, clamp(3.25rem, 7.78cqi, 7rem));
  --body:      1.125rem; /* Figma spec: 18px on every breakpoint, including mobile */

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

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

  /* ── Layout shell ──
     Desktop: relative box; image and text are absolutely placed.
     Mobile:  flex column-reverse (DOM = image, text → render = text on top, image below). */
  .plates-content {
    position: relative;
    height: 100%;
    isolation: isolate;
  }

  /* ── Image column (left on desktop) ──
     Figma: image element 892 × 877.4 anchored top-left (extends
     ~119px past content bottom; clipped by section overflow).
     Three composite layers stacked in the same box.

     Two image containers exist: --desktop and --mobile. Visibility is
     toggled via @container query below; only the active one renders. */
  .plates-image {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    width: 61.94cqi; /* 892px @1440 */
    aspect-ratio: 1220 / 1200;
    pointer-events: none;
    z-index: 1;
  }

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

  .plates-image__layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    will-change: transform;
  }

  .plates-image__layer img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }

  .plates-image__layer--down { z-index: 1; }
  .plates-image__layer--mid  { z-index: 2; }
  .plates-image__layer--top  { z-index: 3; }

  /* ── Text column (right on desktop) ──
     Figma: flex-[1_0_0] mr-[-344] pb-[136] px-[32] min-h-[758].
     Text frame is 892px wide @1440, full section height. Bottom/inline
     padding kept from Figma; top padding is set by the site-wide canon:
     176px visible gap from section top to first content. Bubble rotates
     +5deg around left-center; that rotation does NOT push the bbox
     above the un-rotated top (TR moves down, TL stays put), so the
     padding is applied literally. */
  .plates-text {
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
    width: clamp(20rem, 61.94cqi, 55.75rem); /* 892px @1440 */
    min-height: 100%; /* fill section */
    padding-block: 11rem 8.5rem; /* 176px canon top, pb-[136] */
    padding-inline: 2rem; /* px-[32] */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    isolation: isolate;
    z-index: 4;
  }

  /* ── Top graphic (bubble wrapper) ──
     Figma: h-[314] w-[632] mb-[-40] z-[2]. */
  .plates-top-graphic {
    position: relative;
    flex-shrink: 0;
    width: clamp(20rem, 43.89cqi, 39.5rem); /* 632px @1440 */
    height: clamp(13rem, 21.81cqi, 19.625rem); /* 314px @1440 */
    margin-block-end: -1.5rem; 
    z-index: 2;
    display: flex;
    align-items: flex-start;
    pointer-events: none;
  }

  /* ── Bubble (single inline SVG, blob + "Прості ідеї") ──
     SVG aspect 624.468 × 274; rotated +5deg around left-center. */
  .plates-bubble {
    display: block;
    width: clamp(20rem, 43.37cqi, 39.03rem); /* 624.468px @1440 */
    height: auto;
    transform: rotate(5deg);
    transform-origin: left center;
    overflow: visible;
  }

  /* Mobile bubble parts are hidden on desktop (single inline SVG above
     drives the desktop visual). The mobile container query below
     toggles which set is shown. */
  .plates-bubble--mobile {
    display: none;
  }

  /* ── Title area (h2 + description) ──
     Figma: gap-[24] pl-[40] mb-[-40] z-[1] justify-end. */
  .plates-title-area {
    position: relative;
    z-index: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: flex-start;
    justify-content: flex-end;
    padding-inline-start: 2.5rem; /* pl-[40] */
    margin-block-end: -2.5rem;     /* mb-[-40] */
  }

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

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

  /* ── Mobile — Figma 5378:11108 (1:1) ─────────────────────────
     Content frame 390×~710 starting at y=134 (header clear).
     Markup order in DOM: image → text. column-reverse renders text
     on top, image below; align-items:flex-end keeps the 404-wide
     image right-aligned (overflowing the left edge per Figma).
     Section overflow:clip handles the overflow.

     Section-level overrides live in @media because an element cannot
     query its own container (.wp-block-yummo-plates IS the named
     container, so its own aspect-ratio/height resets must come from
     a media query). Descendant overrides stay in @container.
     ──────────────────────────────────────────────────────── */
  @media (max-width: 47.9375rem) {
    /* Figma mobile frame is 742 (5387:12293) — section needs +102 for the
       fixed-header overlap so the 710px content area fits without clipping
       the plate stack. 742 + 102 = 844 = 52.75rem. */
    height: 52.75rem;
    /* Site-wide canon: 80px visible gap from section top to first
       content. The bubble background image isn't rotated, so the
       padding is applied literally. */
    padding-block-start: 5rem;
    contain-intrinsic-size: auto 52.75rem;
  }

  @container yummo-plates (max-width: 47.9375rem) {
    .plates-content {
      display: flex;
      flex-direction: column-reverse;
      align-items: flex-end;
      height: auto;
      isolation: isolate;
    }

    /* Hide the desktop inline-SVG bubble; show the mobile pieces. */
    .plates-bubble--desktop {
      display: none;
    }
    .plates-bubble--mobile {
      display: revert;
    }

    /* Swap which plate-image container renders on mobile. */
    .plates-image--desktop { display: none; }
    .plates-image--mobile  { display: block; }

    /* Plate image (mobile) — Figma 404 × 397.377 (3 stacked layers).
       Width is 100% of the section so the image stays flush to BOTH the
       left and right viewport edges on every phone width (Figma's exact
       14px left overflow at 390cqi was useful only at the design width;
       on narrower phones it grew, on wider ones a gap appeared). The
       aspect ratio (404:397) is preserved so the artwork doesn't squish. */
    .plates-image--mobile {
      position: relative;
      inset: auto;
      width: 100%;
      height: auto;
      aspect-ratio: 404 / 397;
      align-self: stretch;
      z-index: 1;
    }

    /* Text wrapper — full width, items-start, pb-[16].
       Header clear is on the section itself, so no top padding here. */
    .plates-text {
      position: relative;
      inset: auto;
      width: 100%;
      min-height: 0;
      padding-block-start: 0;
      padding-block-end: 16px;      /* pb-[16] */
      padding-inline: 0;
      align-items: flex-start;
      z-index: 2;
    }

    /* Top graphic — fixed 302×150, mb-[-16], z-2. */
    .plates-top-graphic {
      position: relative;
      width: 302px;
      height: 150px;
      margin-block-end: -16px;
      z-index: 2;
      flex-shrink: 0;
      display: block;
      pointer-events: none;
    }

    /* Bubble background image — 302×149, anchored at (calc(50%+1), 0.5)
       and shifted by -50% on X to match Figma's centered placement. */
    .plates-bubble-bg {
      position: absolute;
      top: 0.5px;
      left: calc(50% + 1px);
      transform: translateX(-50%);
      width: 302px;
      height: 149px;
      pointer-events: none;
      user-select: none;
    }

    /* Bubble text overlay — Figma's container is 244.179×67.826,
       positioned with translate-y-full at top:122.81 → visible top
       at y=54.984 (122.81 − 67.826). The flex-none wrapper inside
       carries the rotate(5deg). Collapsed into a single element
       here: same bounding box, same default rotate-around-center. */
    .plates-bubble-text {
      position: absolute;
      top: 54.984px;
      left: calc(50% - 121px);
      width: 244.179px;
      height: 67.826px;
      display: flex;
      align-items: center;
      justify-content: center;
      transform: rotate(5deg);
      font-family: "Mazzard Soft M", sans-serif;
      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 block — w-full, gap-[24], px-[16], items-start,
       justify-end, mb-[-16], z-1. */
    .plates-title-area {
      position: relative;
      width: 100%;
      padding-inline: 16px;
      padding-inline-start: 16px;   /* override desktop pl-[40] */
      margin-block-end: -16px;
      gap: 24px;
      align-items: flex-start;
      justify-content: flex-end;
      z-index: 1;
    }

    .plates-title {
      width: 100%;                  /* min-w-full */
      font-size: var(--h2);
      line-height: 0.9;
    }

    .plates-desc {
      width: 344px;                 /* w-[344] fixed per Figma */
      max-width: 100%;
      font-size: 18px;              /* body */
      font-weight: 500;
      line-height: 22px;            /* leading-[22] */
    }
  }

  /* ── Wide-screen (Figma 5821:5459) ──
     At 2500 viewport: image 1422w (left), text 1422w (right) overlap.
     Code's cqi-scaled image grows past Figma (61.94cqi @2500 = 1548px),
     and text caps at 55.75rem (892px) — too narrow. Cap both at 1422px
     and grow section height to 1436 so the tall image isn't clipped. */
  @media (min-width: 2500px) {
    height: 89.75rem;                          /* 1436px Figma */
    contain-intrinsic-size: auto 89.75rem;

    .plates-image {
      width: 88.875rem;                         /* 1422px */
    }

    .plates-text {
      width: 88.875rem;                         /* 1422px */
    }
  }

  /* Reduced motion: disable parallax transforms. */
  @media (prefers-reduced-motion: reduce) {
    .plates-image__layer {
      transform: none !important;
      will-change: auto;
    }
  }
}