/* 05 · Our Story + Gift Atelier — spec §4 "05". Full-bleed three-panel row:
   A story text (30%) / B story photo (20%) / C gift atelier (50%). Panel
   widths switch per breakpoint via grid-template-areas rather than
   reordering markup, so C's DOM position (search engines, screen readers)
   stays the same as its visual position at every tier. */
@layer components {
  .story-gifting {
    display: grid;
    grid-template-columns: 30% 20% 50%;
    grid-template-areas: "a b c";
    min-height: 440px;
  }

  /* ---- Panel A: story text ------------------------------------------------ */
  .story-gifting__text {
    grid-area: a;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(32px, 4vw, 60px); /* ~58px at 1440 — spec calls this out explicitly; the clamp already lands there */
    background-color: var(--sand-200);
  }

  .story-gifting__eyebrow {
    margin: 0 0 18px;
  }

  .story-gifting__heading {
    margin: 0 0 18px;
  }

  .story-gifting__body {
    margin: 0 0 24px;
    max-width: 360px;
  }

  /* ---- Panel B: story photo ----------------------------------------------- */
  .story-gifting__photo {
    grid-area: b;
  }

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

  /* ---- Panel C: gift atelier ----------------------------------------------
     id="gifting" lives on this element (spec: the panel IS the anchor target). */
  .gift {
    grid-area: c;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    align-items: center;
    background-color: var(--cocoa-700);
    color: var(--text-on-dark);
  }

  /* Stacking: .gift__media and .gift__content are DOM-ordered (media first)
     positioned siblings inside .gift's own stacking context (isolation:
     isolate above), so plain z-index:0/1 on them — not negative values —
     keeps every comparison inside that one context. A negative z-index here
     was the first attempt; it silently gave .gift__media its OWN nested
     stacking context (any non-auto z-index does that), which then made the
     ::after gradient's z-index relative to *that* context instead of to the
     <img> — putting the gradient BEHIND the photo instead of over it, with
     no visual error, just an unreadable panel once real content overflowed
     the gradient's assumed coverage. */
  .gift__media {
    position: absolute;
    inset: 0;
    z-index: 0;
  }

  .gift__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right center; /* hamper anchored right, spec: "over the right ≈65%" */
  }

  .gift__media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1; /* above the <img>, within .gift__media's own stacking context */
    background: linear-gradient(
      90deg,
      var(--cocoa-700) 0 32%,
      color-mix(in srgb, var(--cocoa-700) 75%, transparent) 45%,
      transparent 70%
    );
  }

  .gift__content {
    position: relative;
    z-index: 1; /* above .gift__media's entire bundle, within .gift's stacking context */
    max-width: 400px;
    padding-left: 35px; /* spec: "35px from the panel's left edge" */
    padding-right: var(--gutter); /* not spec'd; keeps the text off the raw right edge on narrower "50%" panels */
  }

  .gift__eyebrow {
    margin: 0 0 18px; /* not spec'd exactly; matches panel A's eyebrow-to-heading gap for visual consistency */
  }

  .gift__heading {
    margin: 0;
  }

  .gift__list {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
  }

  .gift__list li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body);
    font-size: var(--fs-body);
    color: var(--text-on-dark);
  }

  .gift__list .icon {
    flex: none;
    color: var(--gold-400);
  }

  .gift__cta {
    margin-top: 18px;
  }

  /* ---- Responsive ---------------------------------------------------------
     Tablet: A + B share a row (60/40), C wraps full-width below. */
  @media (min-width: 768px) and (max-width: 1023.98px) {
    .story-gifting {
      grid-template-columns: 60% 40%;
      grid-template-areas:
        "a b"
        "c c";
    }
  }

  /* Mobile: stacks A, then B (16:9), then C; C's gradient goes vertical so
     the text stays readable over the photo instead of bleeding off the side. */
  @media (max-width: 767.98px) {
    .story-gifting {
      grid-template-columns: 1fr;
      grid-template-areas:
        "a"
        "b"
        "c";
      min-height: auto;
    }

    .story-gifting__photo {
      aspect-ratio: 16 / 9;
    }

    .gift {
      padding-block: var(--space-7);
    }

    /* The desktop gradient's stops are percentages of the panel's WIDTH,
       which is fixed (min-height:440px row) — reliable, since "how far the
       text extends" barely varies. Vertically, this panel's height is
       content-driven (eyebrow + 3-line heading + 3-item list + button, not a
       fixed min-height) — but because that same content is *why* the panel
       is whatever height it ends up being (height = content + fixed
       padding), the content reliably fills the top ~88% of the panel
       regardless of exact height, so a generous percentage still tracks it
       correctly. (A first attempt tried min(75%, 370px) to get a "fixed
       safety depth" — but min() picked whichever was smaller, and 75% of
       this content-sized panel came out smaller than 370px, so the 75%
       figure was the one actually limiting it, undershooting the same way
       the plain 32% did.) Measured: content ends at ~88% of panel height;
       92% leaves a small margin and still fades to a sliver of visible photo. */
    .gift__media::after {
      background: linear-gradient(
        180deg,
        var(--cocoa-700) 0 92%,
        color-mix(in srgb, var(--cocoa-700) 75%, transparent) 98%,
        transparent 100%
      );
    }

    .gift__content {
      padding-right: var(--gutter);
      max-width: none;
    }
  }
}