/* ============================================================
   CELL 5 · STAY + ANIMALS — LIKAZOO Wedding Barn
   Scoped entirely under #cell-5. Tokens only (documented paper/scrim
   tints derived from the brand family; RGB sampled to tokens).
   Authority: G4 cell-5 composition + G3 safety-line graft.

   THE RANKING (care-line C4 / T2.1): LODGING is the PRIMARY column —
   wider grid track, larger media, heavier shadow, a 4-tile row + a
   full-width "true weekend" band. ANIMALS is the SECONDARY column —
   narrower, smaller portraits, lighter surface, no band. The visual
   weight difference is deliberate and readable at a glance.

   Material motif: the ribbon-tab (CSS-drawn folded ribbon, meadow on
   lodging / clay on animals). NO representational SVG icons (C3).
   Radius 16px · base #F5EFE5 · alive at t0 (reveal = load-in settle).
   ============================================================ */

/* Cell-5 sits on data-bg="cream" (secondary warm paper). Give it a faint
   pressed-paper warmth so it breathes without a global dark wash (C1). */
#cell-5 {
  overflow: clip;
  background:
    radial-gradient(120% 80% at 8% 0%, rgba(255, 255, 255, 0.5), transparent 55%),
    radial-gradient(130% 110% at 100% 100%, rgba(168, 97, 71, 0.045), transparent 55%),
    var(--cream);
}

/* ═══════════════════ SECTION HEADER ═══════════════════ */
#cell-5 .stay__head { margin-bottom: clamp(2.25rem, 1.5rem + 3vw, 4rem); }
#cell-5 .stay__eyebrow { color: var(--clay); margin-bottom: var(--space-s); }
#cell-5 .stay__title {
  color: var(--meadow);
  font-size: var(--step-section);
  line-height: 1.06;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
#cell-5 .stay__title .em { color: var(--clay); font-style: italic; }
#cell-5 .stay__lede {
  margin: var(--space-s) auto 0;
  max-width: 60ch;
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--text-on-paper);
  opacity: 0.9;
}
/* antique-brass hairline under the header (CSS-drawn, no leaf icon) */
#cell-5 .stay__head-rule {
  display: block;
  width: clamp(3rem, 2rem + 4vw, 5rem);
  height: 1px;
  margin: clamp(1.1rem, 0.7rem + 1.2vw, 1.6rem) auto 0;
  background: linear-gradient(90deg,
    transparent 0%, var(--clay-soft) 22%, var(--clay-soft) 78%, transparent 100%);
}

/* ═══════════════════ THE TWO-PANEL GRID ═══════════════════
   Lodging track is materially WIDER than animals (1.62 : 1). This is the
   primary lever for "lodging visibly larger, animals visibly secondary". */
#cell-5 .stay__panels {
  display: grid;
  grid-template-columns: 1.62fr 1fr;
  gap: clamp(1.25rem, 0.75rem + 2vw, 2.25rem);
  align-items: start;
}

/* ═══════════════════ SHARED PANEL SHELL ═══════════════════ */
#cell-5 .stay-panel {
  position: relative;
  border-radius: var(--radius);
  padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  padding-top: clamp(1.9rem, 1.3rem + 2.2vw, 3rem);   /* room for the ribbon tab */
}

/* PRIMARY (lodging): brighter paper card + a stronger, warmer shadow so it
   reads as the anchored, heavier element. */
#cell-5 .stay-panel--lodging {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0)) ,
    var(--paper-100);
  border: 1px solid var(--stone-200);
  box-shadow:
    0 34px 70px -40px rgba(51, 65, 58, 0.4),
    0 6px 16px -12px rgba(51, 65, 58, 0.22);
}

/* SECONDARY (animals): a lighter, quieter surface + a softer shadow +
   a hairline-only border. Deliberately less present than lodging. */
#cell-5 .stay-panel--animals {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)),
    var(--marble-100);
  border: 1px solid var(--hairline-dark);
  box-shadow: 0 18px 44px -34px rgba(51, 65, 58, 0.3);
}

