/* ============================================================
   CELL 7 · Order Ahead or Come Sit Down (CLOSE) — scoped #cell-7.
   The plainspoken close: SPARSE-RELIEF density — a return to open
   morning light before the footer. Signature head (ink roman /
   marigold italic), ONE marigold ORDER AHEAD button, a teal
   "Your morning is waiting" badge, a warm coffee+food pair, and a
   torn order-slip foot band (Stop In · Grab Gift Cards). Verified
   hours/address/phone are the practical close (C1). Light-dominant,
   alive at t0. Ends FLUSH — no phantom gap before the footer.
   ============================================================ */

#cell-7 {
  position: relative;
  /* clip horizontally only (the warm sun-wash bleed) — NOT vertically, so the
     "Good food…" note + the plate's bottom overhang are never sheared. */
  overflow-x: clip;
  /* sparse-relief: generous vertical breath, but no extra bottom pad —
     the footer follows immediately, so the section ends flush. */
  padding-block: var(--section-pad-y);
}
/* a soft warm sun-wash — the ambient rest-glow (C4 morning light) */
#cell-7::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(120% 85% at 82% 6%, rgba(255, 240, 214, 0.7), transparent 56%),
    radial-gradient(80% 70% at 6% 96%, rgba(76, 181, 200, 0.05), transparent 62%);
}

#cell-7 .c7 {
  position: relative;
  z-index: 1;
  width: 100%;
  display: grid;
  gap: clamp(2rem, 1.4rem + 2.6vw, 3.5rem);
}

/* ---- body: two columns (invitation | warm pair) ---- */
#cell-7 .c7__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
  align-items: center;
  gap: clamp(2rem, 1.2rem + 3.5vw, 4rem);
}

/* LEFT column: the invitation */
#cell-7 .c7__left {
  display: grid;
  gap: var(--space-s);
  align-content: center;
}

/* eyebrow — TEAL (matches the mockup + clears AA: teal-deep on paper = 5.73:1;
   the shared .eyebrow marigold default is only 3.14:1 at this small bold size,
   so we override to teal-deep here — the mockup eyebrow is teal anyway). The
   small star pulses (aliveness). */
#cell-7 .c7__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.8em;
  font-size: clamp(0.8rem, 0.74rem + 0.2vw, 0.9rem);
  letter-spacing: 0.2em;
  color: var(--teal-deep);
}
#cell-7 .c7__eyebrow-star { font-size: 0.85em; color: var(--accent); }

/* the signature headline — line 1 ink roman, line 2 marigold italic */
#cell-7 .c7__headline {
  margin: 0.1rem 0 0;
  font-size: clamp(2.6rem, 1.7rem + 3.6vw, 4.4rem);
  line-height: 0.98;
  letter-spacing: -0.005em;
}
#cell-7 .c7__headline-1,
#cell-7 .c7__headline-2 { display: block; }
#cell-7 .c7__headline-1 { color: var(--ink); }
#cell-7 .c7__headline-2 .em { font-style: italic; color: var(--support); }

/* the star tear-rule under the head (mockup) — hairline · star · hairline */
#cell-7 .c7__rule {
  display: grid;
  grid-template-columns: minmax(1.2rem, 3.5rem) auto 1fr;
  align-items: center;
  gap: 0.75em;
  max-width: 26rem;
  margin: 0.35rem 0 0.15rem;
  color: var(--paper-line-strong);
}
#cell-7 .c7__rule-line {
  height: 0;
  border-top: 1px dashed var(--paper-line-strong);
}
#cell-7 .c7__rule-star { font-size: 0.85em; }

#cell-7 .c7__lede {
  max-width: 32ch;
  color: var(--ink-soft);
  font-size: clamp(1.02rem, 0.96rem + 0.4vw, 1.22rem);
  line-height: 1.5;
}

