/* ============================================================
   CELL 6 · Menu, Hours & Gift Cards (UTILITY) — #cell-6
   data-bg=teal-wash (the ONE light teal utility regrip).
   The friction-removing hub: a pitch + hero utility strip, a deck
   of 4 action cards (View Menu / Order Ahead / Stop In / Gift Cards),
   and a warm close band. Buttons reuse the AA-fixed shared
   .btn / .btn--teal — NEVER re-colored here. Ticket motif throughout.
   All per-cell styling lives here; shared primitives stay LOCKED.
   ============================================================ */

#cell-6 { overflow: hidden; }              /* the edge tab never spills a scrollbar */

.c6 {
  position: relative;
  display: grid;
  gap: var(--space-l);
}

/* ---- gentle teal-wash shimmer at rest (ambient coverage floor) ---- */
.c6::before {
  content: "";
  position: absolute;
  inset: -20% -10%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(42% 40% at 82% 8%, rgba(76, 181, 200, 0.18), transparent 70%),
    radial-gradient(38% 42% at 8% 92%, rgba(201, 114, 59, 0.08), transparent 72%);
}
.motion-ready .c6::before { animation: c6-wash 16s ease-in-out infinite alternate; }
@keyframes c6-wash {
  from { transform: translate3d(-1.4%, -1%, 0) scale(1); opacity: 0.9; }
  to   { transform: translate3d(1.8%, 1.4%, 0) scale(1.05); opacity: 1; }
}
.c6 > *:not(.c6__tab) { position: relative; z-index: 1; }

/* ---- vertical MILO ticket-stub tab riding the left edge ---- */
.c6__tab {
  position: absolute;
  top: 0;
  left: calc(var(--gutter) * -1 + 0.35rem);
  right: auto;
  bottom: auto;
  z-index: 2;
  width: max-content;
  height: max-content;
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  transform-origin: center;
  padding: 1.15em 0.62em;
  border-radius: 0 0 var(--radius) var(--radius);
  background: linear-gradient(180deg, var(--teal-deep), var(--espresso-teal));
  color: #eafafc;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  box-shadow: var(--shadow-soft);
}
.c6__tab-star { font-size: 0.72rem; color: var(--accent); }

/* ============================================================
   TOP — the pitch (left) + hero utility strip (right).
   ============================================================ */
.c6__top {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(1.5rem, 1rem + 3vw, 3.25rem);
  align-items: center;
}

.c6__intro { display: grid; gap: var(--space-s); align-content: start; }
.c6__eyebrow { color: var(--support); }

.c6__headline {
  display: grid;
  font-size: var(--step-section);
  line-height: 1.02;
}
.c6__headline-1 { color: var(--ink); }
.c6__headline-2 { color: var(--support); }
.c6__headline .em { letter-spacing: 0.005em; }

/* trimmed star rule (left-aligned, short) */
.c6__star-div {
  grid-template-columns: 0 auto 1fr;
  max-width: 15rem;
  margin: 0.1rem 0 0.15rem;
}
.c6__star-div::before { display: none; }

.c6__lede {
  max-width: 40ch;
  color: var(--ink-soft);
  font-size: 1.05rem;
  line-height: var(--leading-body);
}
.c6__lede--accent {
  color: var(--teal-deep);
  font-weight: 600;
}

/* ---- hero utility strip: photo + a CSS ticket note ---- */
.c6__hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(9rem, 12.5rem);
  gap: var(--space-s);
  align-items: stretch;
}
.c6__hero-photo {
  aspect-ratio: 16 / 10;
  min-height: 100%;
}
.c6__hero-photo > img { filter: saturate(1.05) contrast(1.02) brightness(1.03); }

.c6__hero-note {
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  gap: 0.5rem;
  padding: var(--space-m) var(--space-s);
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.55), transparent 46%),
    var(--paper-raised);
}
.c6__hero-note-sun { color: var(--support); }
.c6__hero-note-head {
  font-family: var(--font-display);
  font-size: 1.28rem;
  line-height: 1.08;
  color: var(--ink);
}
.c6__hero-note .perf-rule { width: 62%; margin-block: 0.15rem; }
.c6__hero-note-sub {
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 20ch;
}

/* ---- star seam between strip and deck ---- */
.c6__seam {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.9rem;
}
.c6__seam-line { height: 1px; background: linear-gradient(90deg, transparent, rgba(76, 181, 200, 0.35), transparent); }
.c6__seam .star-div { font-size: 1.05rem; }

/* ============================================================
   THE 4 ACTION CARDS.
   ============================================================ */
.c6__deck {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.9rem, 0.5rem + 1.4vw, 1.5rem);
  align-items: stretch;
}

.c6-card {
  display: grid;
  grid-template-rows: auto auto 1fr auto;   /* icon · title · copy(+block) · button pinned */
  gap: 0.6rem;
  padding: var(--space-m) var(--space-m) var(--space-m);
  align-content: start;
}
.c6-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.15rem;
  height: 3.15rem;
  border-radius: 12px;
  border: 1px solid var(--paper-line);
}
.c6-card__icon--teal { color: var(--teal-deep); background: var(--teal-soft); border-color: rgba(76, 181, 200, 0.3); }
.c6-card__icon--clay { color: var(--support-deep); background: var(--marigold-soft); border-color: rgba(201, 114, 59, 0.28); }