/* ── The ribbon-tab motif (CSS-drawn folded ribbon, top-left) ── */
#cell-5 .ribbon-tab {
  position: absolute;
  top: calc(-1 * clamp(0.4rem, 0.2rem + 0.5vw, 0.7rem));
  left: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  width: clamp(1.6rem, 1.3rem + 0.8vw, 2.1rem);
  height: clamp(2.5rem, 2rem + 1.4vw, 3.4rem);
  /* the folded-ribbon silhouette: a rectangle notched at the bottom */
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%);
  box-shadow: 0 6px 14px -8px rgba(51, 65, 58, 0.5);
}
/* a subtle inner sheen so the ribbon reads as folded fabric, not a flat block */
#cell-5 .ribbon-tab::after {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: inherit;
  background: linear-gradient(115deg,
    rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 42%,
    rgba(0, 0, 0, 0.10) 100%);
}
#cell-5 .ribbon-tab--meadow { background: var(--meadow); }        /* lodging */
#cell-5 .ribbon-tab--clay   { background: var(--clay); }          /* animals */

/* ── Panel heads ── */
#cell-5 .stay-panel__kicker {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  /* clay-DEEP, not base clay: this is a small uppercase label (body-class for
     WCAG). Base clay #A86147 measured 3.79:1 on marble-100 (fails AA); clay-deep
     #8C4F39 clears at 5.14:1 while staying unmistakably clay. (A11y verify.) */
  color: var(--clay-deep);
  margin-bottom: var(--space-xs);
}
#cell-5 .stay-panel--lodging .stay-panel__kicker { color: var(--meadow); }
#cell-5 .stay-panel__title {
  color: var(--meadow);
  line-height: 1.05;
  letter-spacing: -0.008em;
}
/* PRIMARY headline is materially larger than the secondary headline. */
#cell-5 .stay-panel--lodging .stay-panel__title {
  font-size: clamp(1.85rem, 1.3rem + 1.8vw, 2.85rem);
}
#cell-5 .stay-panel--animals .stay-panel__title {
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2.05rem);
}
#cell-5 .stay-panel__intro {
  margin-top: var(--space-s);
  max-width: 46ch;
  font-size: var(--step-0);
  line-height: 1.58;
  color: var(--text-on-paper);
  opacity: 0.92;
}
#cell-5 .stay-panel--animals .stay-panel__intro { font-size: var(--step--1); }

/* ═══════════════════ LODGING SUB-TILES (4-up) ═══════════════════ */
#cell-5 .stay-tiles {
  list-style: none;
  margin: clamp(1.4rem, 1rem + 1.4vw, 2rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.85rem, 0.5rem + 1vw, 1.35rem);
}
#cell-5 .stay-tile {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
#cell-5 .stay-tile__media {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: var(--marble-100);
  box-shadow: 0 14px 30px -22px rgba(51, 65, 58, 0.4);
  isolation: isolate;
}
#cell-5 .stay-tile__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* bright-to-golden treatment (DESIGN.md photography law) */
  filter: saturate(1.03) contrast(1.01) brightness(1.02);
  transform: scale(1.04);        /* headroom for the ambient drift */
  will-change: transform;
}
/* hold the subject centre-frame per tile (per-image, sampled) */
#cell-5 .stay-tiles li:nth-child(1) .stay-tile__img { object-position: 50% 62%; }  /* farmhouse under porch line */
#cell-5 .stay-tiles li:nth-child(2) .stay-tile__img { object-position: 42% 40%; }  /* dress + family */
#cell-5 .stay-tiles li:nth-child(3) .stay-tile__img { object-position: 62% 50%; }  /* dining table */
#cell-5 .stay-tiles li:nth-child(4) .stay-tile__img { object-position: 50% 58%; }  /* barn face */

#cell-5 .stay-tile__body { padding-top: clamp(0.6rem, 0.4rem + 0.5vw, 0.85rem); }
#cell-5 .stay-tile__rule {
  display: block;
  width: 1.6rem;
  height: 1px;
  margin-bottom: 0.55rem;
  background: var(--clay-soft);
  opacity: 0.85;
}
#cell-5 .stay-tile__label {
  font-family: var(--font-display);   /* Mini-Serif A card title */
  font-size: var(--step-mini);
  line-height: 1.12;
  color: var(--meadow);
  margin-bottom: 0.3rem;
}
#cell-5 .stay-tile__note {
  font-size: var(--step--1);
  line-height: 1.46;
  /* stone-700 warm ink, NOT --text-on-paper-muted (=stone-500 #8B7E6D, which
     measured 3.71:1 on paper-100 and fails body AA). stone-700 clears 7.93:1
     and still reads a step quieter than the meadow label. (A11y verify.) */
  color: var(--stone-700);
  /* sibling parity (C8/T2.5): reserve a uniform 3-line note box so the four
     tiles keep equal height regardless of copy length — no staircase. */
  min-height: 4.4em;
}