/* ---- primary action row: marigold ORDER AHEAD + teal badge ---- */
#cell-7 .c7__cta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.1rem 1.4rem;
  margin-top: 0.75rem;
}
/* the one strong marigold action — larger + tactile (reuses shared .btn AA-safe) */
#cell-7 .c7__order {
  min-height: 56px;
  padding: 0 1.9em;
  font-size: 0.98rem;
  letter-spacing: 0.1em;
  gap: 0.7em;
  box-shadow: 0 14px 30px rgba(201, 114, 59, 0.28);
}
#cell-7 .c7__order-icon { flex: 0 0 auto; }
#cell-7 .c7__order-arrow {
  flex: 0 0 auto;
  transition: transform var(--dur-fast) var(--ease-out);
}
@media (hover: hover) {
  #cell-7 .c7__order:hover .c7__order-arrow,
  #cell-7 .c7__order:focus-visible .c7__order-arrow {
    transform: translateX(4px);
  }
}

/* the teal circular "Your morning is waiting" badge — gently pulses.
   Deep-teal fill so cream text clears AA (cream on --teal-deep = 5.73:1;
   the light --accent fill would FAIL — kill-gate lesson). */
#cell-7 .c7__badge {
  flex: 0 0 auto;
  display: grid;
  place-content: center;
  gap: 0.06em;
  width: clamp(92px, 8vw, 112px);
  height: clamp(92px, 8vw, 112px);
  border-radius: 50%;
  /* deep-teal DOMINANT so the small cream text always clears AA over the fill
     (cream on --teal-deep = 5.73:1). A thin bright-accent sheen only rides the
     top-left edge for life — the text sits on the deep field, never the light
     edge (kill-gate badge/pill AA lesson). */
  background: radial-gradient(150% 150% at 26% 18%, var(--accent) 0%, var(--teal-deep) 38%);
  color: var(--paper-raised);
  text-align: center;
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  line-height: 1.08;
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 250, 241, 0.3),
    0 12px 26px rgba(31, 109, 121, 0.24);
}
#cell-7 .c7__badge-l1,
#cell-7 .c7__badge-l3 { font-size: 0.58rem; letter-spacing: 0.16em; }
#cell-7 .c7__badge-l2 { font-size: 0.66rem; letter-spacing: 0.1em; }
#cell-7 .c7__badge-star {
  margin-top: 0.2em;
  font-size: 0.68rem;
  color: #ffd7bb;                 /* warm marigold-cream star on teal */
}

/* ---- RIGHT column: the warm coffee + food pair ---- */
#cell-7 .c7__right { position: relative; }
#cell-7 .c7__scene {
  position: relative;
  border-radius: calc(var(--radius) + 6px);
  padding: 0;
  /* the scene is a proportioned box the two frames stack inside */
  aspect-ratio: 4 / 3.15;
}

/* dominant: the teal-mug latte, filling most of the scene */
#cell-7 .c7__coffee {
  position: absolute;
  inset: 0 0 0 0;
  width: 78%;
  height: 100%;
  border-radius: calc(var(--radius) + 4px);
  box-shadow: var(--shadow);
}
#cell-7 .c7__coffee > img {
  object-position: 50% 42%;
  filter: saturate(1.05) contrast(1.02) brightness(1.03);
}

/* secondary: the bright white-plate sampler, overlapping bottom-right.
   Smaller so the coffee reads as the hero of the pair; both are bright
   (no dark quadrant), keeping the morning soul (C4 / kill-gate lesson). */
#cell-7 .c7__plate {
  position: absolute;
  right: 0;
  bottom: -6%;
  width: 46%;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius);
  border: 3px solid var(--paper-raised);
  box-shadow: 0 18px 40px rgba(86, 63, 43, 0.2);
}
#cell-7 .c7__plate > img {
  object-position: 52% 60%;
  filter: saturate(1.05) contrast(1.02) brightness(1.02);
}

/* "Good food. Good coffee. Good company." ticket note — a CSS card,
   NOT a photo, NOT a claim. Seated on the scene's TOP-RIGHT corner over
   the calm blurred window area, overhanging slightly outside the frame,
   never over the plated food (T2.8 / T2.18). */
