/* ============================================================
   CELL 2 · Coffee + Breakfast, No Guesswork (RANGE) — scoped under #cell-2.
   The compact CATEGORY MATRIX / range scan: centered signature head,
   4 SMALLER category tickets (icon chip + title + blurb + small food
   thumb + dashed See→), closing on ONE embedded dark-teal appetite
   panel that carries VIEW MENU. Light-dominant buttermilk field; the
   dark panel is the single rhythm-punch (a PANEL, not the section).
   Distinct from c3's peak (smaller plates) + c4's timeline (C5).
   Alive at t0. Whole at 100% @ 1440 / 1280 / 390.
   ============================================================ */

#cell-2 {
  overflow: hidden;
}
/* a faint warm sun-wash behind the field (ambient rhythm, at rest) */
#cell-2::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(90% 60% at 50% -6%, rgba(255, 240, 214, 0.6), transparent 55%),
    radial-gradient(70% 60% at 100% 40%, rgba(76, 181, 200, 0.05), transparent 62%);
  z-index: 0;
}

#cell-2 .c2 {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
}

/* ---- section head ---- */
#cell-2 .c2__head {
  display: grid;
  gap: var(--space-xs);
  justify-items: center;
  text-align: center;
  max-width: 62ch;
  margin-inline: auto;
}
#cell-2 .c2__eyebrow { color: var(--teal-deep); }   /* teal eyebrow to match the mockup's teal lead */
#cell-2 .c2__eyebrow-sun {
  display: inline-flex;
  color: var(--accent);
}
#cell-2 .c2__headline {
  font-size: var(--step-section);
  line-height: 1.02;
  display: grid;
  gap: 0.04em;
}
#cell-2 .c2__headline-1 { color: var(--ink); }
#cell-2 .c2__headline-2 { display: block; }
#cell-2 .c2__headline .em { font-style: italic; }
#cell-2 .c2__sub {
  color: var(--ink-soft);
  font-size: var(--step-0);
  line-height: var(--leading-body);
  max-width: 48ch;
  margin-top: 0.25rem;
}

/* ---- the 4-tile category matrix — repeated units, identical by default (T2.2) ---- */
#cell-2 .c2__matrix {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 0.6rem + 1.1vw, 1.5rem);
  align-items: stretch;
}

/* a category ticket. The whole card is the click target (semantic — lift is ok). */
#cell-2 .c2-cat {
  display: flex;               /* let the inner link fill the ticket height */
  padding: 0;
}
#cell-2 .c2-cat__link {
  display: grid;
  grid-template-rows: auto 1fr auto;   /* top block · thumb grows · see-link pinned */
  gap: clamp(0.7rem, 0.5rem + 0.5vw, 1rem);
  width: 100%;
  padding: clamp(1.05rem, 0.8rem + 0.7vw, 1.45rem);
  padding-top: clamp(1.25rem, 1rem + 0.7vw, 1.7rem);   /* clear the perf edge */
}

/* top block: icon chip + title + blurb (uniform slot heights across all 4) */
#cell-2 .c2-cat__top {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 0.5rem;
}
#cell-2 .c2-cat__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 999px;
  color: var(--paper-raised);
  box-shadow: var(--shadow-soft);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
#cell-2 .c2-cat__chip--teal { background: var(--teal-deep); }
#cell-2 .c2-cat__chip--clay { background: var(--support); }
#cell-2 .c2-cat__title {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.15rem + 0.6vw, 1.7rem);
  line-height: 1;
  letter-spacing: 0.01em;
}
#cell-2 .c2-cat__title--teal { color: var(--teal-deep); }
#cell-2 .c2-cat__title--clay { color: var(--support-deep); }
#cell-2 .c2-cat__blurb {
  color: var(--ink-soft);
  font-size: 0.9rem;
  line-height: 1.42;
  min-height: 2.6em;            /* 2-line slot so all 4 tops align (T2.2) */
  max-width: 24ch;
  margin-inline: auto;
}

/* the SMALL food thumbnail — deliberately quicker/smaller than c3's peak plates (C5) */
#cell-2 .c2-cat__thumb {
  aspect-ratio: 4 / 3;
  width: 100%;
  border-radius: calc(var(--radius) - 3px);
}
#cell-2 .c2-cat__thumb > img {
  transition: transform 0.7s var(--ease-out);
}

/* dashed "See →" link — the order-slip perforation lead, per category color */
#cell-2 .c2-cat__see {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45em;
  padding-top: 0.7rem;
  border-top: 1px dashed var(--paper-line-strong);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  transition: color var(--dur-fast) var(--ease-out), gap var(--dur-fast) var(--ease-out);
}
#cell-2 .c2-cat__see svg { transition: transform var(--dur-fast) var(--ease-out); }
#cell-2 .c2-cat__see--teal { color: var(--teal-deep); }
#cell-2 .c2-cat__see--clay { color: var(--support-deep); } /* deep marigold — 4.75:1 AA at small-caps size */

