/* ============================================================
   CELL 1 · ARRIVAL HERO — LIKAZOO Wedding Barn
   Scoped entirely under #cell-1. Tokens only (no raw hex except
   documented paper/scrim tints derived from the brand family).
   Authority: G4 composition + G2 headline register + tile chip treatment.
   Radius 16px · base #F5EFE5 · alive at t0 · single clay CTA.
   ============================================================ */

#cell-1 {
  /* The hero owns its own vertical rhythm: clear the fixed nav on top,
     a calm breath on the bottom. Overrides the generic .section padding so
     the whole hero (copy + media + proof rail) reads in one viewport at 100%. */
  padding-block: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: clip;
  /* faint pressed-paper warmth over the Hearth-Paper base (data-bg="marble") */
  background:
    radial-gradient(120% 90% at 12% 8%, rgba(255, 255, 255, 0.55), transparent 60%),
    radial-gradient(140% 120% at 100% 120%, rgba(168, 97, 71, 0.05), transparent 55%),
    var(--marble-50);
}

/* ── The split ── copy-left / barn-photo-right ── */
#cell-1 .hero__inner {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  align-items: center;
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  /* clear the fixed nav + a calm breath; tuned so the full split + proof rail
     reads inside one viewport at 1440/1280 (kill-gate: hero whole at 100%). */
  padding-top: calc(var(--nav-h) + clamp(1rem, 0.25rem + 2.5vw, 2.25rem));
  padding-bottom: clamp(1.5rem, 0.9rem + 1.6vw, 2.25rem);
  width: 100%;
}

/* ═══════════════════ COPY COLUMN ═══════════════════ */
#cell-1 .hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 40rem;
  min-width: 0;   /* grid item: allow the track to shrink, never overflow the page */
}

#cell-1 .hero__eyebrow {
  color: var(--clay);
  font-weight: 600;
  margin-bottom: clamp(1rem, 0.5rem + 1.5vw, 1.6rem);
  max-width: 100%;
}
#cell-1 .hero__eyebrow-sep {
  margin-inline: 0.55em;
  color: var(--stone-500);
  opacity: 0.8;
}

#cell-1 .hero__title {
  color: var(--meadow);
  /* Tuned DOWN from the raw --step-hero token: this is a SPLIT hero that must
     also seat a lede + CTA + a proof-chip rail in ONE viewport (kill-gate:
     hero whole at 100%). The token's 6.8rem ceiling is for a full-bleed single-
     column hero; here the invitation headline reads at estate scale without
     four-lining the viewport. Register (mixed-case, clay em) is unchanged. */
  font-size: clamp(2.85rem, 1.6rem + 3.5vw, 4.5rem);
  line-height: 1.04;
  letter-spacing: -0.012em;
  text-wrap: balance;
  margin-bottom: clamp(1rem, 0.55rem + 1.4vw, 1.55rem);
}
#cell-1 .hero__title .em {
  color: var(--clay);
  font-style: italic;
  display: inline-block;
}

/* antique-brass hairline divider (CSS-drawn, no illustrated icon) */
#cell-1 .hero__divider {
  display: block;
  width: clamp(3.5rem, 2rem + 6vw, 6rem);
  height: 1px;
  margin-bottom: clamp(1.1rem, 0.6rem + 1.4vw, 1.6rem);
  background: linear-gradient(
    90deg,
    var(--clay-soft) 0%,
    rgba(168, 97, 71, 0.35) 55%,
    transparent 100%
  );
}

#cell-1 .hero__lede {
  color: var(--text-on-paper);
  font-size: var(--step-1);
  line-height: 1.55;
  max-width: 34rem;
  margin-bottom: clamp(1.6rem, 1rem + 2vw, 2.4rem);
}

/* ── Actions: single clay CTA + one reassurance line ── */
#cell-1 .hero__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(0.7rem, 0.5rem + 0.6vw, 1rem);
}

#cell-1 .hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  padding: 0.95em 1.7em;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--step-0);
  letter-spacing: 0.01em;
  color: #FFF8F1;
  background: var(--clay);
  border-radius: 999px;                 /* pill CTA (tile spec) */
  box-shadow:
    0 12px 26px -14px rgba(140, 79, 57, 0.55),
    0 2px 0 0 rgba(255, 255, 255, 0.06) inset;
  /* transition + hover-scale handled below (scale-not-shift, hover:hover gated) */
}
#cell-1 .hero__cta-glyph {
  width: 1.05em;
  height: 1.05em;
  flex: none;
  border: 1.5px solid currentColor;
  border-radius: 4px;
  position: relative;
  opacity: 0.92;
}
/* CSS-drawn calendar glyph: top binding tabs + a header rule (no SVG icon) */
#cell-1 .hero__cta-glyph::before {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  top: -0.28em;
  height: 0.32em;
  border-left: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
}
#cell-1 .hero__cta-glyph::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 30%;
  height: 1.5px;
  background: currentColor;
  opacity: 0.85;
}
#cell-1 .hero__cta-arrow {
  font-size: 1.05em;
  line-height: 1;
  transform: translateX(0);
  transition: transform 320ms var(--ease-out);
}

