/* ============================================================
   CELL 2 · THE VENUE (dense) — LIKAZOO Wedding Barn
   Scoped entirely under #cell-2. Tokens only (documented paper/scrim tints
   are derived from the brand family; no stray hex).
   Authority: G4 cell-2 composition · truth copy from SITE_READ.
   Radius 16px · base #F5EFE5 family (mount data-bg="cream") · alive at t0.
   Care-lines honored: C3 (no representational SVG icons — brass-hairline CSS
   marks only) · C9 (no mid-page wordmark restamp) · C8 (sibling tiles share
   height + padding; document blocks read in-viewport) · aliveness contract
   (ambient drift, hover scale-not-shift, focus glow).
   ============================================================ */

#cell-2 {
  overflow: clip;   /* contain the ambient drift + tile hover scale */
  /* faint pressed-paper warmth over the cream base (data-bg="cream"): a light
     breath top-left, a whisper of clay warmth bottom-right — same family as the
     hero so the seam reads continuous (section color rhythm). */
  background:
    radial-gradient(120% 80% at 8% 4%, rgba(255, 255, 255, 0.5), transparent 58%),
    radial-gradient(130% 120% at 100% 108%, rgba(168, 97, 71, 0.05), transparent 55%),
    var(--cream);
}

#cell-2 .venue__inner {
  display: flex;
  flex-direction: column;
  gap: clamp(2.5rem, 1.6rem + 3.5vw, 5rem);
}

/* ═══════════════════ INTRO BAND ═══════════════════
   copy-left / venue photo-right + a floating vellum proof card. */
#cell-2 .venue__intro {
  display: grid;
  grid-template-columns: 1fr 1.06fr;
  align-items: center;
  gap: clamp(2rem, 1rem + 4vw, 5rem);
}

#cell-2 .venue__intro-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 34rem;
  min-width: 0;
}

#cell-2 .venue__eyebrow {
  color: var(--clay);
  font-weight: 600;
  margin-bottom: clamp(0.9rem, 0.5rem + 1.2vw, 1.4rem);
}

#cell-2 .venue__title {
  color: var(--meadow);
  /* Section serif — the ONE "section" size bucket, tuned to seat the intro band
     in a calm rhythm above the dense grid below (Text-Style System). */
  font-size: clamp(2.3rem, 1.5rem + 2.6vw, 3.6rem);
  line-height: 1.06;
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin-bottom: clamp(1rem, 0.6rem + 1.2vw, 1.5rem);
}
#cell-2 .venue__title .em { color: var(--clay); font-style: italic; }
#cell-2 .venue__title-line { display: inline; }

/* antique-brass hairline divider (CSS-drawn — C3, no illustrated icon) */
#cell-2 .venue__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-2 .venue__lede {
  color: var(--text-on-paper);
  font-size: var(--step-1);
  line-height: 1.6;
  max-width: 33rem;
}

/* ── intro media (distinct from the hero barn angle) ── */
#cell-2 .venue__intro-media {
  position: relative;
  margin: 0;
  min-width: 0;
}
#cell-2 .venue__intro-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  max-height: min(56vh, 30rem);
  border-radius: var(--radius);
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    0 28px 60px -34px rgba(51, 65, 58, 0.42),
    0 3px 10px -6px rgba(51, 65, 58, 0.26);
}
#cell-2 .venue__intro-photo {
  position: absolute;   /* fill the aspect box (code-review gotcha) */
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 54%;
  filter: saturate(1.04) contrast(1.02);
  transform: scale(1.045);   /* headroom for ambient drift */
  will-change: transform;
}
/* ambient warm light sweep at rest (t0 alive) — driven subtly in cell-2.js */
#cell-2 .venue__intro-drift {
  position: absolute;
  inset: -12%;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(
    46% 42% at 26% 22%,
    rgba(255, 243, 222, 0.32),
    rgba(255, 238, 212, 0.08) 44%,
    transparent 72%
  );
  mix-blend-mode: screen;
  opacity: 0.9;
}
#cell-2 .venue__intro-scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(200deg, transparent 46%, rgba(51, 65, 58, 0.08) 82%, rgba(51, 65, 58, 0.22) 100%);
}