#cell-7 .c7__note {
  position: absolute;
  top: clamp(-0.9rem, -2vw, -1.5rem);
  /* overhang UP only; pulled further IN from the right + a gentler rotation so
     the rotated corner never crosses the section boundary (audit: the note
     clipped at the section's right edge on desktop — T2.18/T2.26). */
  right: clamp(1rem, 2.4vw, 2.1rem);
  z-index: 4;
  width: clamp(8rem, 6.5rem + 3.8vw, 10.5rem);
  padding: 0.78rem 0.95rem 0.7rem;
  text-align: center;
  transform: rotate(2deg);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.5), transparent 45%),
    var(--paper-raised);
  box-shadow: 0 14px 30px rgba(86, 63, 43, 0.18);
}
#cell-7 .c7__note-lines {
  display: grid;
  gap: 0.14em;
  font-family: var(--font-body);
  font-weight: 700;
  /* sized so the longest line "GOOD COMPANY." clears the card's right padding
     with margin (audit: it kissed the edge) */
  font-size: clamp(0.72rem, 0.6rem + 0.35vw, 0.84rem);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--teal-deep);
}
#cell-7 .c7__note-star {
  display: block;
  margin-top: 0.32em;
  font-size: 0.82rem;
  color: var(--support);
}

/* ============================================================
   THE FOOT BAND — a REAL torn order-slip (the practical close).
   Varies the ticket motif for the close (C6): NOT the hero rail, NOT a
   flat bar. The paper strip is PUNCHED with real half-circle
   perforations on its top + bottom edges (radial-gradient mask), casts
   an edge-following drop-shadow, and splits into two panels around a
   central star tear-seam. Stop In (verified facts) | Grab Gift Cards.
   --perf: notch radius · --perf-gap: pitch between notches.
   ============================================================ */
#cell-7 .c7__band {
  --perf: 7px;
  --perf-gap: 22px;
  --band-paper: var(--paper-raised);
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 0;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.45), transparent 42%),
    var(--band-paper);
  border-radius: var(--radius);
  /* PUNCHED PERFORATION: bite half-circles out of the top + bottom edges */
  -webkit-mask:
    radial-gradient(var(--perf) at 50% 0, transparent 98%, #000) 50% 0 / var(--perf-gap) 100% repeat-x,
    radial-gradient(var(--perf) at 50% 100%, transparent 98%, #000) 50% 100% / var(--perf-gap) 100% repeat-x,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: source-in, source-in;
          mask:
    radial-gradient(var(--perf) at 50% 0, transparent 98%, #000) 50% 0 / var(--perf-gap) 100% repeat-x,
    radial-gradient(var(--perf) at 50% 100%, transparent 98%, #000) 50% 100% / var(--perf-gap) 100% repeat-x,
    linear-gradient(#000 0 0);
          mask-composite: intersect;
  filter: drop-shadow(0 14px 30px rgba(86, 63, 43, 0.12));
}
/* hairline ink stroke hugging the punched top + bottom edges (printed-slip read) */
#cell-7 .c7__band::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  border-radius: var(--radius);
  box-shadow:
    inset 0 1px 0 rgba(59, 46, 40, 0.1),
    inset 0 -1px 0 rgba(59, 46, 40, 0.1);
}

/* the two panels */
#cell-7 .c7-panel {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: clamp(1rem, 0.7rem + 1vw, 1.5rem) clamp(1.1rem, 0.6rem + 1.4vw, 2rem);
  min-width: 0;
  color: inherit;
}
#cell-7 .c7-panel--gift {
  border-radius: 0 var(--radius) var(--radius) 0;
  transition: background var(--dur-fast) var(--ease-out);
}
#cell-7 .c7-panel__icon { flex: 0 0 auto; display: inline-flex; }
#cell-7 .c7-panel__icon--teal { color: var(--teal-deep); }
#cell-7 .c7-panel__icon--clay { color: var(--support); }
#cell-7 .c7-panel__text { min-width: 0; }
#cell-7 .c7-panel__head {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--font-body);
  font-weight: 700;
  /* ≥19px bold so it qualifies as WCAG "large text" (≥3:1) — lets the marigold
     clay head clear contrast comfortably. */
  font-size: clamp(1.05rem, 0.92rem + 0.4vw, 1.2rem);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.1;
}
#cell-7 .c7-panel__head--teal { color: var(--teal-deep); }
/* support-deep (a95c2c) not the bright support: 4.75:1 on the raised paper —
   safe even as normal text, and reads as the mockup's marigold head. */