#cell-1 .hero__reassure {
  /* Muted Meadow-Ink, NOT --stone-500: on Hearth Paper the warm-gray muted
     token measured 3.46:1 (fails WCAG AA). --ink-700 is a genuine muted
     Meadow-Ink value (a step softer than body ink) that clears AA at 5.53:1
     while keeping the reassurance a whisper, not a heading. (A11y verify.) */
  color: var(--ink-700);
  font-size: var(--step--1);
  letter-spacing: 0.005em;
  margin: 0;
}

/* ═══════════════════ MEDIA COLUMN ═══════════════════ */
#cell-1 .hero__media {
  margin: 0;
  width: 100%;
  min-width: 0;   /* grid item: never force the track past the viewport */
}
#cell-1 .hero__media-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 47 / 34;                 /* subject 47 native ratio, cropped calm */
  max-height: min(62vh, 32rem);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow:
    0 28px 60px -34px rgba(51, 65, 58, 0.42),
    0 3px 10px -6px rgba(51, 65, 58, 0.28);
  isolation: isolate;
}
/* photo fills the frame (position:absolute;inset:0 so it honors the aspect box) */
#cell-1 .hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 62%;              /* hold the barn face + path, trim sky */
  /* warm, bright-to-golden treatment (DESIGN.md photography law) */
  filter: saturate(1.04) contrast(1.02) brightness(1.02);
  transform: scale(1.05);                /* headroom for the ambient drift */
  will-change: transform;
}

/* ambient sky/light drift — a barely-there warm light sweep at rest (t0 alive) */
#cell-1 .hero__sky-drift {
  position: absolute;
  inset: -12%;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(
    46% 40% at 30% 22%,
    rgba(255, 244, 224, 0.34),
    rgba(255, 240, 214, 0.10) 42%,
    transparent 70%
  );
  mix-blend-mode: screen;
  opacity: 0.9;
}

/* soft warm scrim — brand warmth + text-safety when the tag/caption sits over it */
#cell-1 .hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    200deg,
    transparent 40%,
    rgba(51, 65, 58, 0.10) 78%,
    rgba(51, 65, 58, 0.30) 100%
  );
}

/* vellum media tag (bottom-left) */
#cell-1 .hero__media-tag {
  position: absolute;
  left: clamp(0.75rem, 0.4rem + 1vw, 1.25rem);
  bottom: clamp(0.75rem, 0.4rem + 1vw, 1.25rem);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.5em 0.95em;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--meadow);
  background: rgba(251, 247, 241, 0.88);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 999px;
  box-shadow: 0 6px 18px -10px rgba(51, 65, 58, 0.4);
}
#cell-1 .hero__media-tag-sep { color: var(--clay); }

/* ═══════════════════ PROOF CHIP RAIL (icon-free) ═══════════════════ */
#cell-1 .hero__proof {
  border-top: 1px solid var(--hairline-dark);
  padding-block: clamp(1.25rem, 0.75rem + 1.6vw, 2rem);
  /* a whisper-lifted paper band under the split (tile proof-band read) */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0));
}
#cell-1 .hero__chips {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.75rem, 0.4rem + 1.4vw, 1.5rem);
  align-items: stretch;
}
#cell-1 .hero__chip {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: clamp(0.85rem, 0.5rem + 1vw, 1.15rem) clamp(1rem, 0.6rem + 1vw, 1.35rem);
  background: var(--paper-100);
  border: 1px solid var(--stone-200);
  border-radius: var(--radius);
  box-shadow: 0 8px 22px -18px rgba(51, 65, 58, 0.35);
}
#cell-1 .hero__chip-label {
  font-family: var(--font-display);      /* Mini-Serif A label (tile chip spec) */
  font-size: var(--step-mini);
  line-height: 1.1;
  color: var(--meadow);
}
#cell-1 .hero__chip-note {
  font-size: var(--step--1);             /* Mini-Sans caption */
  line-height: 1.42;
  color: var(--text-on-paper-muted);
  /* Sibling parity (C8 / T2.5): reserve a uniform TWO-line caption box so a
     short caption ("One-of-a-kind…") holds the same height as a wrapping one.
     Text tops align, boxes are equal at EVERY desktop width — kills the
     1/2/2/1 line-count staircase without fragile per-width copy tuning.
     (2 × line-height, in em so it tracks the caption's own font-size.) */
  min-height: 2.84em;
}