/* ── floating vellum proof card (text-only — C6) ── */
#cell-2 .venue__proof {
  position: absolute;
  z-index: 3;
  right: clamp(-0.5rem, -1rem + 1vw, 1.25rem);
  bottom: clamp(-1.25rem, -2rem + 1vw, -1.75rem);
  width: min(17rem, 62%);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: clamp(1.1rem, 0.8rem + 0.9vw, 1.5rem);
  background: rgba(251, 247, 241, 0.94);
  -webkit-backdrop-filter: blur(8px) saturate(1.05);
  backdrop-filter: blur(8px) saturate(1.05);
  border: 1px solid var(--stone-200);
  border-radius: var(--radius);
  box-shadow: 0 22px 46px -26px rgba(51, 65, 58, 0.5);
}
/* brass-hairline crest mark (CSS-drawn — a small stacked rule, no SVG) */
#cell-2 .venue__proof-mark {
  width: 1.6rem;
  height: 0.75rem;
  position: relative;
}
#cell-2 .venue__proof-mark::before,
#cell-2 .venue__proof-mark::after {
  content: "";
  position: absolute;
  left: 0;
  height: 1.5px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--clay) 0%, var(--clay-soft) 100%);
}
#cell-2 .venue__proof-mark::before { top: 0; width: 1.6rem; }
#cell-2 .venue__proof-mark::after  { bottom: 0; width: 0.95rem; opacity: 0.7; }
#cell-2 .venue__proof-label {
  font-family: var(--font-display);
  font-size: var(--step-mini);
  line-height: 1.14;
  color: var(--meadow);
}
#cell-2 .venue__proof-note {
  font-size: var(--step--1);
  line-height: 1.5;
  /* Warm deep paper-ink, NOT --text-on-paper-muted (--stone-500): that muted
     warm-gray measured 3.28:1 on this vellum (fails WCAG AA for small body).
     --stone-700 is the token's genuine body-on-paper value and clears AA at
     ~7:1 while keeping the note a warm whisper, not a heading. (A11y verify.) */
  color: var(--stone-700);
}

/* ═══════════════════ "SPACES THAT SET THE SCENE" LABEL ═══════════════════ */
#cell-2 .venue__label {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 0.5rem + 2vw, 2rem);
}
#cell-2 .venue__label-rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(168, 97, 71, 0.34), transparent);
}
#cell-2 .venue__label-text {
  flex: none;
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--meadow);
  white-space: nowrap;
}

/* ═══════════════════ 4-TILE SPACES GRID ═══════════════════
   Sibling parity (C8 / T2.2): equal-height tiles, uniform padding, a reserved
   two-line note box so a short blurb holds the same height as a wrapping one. */
#cell-2 .venue__spaces {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 0.5rem + 1.6vw, 1.75rem);
  align-items: stretch;
}
#cell-2 .venue-tile {
  display: flex;
  flex-direction: column;
  background: var(--paper-100);
  border: 1px solid var(--stone-200);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 10px 26px -20px rgba(51, 65, 58, 0.36);
}
#cell-2 .venue-tile__frame {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  isolation: isolate;
}
#cell-2 .venue-tile__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 52%;
  filter: saturate(1.03) contrast(1.01);
  transform: scale(1.001);   /* seam-free base; hover grows via .is-scale below */
  transition: transform 640ms var(--ease-out);
}
#cell-2 .venue-tile__body {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: clamp(1rem, 0.7rem + 0.9vw, 1.4rem) clamp(1rem, 0.7rem + 0.9vw, 1.35rem)
           clamp(1.15rem, 0.8rem + 1vw, 1.5rem);
}
/* brass-hairline tile mark (CSS-drawn — C3: replaces the mockup's SVG glyphs) */
#cell-2 .venue-tile__mark {
  width: 1.35rem;
  height: 1px;
  margin-bottom: 0.55rem;
  background: linear-gradient(90deg, var(--clay), var(--clay-soft));
  border-radius: 2px;
}
#cell-2 .venue-tile__title {
  font-family: var(--font-display);
  font-size: var(--step-mini);
  line-height: 1.16;
  color: var(--meadow);
}
#cell-2 .venue-tile__note {
  font-size: var(--step--1);
  line-height: 1.46;
  /* --stone-700 (deep warm paper-ink), NOT --text-on-paper-muted (--stone-500):
     the muted warm-gray fails WCAG AA on paper-100 (3.71:1) for this caption
     size; --stone-700 clears AA (~7.9:1) and holds the warm register. */
  color: var(--stone-700);
  /* reserve a uniform 2-line box so tiles stay level regardless of blurb length */
  min-height: 2.92em;
}

/* ═══════════════════ 3-MODULE BAND ═══════════════════
   lodging / weekend-ease / coordination — secondary CTAs anchor to cells 5/3/6.
   Sibling parity: equal columns, media on top, CTA pinned to the card foot. */