/* hover choreography — semantic (whole card is a link) */
@media (hover: hover) {
  #cell-2 .c2-cat.lift:hover .c2-cat__thumb > img { transform: scale(1.045); }
  #cell-2 .c2-cat.lift:hover .c2-cat__chip { transform: translateY(-2px) scale(1.05); box-shadow: var(--shadow); }
  #cell-2 .c2-cat.lift:hover .c2-cat__see { gap: 0.75em; }
  #cell-2 .c2-cat.lift:hover .c2-cat__see svg { transform: translateX(3px); }
}
#cell-2 .c2-cat__link:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: var(--radius); }

/* touch tactile — hover is gated off touch, so a tap gets a brief pressed
   state (set by cell-2.js) that always resolves. */
#cell-2 .c2-cat.is-pressed { transform: scale(0.985); transition: transform 120ms var(--ease-out); }

/* ============================================================
   THE ONE EMBEDDED DARK-TEAL APPETITE PANEL — carries VIEW MENU.
   Warm dark-teal field + cream text; the single rhythm punch in the
   bright cell. A PANEL, and a DIFFERENT close than cell-1's (C6).
   ============================================================ */
#cell-2 .c2__panel {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(1rem, 0.6rem + 1.5vw, 2.25rem);
  padding: clamp(1rem, 0.8rem + 0.9vw, 1.5rem) clamp(1.25rem, 0.9rem + 1.4vw, 2.25rem);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.06), transparent 46%),
    linear-gradient(180deg, var(--espresso-teal) 0%, var(--teal-deep) 100%);
  color: var(--text-on-dark);
  box-shadow: var(--shadow);
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
/* a soft warm glow at rest — the "dark panel glows" ambient */
#cell-2 .c2__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 160% at 12% 20%, rgba(255, 214, 170, 0.16), transparent 55%);
  z-index: 0;
}
#cell-2 .c2__panel > * { position: relative; z-index: 1; }

#cell-2 .c2__panel-mark {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  color: #ffd7bb;                 /* warm accent text on dark (tile) */
}
#cell-2 .c2__panel-mark .star-div { color: #ffd7bb; }
#cell-2 .c2__panel-place {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  white-space: nowrap;
}
#cell-2 .c2__panel-copy {
  color: var(--text-on-dark-muted);
  font-size: 0.95rem;
  line-height: 1.5;
  border-left: 1px dashed rgba(255, 255, 255, 0.22);
  padding-left: clamp(1rem, 0.6rem + 1.4vw, 2rem);
}
/* VIEW MENU on the dark panel — marigold primary stays AA (cream on deep marigold) */
#cell-2 .c2__panel-btn { white-space: nowrap; }

/* ============================================================
   RESPONSIVE — desktop RECOMPOSED (DESIGN.md: matrix → ranked
   single-column rail on mobile), not squished (T2.31).
   ============================================================ */

/* tablet: 2×2 grid so cards keep their size and wrap in pairs */
@media (max-width: 980px) {
  #cell-2 .c2__matrix { grid-template-columns: repeat(2, 1fr); }
}

/* panel stacks its copy under the mark before the 720 rail break */
@media (max-width: 860px) {
  #cell-2 .c2__panel { grid-template-columns: 1fr auto; row-gap: 0.75rem; }
  #cell-2 .c2__panel-copy {
    grid-column: 1 / -1;
    border-left: 0;
    border-top: 1px dashed rgba(255, 255, 255, 0.22);
    padding-left: 0;
    padding-top: 0.85rem;
  }
}

/* mobile: ranked single-column rail — Coffee → Breakfast → Brunch → Lunch.
   Cards recompose to a horizontal row (chip+text left, thumb right) so the
   scan stays tight in one viewport-worth of scroll, not a stack of squares. */
@media (max-width: 560px) {
  #cell-2 .c2__matrix { grid-template-columns: 1fr; gap: 0.85rem; }

  #cell-2 .c2-cat__link {
    grid-template-rows: auto;
    grid-template-columns: 1fr 34%;
    grid-template-areas:
      "top thumb"
      "see see";
    align-items: center;
    column-gap: 1rem;
    row-gap: 0.85rem;
    padding: 1rem 1.1rem 1.05rem;
  }
  #cell-2 .c2-cat__top {
    grid-area: top;
    justify-items: start;
    text-align: left;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "chip title"
      "blurb blurb";
    column-gap: 0.75rem;
    gap: 0.35rem 0.75rem;
  }
  #cell-2 .c2-cat__chip { grid-area: chip; width: 2.5rem; height: 2.5rem; }
  #cell-2 .c2-cat__title { grid-area: title; align-self: center; text-align: left; }
  #cell-2 .c2-cat__blurb { grid-area: blurb; min-height: 0; text-align: left; margin-inline: 0; max-width: none; }
  #cell-2 .c2-cat__thumb { grid-area: thumb; aspect-ratio: 1 / 1; }
  #cell-2 .c2-cat__see {
    grid-area: see;
    justify-content: flex-start;
    padding-top: 0.65rem;
  }
}

/* small-phone: panel to a clean vertical stack, action full-width */
@media (max-width: 480px) {
  #cell-2 .c2__panel {
    grid-template-columns: 1fr;
    justify-items: start;
    text-align: left;
    gap: 0.85rem;
  }
  #cell-2 .c2__panel-copy { border-top: 1px dashed rgba(255, 255, 255, 0.22); padding-top: 0.85rem; }
  #cell-2 .c2__panel-btn { width: 100%; }
}