/* ═══════════════════ RESPONSIVE ═══════════════════ */

/* Tablet / narrow desktop: keep the split but let media breathe less tall. */
@media (max-width: 1080px) {
  #cell-1 .hero__inner {
    grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(1.5rem, 0.5rem + 3vw, 3rem);
  }
  #cell-1 .hero__media-frame { max-height: min(56vh, 26rem); }
}

/* Mobile: copy-first stack, then the barn, then a 2-up chip field. */
@media (max-width: 760px) {
  #cell-1 {
    min-height: 0;                       /* content-height stack, no forced 100svh */
    justify-content: flex-start;
  }
  #cell-1 .hero__inner {
    grid-template-columns: 1fr;
    gap: clamp(1.5rem, 1rem + 3vw, 2.25rem);
    padding-top: calc(var(--nav-h) + 1.5rem);
    padding-bottom: 1.5rem;
    text-align: left;
  }
  #cell-1 .hero__copy { max-width: none; }
  /* eyebrow wraps cleanly at narrow widths (the '·' can break to the next line) */
  #cell-1 .hero__eyebrow { line-height: 1.5; }
  #cell-1 .hero__eyebrow-sep { margin-inline: 0.4em; }
  /* Mobile headline: sized so "A weekend to remember." wraps cleanly INSIDE the
     content width (no horizontal overflow) while keeping the estate serif scale. */
  #cell-1 .hero__title {
    font-size: clamp(2.15rem, 7.2vw, 2.9rem);
    line-height: 1.08;
  }
  #cell-1 .hero__lede { font-size: var(--step-0); max-width: none; }
  #cell-1 .hero__cta { width: 100%; justify-content: center; }
  #cell-1 .hero__actions { align-self: stretch; }
  #cell-1 .hero__reassure { align-self: center; text-align: center; }
  #cell-1 .hero__media-frame {
    aspect-ratio: 3 / 2;
    max-height: 44vh;
  }
  #cell-1 .hero__chips {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 420px) {
  #cell-1 .hero__chips { grid-template-columns: 1fr; }
  /* Keep all four chips identical: title ABOVE caption (column), never a
     row-inline collapse. A row/flex-wrap layout let a short caption (#1
     "Family-run") ride up beside its label while long captions wrapped
     below theirs — a T2.6 sibling-layout mismatch. Column = uniform. */
  #cell-1 .hero__chip {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
  }
  /* Full-width 1-up: every caption is one line and boxes are equal by nature,
     so release the desktop 2-line reserve — no dead space under short captions. */
  #cell-1 .hero__chip-note { min-height: 0; }
}

/* ═══════════════════ MOTION (scoped) ═══════════════════
   Hover = scale-not-shift, gated to real hover pointers; states resolve on touch.
   The btn transition is defined globally in motion.css for .btn; the scale is
   added here so cell-1's CTA obeys the aliveness contract without touching shared
   files. Ambient drift + focus glow finished in js/cells/cell-1.js + below. */
@media (hover: hover) {
  #cell-1 .hero__cta:hover {
    transform: translate3d(0, -0.16rem, 0) scale(1.03);
    background: var(--clay-deep);
    box-shadow:
      0 18px 34px -16px rgba(140, 79, 57, 0.6),
      0 2px 0 0 rgba(255, 255, 255, 0.08) inset;
  }
  #cell-1 .hero__cta:hover .hero__cta-arrow { transform: translateX(0.22em); }
  #cell-1 .hero__chip {
    transition:
      transform 360ms var(--ease-out),
      box-shadow 360ms var(--ease-out),
      border-color 360ms var(--ease-out);
  }
  #cell-1 .hero__chip:hover {
    transform: translate3d(0, -0.2rem, 0) scale(1.02);
    box-shadow: 0 16px 30px -20px rgba(51, 65, 58, 0.4);
    border-color: var(--clay-soft);
  }
}

/* warm clay focus glow on the CTA (aliveness contract: focus glow) */
#cell-1 .hero__cta { transition:
    transform 360ms var(--ease-out),
    background 300ms var(--ease-out),
    box-shadow 360ms var(--ease-out); }
#cell-1 .hero__cta:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px var(--marble-50),
    0 0 0 6px var(--clay),
    0 16px 32px -16px rgba(140, 79, 57, 0.55);
}

/* reduced-motion / solo: kill drift transforms, keep everything content-complete */
@media (prefers-reduced-motion: reduce) {
  #cell-1 .hero__photo { transform: scale(1.02); will-change: auto; }
}
.is-solo #cell-1 .hero__photo,
.is-reduced-motion #cell-1 .hero__photo { transform: scale(1.02); will-change: auto; }