#cell-2 .venue__modules {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 0.5rem + 1.6vw, 1.75rem);
  align-items: stretch;
}
#cell-2 .venue-mod {
  display: flex;
  flex-direction: column;
  background: var(--paper-0);
  border: 1px solid var(--stone-200);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 12px 30px -22px rgba(51, 65, 58, 0.4);
}
#cell-2 .venue-mod__media {
  position: relative;
  margin: 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  isolation: isolate;
}
#cell-2 .venue-mod__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  filter: saturate(1.03) contrast(1.01);
  transform: scale(1.001);
  transition: transform 640ms var(--ease-out);
}
#cell-2 .venue-mod__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  flex: 1;   /* stretch so the CTA foot aligns across all three modules */
  padding: clamp(1.15rem, 0.8rem + 1vw, 1.6rem) clamp(1.15rem, 0.8rem + 1vw, 1.55rem)
           clamp(1.25rem, 0.9rem + 1vw, 1.7rem);
}
#cell-2 .venue-mod__mark {
  width: 1.6rem;
  height: 1px;
  margin-bottom: 0.35rem;
  background: linear-gradient(90deg, var(--clay), var(--clay-soft));
  border-radius: 2px;
}
#cell-2 .venue-mod__title {
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.14;
  color: var(--meadow);
}
#cell-2 .venue-mod__note {
  font-size: var(--step-0);
  line-height: 1.56;
  color: var(--text-on-paper);
  /* keep the three notes level so the CTA row aligns without a staircase */
  min-height: 4.7em;
}
#cell-2 .venue-mod__cta {
  margin-top: auto;   /* pin CTA to the card foot → aligned across siblings */
  font-size: var(--step-0);
}

/* ═══════════════════ SOFT CTA BAND → cell-7 ═══════════════════ */
#cell-2 .venue__cta-band {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 0.5rem + 2vw, 2.5rem);
  flex-wrap: wrap;
  padding: clamp(1.4rem, 1rem + 1.6vw, 2.1rem) clamp(1.4rem, 1rem + 2vw, 2.6rem);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)),
    var(--marble-50);
  border: 1px solid var(--stone-200);
  border-radius: var(--radius);
  box-shadow: 0 14px 34px -26px rgba(51, 65, 58, 0.38);
}
#cell-2 .venue__cta-mark {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  position: relative;
}
/* small brass-hairline leaf/sprig mark, drawn from two rules (no SVG) */
#cell-2 .venue__cta-mark::before,
#cell-2 .venue__cta-mark::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 1px;
  background: linear-gradient(180deg, var(--clay-soft), var(--clay));
}
#cell-2 .venue__cta-mark::before { top: 0; height: 1.5rem; transform: translateX(-50%); }
#cell-2 .venue__cta-mark::after {
  top: 0.25rem;
  height: 0.75rem;
  transform-origin: top center;
  transform: translateX(-50%) rotate(38deg);
  box-shadow: -0.42rem 0.32rem 0 -0.02rem var(--clay-soft);
}
#cell-2 .venue__cta-line {
  flex: 1 1 18rem;
  min-width: 0;
  font-size: var(--step-2);
  line-height: 1.14;
  color: var(--meadow);
  text-wrap: balance;
}
#cell-2 .venue__cta-sub {
  flex: 1 1 14rem;
  min-width: 0;
  font-size: var(--step--1);
  line-height: 1.5;
  /* --stone-700 for AA (the muted stone-500 fails 4.5:1 on the marble band) */
  color: var(--stone-700);
}
#cell-2 .venue__cta-btn { flex: none; }
#cell-2 .venue__cta-arrow { transition: transform 320ms var(--ease-out); }

/* ═══════════════════ MOTION (scoped) ═══════════════════
   Hover = scale-not-shift, gated to real hover pointers; states resolve on touch.
   motion.css owns .btn timing globally; every bespoke cell-2 surface gets its
   own transition here so the aliveness contract is met without touching shared
   files. (motion.js's initSectionReveals targets Sharp classes not present in
   this cell, so reveals ride the shared [data-reveal] primitive in main.js.) */