/* ═══════════════════ LODGING "TRUE WEEKEND" BAND ═══════════════════ */
#cell-5 .stay-band {
  margin-top: clamp(1.25rem, 0.85rem + 1.2vw, 1.85rem);
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  align-items: stretch;
  gap: clamp(1rem, 0.6rem + 1.2vw, 1.6rem);
  padding: clamp(0.85rem, 0.5rem + 0.9vw, 1.1rem);
  border-radius: var(--radius);
  background: var(--marble-100);
  border: 1px solid var(--hairline-dark);
}
#cell-5 .stay-band__media {
  margin: 0;
  border-radius: calc(var(--radius) - 4px);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  isolation: isolate;
  box-shadow: 0 14px 30px -24px rgba(51, 65, 58, 0.4);
}
#cell-5 .stay-band__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 62%;      /* hold the barn on the horizon, trim sky */
  filter: saturate(1.03) brightness(1.02);
  transform: scale(1.04);
  will-change: transform;
}
#cell-5 .stay-band__body {
  align-self: center;
  padding-right: clamp(0.25rem, 0.1rem + 0.4vw, 0.75rem);
}
#cell-5 .stay-band__rule {
  display: block;
  width: 2rem;
  height: 1px;
  margin-bottom: 0.65rem;
  background: var(--clay-soft);
}
#cell-5 .stay-band__label {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1rem + 0.5vw, 1.5rem);
  line-height: 1.15;
  color: var(--meadow);
  margin-bottom: 0.45rem;
}
#cell-5 .stay-band__note {
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--text-on-paper);
  opacity: 0.9;
  margin-bottom: 0.55rem;
}
#cell-5 .stay-band__accent {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--step-0);
  line-height: 1.3;
  /* clay-deep (5.14:1 on marble-100) — base clay is 3.79:1 and this is real
     copy, not a large-text exemption at step-0. (A11y verify.) */
  color: var(--clay-deep);
}

/* ═══════════════════ ANIMAL PORTRAITS (3-up, secondary) ═══════════════════ */
#cell-5 .stay-animals {
  list-style: none;
  margin: clamp(1.3rem, 1rem + 1.2vw, 1.85rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.6rem, 0.4rem + 0.7vw, 0.95rem);
}
#cell-5 .stay-animal {
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: var(--marble-100);
  box-shadow: 0 12px 26px -22px rgba(51, 65, 58, 0.36);
  isolation: isolate;
}
#cell-5 .stay-animal__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.03) contrast(1.01) brightness(1.01);
  transform: scale(1.04);
  will-change: transform;
}
/* hold each animal's face (per-image, sampled from the real assets) */
#cell-5 .stay-animals li:nth-child(1) .stay-animal__img { object-position: 46% 50%; }  /* bride + horse */
#cell-5 .stay-animals li:nth-child(2) .stay-animal__img { object-position: 50% 34%; }  /* couple + goats */
#cell-5 .stay-animals li:nth-child(3) .stay-animal__img { object-position: 30% 60%; }  /* zebras in pen */

#cell-5 .stay-animals__caption {
  margin-top: clamp(0.85rem, 0.6rem + 0.6vw, 1.1rem);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--step-0);
  line-height: 1.4;
  /* clay-deep (5.14:1 on marble-100) — AA-safe for this italic body caption. */
  color: var(--clay-deep);
  max-width: 42ch;
}

/* ── THE SAFETY LINE (graft G3) — a warm vellum note, clay hairline ── */
#cell-5 .stay-safety {
  margin-top: clamp(1rem, 0.7rem + 0.8vw, 1.4rem);
  padding: clamp(0.9rem, 0.6rem + 0.8vw, 1.25rem) clamp(1rem, 0.7rem + 0.9vw, 1.35rem);
  border-radius: var(--radius);
  background: var(--clay-tint);           /* translucent clay wash (token) */
  border: 1px solid rgba(168, 97, 71, 0.22);
}
#cell-5 .stay-safety__rule {
  display: block;
  width: 1.8rem;
  height: 1px;
  margin-bottom: 0.55rem;
  background: var(--clay);
  opacity: 0.7;
}
#cell-5 .stay-safety__label {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  /* stone-700 (5.95:1 on the clay-tint wash). clay-deep sat exactly on the 4.5
     line (4.49) — this warm dark ink clears it cleanly. (A11y verify.) */
  color: var(--stone-700);
  margin-bottom: 0.4rem;
}
#cell-5 .stay-safety__note {
  font-size: var(--step--1);
  line-height: 1.55;
  /* clay-deep is dark enough to clear AA on the pale clay-tint wash */
  color: var(--stone-700);
}