.c6-card__title {
  font-family: var(--font-display);
  font-size: 1.32rem;
  line-height: 1.1;
  color: var(--ink);
}
.c6-card__copy {
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.c6-card__btn {
  width: 100%;
  align-self: end;
  margin-top: 0.35rem;
}

/* ---- STOP IN — the verified hours + visit card ---- */
.c6-card--hours { grid-template-rows: auto auto auto auto auto auto; }
.c6-card--hours .c6-card__copy { margin-bottom: 0.15rem; }

.c6-hours { display: grid; gap: 0.35rem; }
.c6-hours__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.32rem 0.55rem;
  border-radius: 9px;
  transition: background var(--dur-fast) var(--ease-out);
}
.c6-hours__label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
}
.c6-hours__time {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
/* today highlight — a UI state (JS-set), NOT a temporal claim */
.c6-hours__row.is-today {
  background: var(--teal-soft);
}
.c6-hours__row.is-today .c6-hours__label { color: var(--teal-deep); }
.c6-hours__row.is-today::after {
  content: "Today";
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--teal-deep);
  background: rgba(255, 255, 255, 0.7);
  padding: 0.1em 0.5em;
  border-radius: 999px;
  margin-left: -0.35rem;
}

.c6-visit { display: grid; gap: 0.4rem; font-style: normal; }
.c6-visit__row {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-size: 0.86rem;
  color: var(--ink-soft);
}
.c6-visit__row svg { flex: none; color: var(--teal-deep); }
.c6-visit__row--link { color: var(--ink); font-weight: 600; transition: color var(--dur-fast) var(--ease-out); }
.c6-visit__row--link:hover,
.c6-visit__row--link:focus-visible { color: var(--teal-deep); }

/* ---- GIFT CARD art — real Milo logo on a teal CSS card ---- */
.c6-giftcard {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 11px;
  margin-top: 0.15rem;
  display: grid;
  place-items: center;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.12), transparent 44%),
    linear-gradient(160deg, var(--teal-deep), var(--espresso-teal));
  border: 1px solid rgba(76, 181, 200, 0.4);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
.c6-giftcard__logo {
  width: 58%;
  height: auto;
  filter: brightness(0) invert(1);          /* wordmark → cream on teal */
  opacity: 0.96;
}
.c6-giftcard__chip {
  position: absolute;
  top: 0.55rem;
  left: 0.6rem;
  width: 1.5rem;
  height: 1.05rem;
  border-radius: 4px;
  background: linear-gradient(135deg, #f4d79a, #d8a95a);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}
.c6-giftcard__star {
  position: absolute;
  bottom: 0.45rem;
  right: 0.6rem;
  color: var(--accent);
  font-size: 0.78rem;
}

/* ============================================================
   BOTTOM BAND — the varied close (NOT the stamped VIEW MENU band).
   ============================================================ */
.c6__band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-m);
  padding: var(--space-m) var(--space-l);
  border-radius: var(--radius);
  border: 1px dashed var(--paper-line-strong);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.5), transparent 44%),
    var(--paper-raised);
  box-shadow: var(--shadow-soft);
}
.c6__band-mark { flex: none; color: var(--support); }
.c6__band-copy { display: grid; gap: 0.1rem; flex: 1 1 16rem; }
.c6__band-line {
  font-family: var(--font-display);
  font-size: 1.22rem;
  line-height: 1.15;
  color: var(--teal-deep);
}
.c6__band-sub { font-size: 0.92rem; color: var(--ink-soft); }
.c6__band-cta { flex: none; }

/* ============================================================
   RESPONSIVE — the mobile recomposition (DESIGN.md: cell 6 leads with
   the menu/order utility cards, secondary proof below).
   ============================================================ */
@media (max-width: 1080px) {
  .c6__deck { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
  .c6__top { grid-template-columns: 1fr; gap: var(--space-m); }
  .c6__hero-photo { aspect-ratio: 16 / 9; }
}

@media (max-width: 860px) {
  /* the edge tab folds into an inline pill so it never overlaps text */
  .c6__tab {
    position: static;
    writing-mode: horizontal-tb;
    transform: none;
    border-radius: 999px;
    padding: 0.4em 0.85em;
    justify-self: start;
    letter-spacing: 0.14em;
    font-size: 0.62rem;
    margin-bottom: calc(var(--space-s) * -0.4);
  }
}

@media (max-width: 620px) {
  .c6__deck { grid-template-columns: 1fr; }
  .c6__hero { grid-template-columns: 1fr; }
  .c6__hero-note { text-align: left; justify-items: start; }
  .c6__hero-note .perf-rule { width: 100%; }
  .c6__hero-note-sub { max-width: none; }
  .c6__band { flex-direction: column; align-items: flex-start; gap: var(--space-s); padding: var(--space-m); }
  .c6__band-copy { flex: 0 0 auto; }
  .c6__band-cta { width: 100%; }
}