@media (hover: hover) {
  #cell-2 .venue-tile,
  #cell-2 .venue-mod {
    transition:
      transform 380ms var(--ease-out),
      box-shadow 380ms var(--ease-out),
      border-color 380ms var(--ease-out);
  }
  #cell-2 .venue-tile:hover {
    transform: translate3d(0, -0.28rem, 0) scale(1.025);
    box-shadow: 0 20px 38px -22px rgba(51, 65, 58, 0.44);
    border-color: var(--clay-soft);
  }
  #cell-2 .venue-tile:hover .venue-tile__photo { transform: scale(1.05); }

  #cell-2 .venue-mod:hover {
    transform: translate3d(0, -0.28rem, 0) scale(1.02);
    box-shadow: 0 24px 44px -24px rgba(51, 65, 58, 0.46);
    border-color: var(--clay-soft);
  }
  #cell-2 .venue-mod:hover .venue-mod__photo { transform: scale(1.045); }

  #cell-2 .venue__proof { transition: transform 420ms var(--ease-out), box-shadow 420ms var(--ease-out); }
  #cell-2 .venue__proof:hover { transform: translate3d(0, -0.18rem, 0) scale(1.015); }

  #cell-2 .venue__cta-btn:hover .venue__cta-arrow { transform: translateX(0.24em); }
}

/* Focus-visible: brass keyline on the module link CTAs (aliveness: focus glow). */
#cell-2 .venue-mod__cta:focus-visible {
  outline: none;
  border-radius: 6px;
  box-shadow: 0 0 0 2px var(--cream), 0 0 0 4px var(--clay);
}

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

/* Tablet / narrow desktop: spaces → 2×2, modules stay 3-up but tighter. */
@media (max-width: 1080px) {
  #cell-2 .venue__intro { grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 0.5rem + 3vw, 3rem); }
  #cell-2 .venue__spaces { grid-template-columns: repeat(2, 1fr); }
  #cell-2 .venue-tile__note { min-height: 0; }   /* release the 2-line reserve when 2-up re-flows */
}

/* Small tablet: modules stack to a single ranked column (DESIGN.md mobile plan:
   barn spaces first, then stay, then coordination). */
@media (max-width: 900px) {
  #cell-2 .venue__modules { grid-template-columns: 1fr; }
  #cell-2 .venue-mod { flex-direction: row; }
  #cell-2 .venue-mod__media { flex: 0 0 40%; aspect-ratio: auto; align-self: stretch; }
  #cell-2 .venue-mod__note { min-height: 0; }
}

/* Mobile: everything to one clean stack (mobile recomposition plan). */
@media (max-width: 760px) {
  #cell-2 .venue__intro { grid-template-columns: 1fr; gap: clamp(1.5rem, 1rem + 3vw, 2.25rem); }
  #cell-2 .venue__intro-copy { max-width: none; }
  /* Mobile headline: size so the longest line ("A place for your people to stay")
     wraps cleanly INSIDE the content width — the em word is inline and won't hard-
     break, so the whole title must fit. Kills the horizontal overflow at 390px. */
  #cell-2 .venue__title { font-size: clamp(1.85rem, 6.6vw, 2.5rem); line-height: 1.1; }
  #cell-2 .venue__title-line { display: inline; }
  #cell-2 .venue__lede { font-size: var(--step-0); max-width: none; }
  #cell-2 .venue__intro-frame { aspect-ratio: 3 / 2; max-height: 46vh; }
  /* proof card drops to normal flow under the photo (no negative overlap on mobile) */
  #cell-2 .venue__proof {
    position: static;
    width: 100%;
    margin-top: 1rem;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: var(--paper-100);
  }
  #cell-2 .venue__proof-br { display: none; }   /* one-line label on mobile (the space after the comma stays) */

  #cell-2 .venue__spaces { grid-template-columns: repeat(2, 1fr); }
  #cell-2 .venue-tile__note { min-height: 0; }

  #cell-2 .venue-mod { flex-direction: column; }
  #cell-2 .venue-mod__media { flex: none; aspect-ratio: 16 / 10; }

  #cell-2 .venue__cta-band { flex-direction: column; align-items: flex-start; text-align: left; }
  #cell-2 .venue__cta-btn { width: 100%; justify-content: center; }
  /* Column direction makes flex-basis a HEIGHT — the 18rem/14rem bases became
     forced-tall boxes (dead vertical gap). Size to content instead. */
  #cell-2 .venue__cta-line,
  #cell-2 .venue__cta-sub { flex: 0 0 auto; }
}

@media (max-width: 460px) {
  #cell-2 .venue__spaces { grid-template-columns: 1fr; }
  #cell-2 .venue__label-text { white-space: normal; text-align: center; }
}

/* reduced-motion / solo: freeze drift transforms, keep everything content-complete */
@media (prefers-reduced-motion: reduce) {
  #cell-2 .venue__intro-photo { transform: scale(1.02); will-change: auto; }
  #cell-2 .venue-tile__photo,
  #cell-2 .venue-mod__photo { transition: none; }
}
.is-solo #cell-2 .venue__intro-photo,
.is-reduced-motion #cell-2 .venue__intro-photo { transform: scale(1.02); will-change: auto; }