/* ═══════════════════ MOTION (scoped) ═══════════════════
   Hover = scale-not-shift, gated to real hover pointers; resolves on touch.
   Ambient photo drift is finished in js/cells/cell-5.js. */
#cell-5 .stay-tile,
#cell-5 .stay-animal,
#cell-5 .stay-band {
  transition:
    transform 380ms var(--ease-out),
    box-shadow 380ms var(--ease-out),
    border-color 380ms var(--ease-out);
}
@media (hover: hover) {
  #cell-5 .stay-tile:hover {
    transform: translate3d(0, -0.28rem, 0) scale(1.025);
  }
  #cell-5 .stay-tile:hover .stay-tile__media {
    box-shadow: 0 22px 40px -26px rgba(51, 65, 58, 0.48);
  }
  /* animals lift a touch LESS than lodging tiles — reinforces the secondary read */
  #cell-5 .stay-animal:hover {
    transform: translate3d(0, -0.18rem, 0) scale(1.02);
    box-shadow: 0 18px 34px -24px rgba(51, 65, 58, 0.42);
  }
  #cell-5 .stay-band:hover {
    transform: translate3d(0, -0.16rem, 0) scale(1.008);
    box-shadow: 0 22px 46px -30px rgba(51, 65, 58, 0.4);
    border-color: var(--stone-200);
  }
}

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

/* Narrow desktop / tablet: keep the lodging-primary asymmetry a touch softer,
   drop the lodging tiles to a 2×2 so each stays legible. */
@media (max-width: 1080px) {
  #cell-5 .stay__panels { grid-template-columns: 1.5fr 1fr; }
  #cell-5 .stay-tiles { grid-template-columns: repeat(2, 1fr); }
  #cell-5 .stay-tile__note { min-height: 0; }   /* 2-col row: no staircase risk */
}

/* Stack point: below ~880px the two panels stack — LODGING ALWAYS FIRST
   (source order guarantees it; C4 lodging-first survives on mobile). */
@media (max-width: 880px) {
  #cell-5 .stay__panels {
    grid-template-columns: 1fr;
    gap: clamp(1.5rem, 1rem + 2vw, 2.25rem);
  }
  #cell-5 .stay-band { grid-template-columns: 1fr; }
  #cell-5 .stay-band__media { aspect-ratio: 16 / 9; }
  #cell-5 .stay-band__body { padding-right: 0; }
}

/* Phones: lodging tiles 2-up stay; animals 3-up compress cleanly. */
@media (max-width: 560px) {
  #cell-5 .stay-tiles { grid-template-columns: repeat(2, 1fr); gap: 0.85rem; }
  #cell-5 .stay-animals { gap: 0.5rem; }
  #cell-5 .stay-tile__media,
  #cell-5 .stay-animal { aspect-ratio: 4 / 5; }
}

@media (max-width: 400px) {
  #cell-5 .stay-tiles { grid-template-columns: 1fr; }
  #cell-5 .stay-tile__media { aspect-ratio: 16 / 10; }
  #cell-5 .stay-tile__note { min-height: 0; }
}

/* reduced-motion / solo: freeze the drift headroom, keep everything complete */
@media (prefers-reduced-motion: reduce) {
  #cell-5 .stay-tile__img,
  #cell-5 .stay-animal__img,
  #cell-5 .stay-band__img { transform: scale(1.02); will-change: auto; }
}
.is-solo #cell-5 .stay-tile__img,
.is-solo #cell-5 .stay-animal__img,
.is-solo #cell-5 .stay-band__img,
.is-reduced-motion #cell-5 .stay-tile__img,
.is-reduced-motion #cell-5 .stay-animal__img,
.is-reduced-motion #cell-5 .stay-band__img { transform: scale(1.02); will-change: auto; }