#cell-7 .c7-panel__head--clay { color: var(--support-deep); }
#cell-7 .c7-panel__go {
  flex: 0 0 auto;
  transition: transform var(--dur-fast) var(--ease-out);
}
@media (hover: hover) {
  #cell-7 .c7-panel--gift:hover .c7-panel__go { transform: translateX(3px); }
}
#cell-7 .c7-panel__line {
  margin-top: 0.28em;
  font-size: clamp(0.82rem, 0.78rem + 0.2vw, 0.94rem);
  line-height: 1.4;
  color: var(--ink-soft);
}
#cell-7 .c7-panel__line--hours { color: var(--ink); }
#cell-7 .c7-panel__day { font-weight: 700; color: var(--ink); }
/* today's band gets a soft marigold emphasis (state-driven UI, not a claim) */
#cell-7 .c7-panel__day.is-today { color: var(--support-deep); }
#cell-7 .c7-panel__sep { margin: 0 0.5em; color: var(--paper-line-strong); }
#cell-7 .c7-panel__tel {
  font-weight: 600;
  color: var(--teal-deep);
  transition: color var(--dur-fast) var(--ease-out);
}
#cell-7 .c7-panel__tel:hover { color: var(--accent); }

/* central star tear-seam — a dashed "tear here" column with a star at center */
#cell-7 .c7-band__seam {
  position: relative;
  flex: 0 0 auto;
  align-self: stretch;
  display: grid;
  place-items: center;
  width: 2.6rem;
  color: var(--accent);
}
#cell-7 .c7-band__seam::before,
#cell-7 .c7-band__seam::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 1.5px;
  transform: translateX(-50%);
  background-image: repeating-linear-gradient(
    rgba(59, 46, 40, 0.34) 0 5px, transparent 5px 10px);
  background-size: 1.5px 100%;
}
#cell-7 .c7-band__seam::before { top: 0.7rem; height: calc(50% - 1.4rem); }
#cell-7 .c7-band__seam::after { bottom: 0.7rem; height: calc(50% - 1.4rem); }
#cell-7 .c7-band__seam-star { position: relative; z-index: 1; font-size: 1.05rem; line-height: 1; }

/* ============================================================
   RESPONSIVE — mobile recomposition (DESIGN.md plan):
   keep the PRIMARY action + today-style hours visible before any
   supporting copy; the warm pair follows; the band stacks.
   ============================================================ */

/* tablet / narrow-desktop: tighten the two-column body */
@media (max-width: 1024px) {
  #cell-7 .c7__body { gap: clamp(1.75rem, 1rem + 2.5vw, 3rem); }
  #cell-7 .c7__note { width: clamp(7.5rem, 6rem + 4vw, 9.5rem); }
}

/* the band drops the central seam to a full-width tear when it stacks */
@media (max-width: 720px) {
  #cell-7 .c7__band { flex-wrap: wrap; }
  #cell-7 .c7-panel {
    flex: 1 1 100%;
    border-radius: 0;
  }
  #cell-7 .c7-panel--stopin { padding-bottom: 0.9rem; }
  #cell-7 .c7-panel--gift {
    border-radius: 0 0 var(--radius) var(--radius);
    padding-top: 0.9rem;
    border-top: 1px dashed var(--paper-line-strong);
  }
  #cell-7 .c7-band__seam {
    flex: 1 1 100%;
    align-self: auto;
    width: 100%;
    height: 1.8rem;
  }
  /* the seam becomes a HORIZONTAL dashed tear across the full width */
  #cell-7 .c7-band__seam::before,
  #cell-7 .c7-band__seam::after {
    top: 50%;
    bottom: auto;
    left: 0.9rem;
    right: auto;
    width: calc(50% - 2rem);
    height: 1.5px;
    transform: translateY(-50%);
    background-image: repeating-linear-gradient(90deg,
      rgba(59, 46, 40, 0.34) 0 5px, transparent 5px 10px);
    background-size: 100% 1.5px;
  }
  #cell-7 .c7-band__seam::before { left: 0.9rem; }
  #cell-7 .c7-band__seam::after { left: auto; right: 0.9rem; }
}

/* MOBILE — recompose: single column, action + hours FIRST, then the pair.
   (DESIGN.md: Cell 7 keeps the primary action and today-style hours visible
   before any supporting copy.) */
@media (max-width: 760px) {
  #cell-7 { padding-block: var(--space-xl) var(--space-l); }
  #cell-7 .c7 { gap: var(--space-l); }

  #cell-7 .c7__body {
    grid-template-columns: 1fr;
    gap: var(--space-l);
  }
  /* invitation first, warm pair second */
  #cell-7 .c7__left { order: 1; }
  #cell-7 .c7__right { order: 2; }

  /* smaller mobile head so line 2 "or Come Sit Down" holds ONE line at 390
     (was clamp(2.4rem,1.5rem+6vw,…) → 3-line wrap, BLOCKING T2.13). */
  #cell-7 .c7__headline { font-size: clamp(2rem, 1.15rem + 5vw, 3rem); }
  #cell-7 .c7__lede { max-width: 40ch; }

  /* CTA: full-width button, badge sits beside/below cleanly */
  #cell-7 .c7__cta { gap: 1rem 1.2rem; align-items: center; }
  #cell-7 .c7__order { flex: 1 1 auto; justify-content: center; }
  #cell-7 .c7__badge { width: 88px; height: 88px; }

  /* the warm pair keeps its overlap but reserves room for the plate's
     bottom overhang so nothing clips */
  #cell-7 .c7__scene { aspect-ratio: 4 / 3.4; margin-bottom: 1.6rem; }
  #cell-7 .c7__coffee { width: 82%; }
  #cell-7 .c7__plate { width: 44%; bottom: -8%; }
  /* the longest line ("GOOD COMPANY.") must fit inside the card at this
     narrower width — shrink the note type + tighten tracking so it never
     overflows its own right padding. */
  #cell-7 .c7__note {
    width: clamp(8.25rem, 40vw, 9.75rem);
    top: clamp(-0.6rem, -2.2vw, -1rem);
    right: 0.5rem;
    padding: 0.68rem 0.8rem 0.6rem;
  }
  #cell-7 .c7__note-lines {
    font-size: clamp(0.68rem, 0.6rem + 0.6vw, 0.8rem);
    letter-spacing: 0.06em;
  }
}

/* very small phones: keep the pair readable, band single-column already */
@media (max-width: 480px) {
  #cell-7 .c7__scene { aspect-ratio: 4 / 3.55; }
  #cell-7 .c7__badge { width: 80px; height: 80px; }
  #cell-7 .c7__badge-l1, #cell-7 .c7__badge-l3 { font-size: 0.54rem; }
  #cell-7 .c7__badge-l2 { font-size: 0.6rem; }
}

/* reduced-motion: badge/star stop pulsing (belt + suspenders w/ motion.css) */
@media (prefers-reduced-motion: reduce) {
  #cell-7 .amb-pulse { animation: none; }
  #cell-7 .c7__order-arrow,
  #cell-7 .c7-panel__go { transition: none; }
}