/* ============================================================
   bento-tiles.css
   ────────────────────────────────────────────────────────────
   The tile system. Every "compartment" on the site is a `.tile`.
   Each page composes tiles inside a `.bento` grid wrapper.

   How sizing works
   ─────────────────────────────────────
   The .bento wrapper sets up a 12-column CSS grid with auto rows
   of --bento-row. Each child tile spans columns + rows via inline
   custom properties:

     <article class="tile" style="--c:6; --r:2"> ... </article>

   This keeps page layout legible: the JSX of a page reads like a
   spec ("two-cols-wide, two-rows-tall"), and the visual rhythm
   is enforced by the grid.

   Tile variants are stylistic only (colour, density). All tiles
   accept the same internal slots: __eyebrow / __title / __sub /
   __cta / __stat / __meta / __image / __chips.
   ============================================================ */

/* ── 1. The grid ───────────────────────────────────────────── */
.bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: var(--bento-row);
  gap: var(--gap);
}

/* Responsive collapse
   ─────────────────────────────────────
   We keep the 12-column grid all the way down to tablet (640px).
   Below that, the grid collapses to 6 columns, then 1.

   Rationale: the bento aesthetic needs asymmetric tile spans
   (7+5, 8+4, 4+4+4). If we collapse to 8 cols mid-way, a tile
   declared as span-7 doesn't have room for its partner — the
   layout shatters. Better to keep 12 cols dense, then jump to
   a stack only when the page is genuinely narrow. */
@media (max-width: 980px) {
  /* At this width tiles spanning ≥7 cols start to feel cramped.
     We slightly relax tile row heights and let smaller tiles
     reflow under their bigger siblings via `--c-max:12`. */
  .bento { grid-auto-rows: minmax(var(--bento-row), auto); }
}
@media (max-width: 640px) {
  /* Tablet → 6-col grid. Tile spans declared >6 get clamped. */
  .bento { grid-template-columns: repeat(6, 1fr); }
  .bento > * { --c-max: 6; }
}
@media (max-width: 480px) {
  /* Phone → full-width stack. */
  .bento {
    grid-template-columns: 1fr;
    grid-auto-rows: minmax(var(--bento-row), auto);
  }
  .bento > * { --c-max: 1; grid-column: span 1 !important; }
}

/* ── 2. Tile core ──────────────────────────────────────────── */
.tile {
  /* The two custom properties that drive sizing. Inline overrides
     win because of CSS variable cascade. Default: 4 cols × 1 row. */
  --c: 4;
  --r: 1;
  /* Clamp the column span to whatever the grid currently supports
     (set by the media queries above). Prevents 8-col tiles from
     overflowing a 4-col mobile grid. */
  grid-column: span min(var(--c), var(--c-max, 12));
  grid-row:    span var(--r);

  /* Base look */
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: clamp(18px, 1.6vw, 28px);
  border-radius: var(--r-lg);
  background: var(--paper-cream);
  color: var(--ink-900);
  overflow: hidden;
  isolation: isolate;
  /* Border instead of shadow at rest — keeps the page feeling like
     paper, not silicon. Shadow appears on hover. */
  border: 1px solid var(--paper-edge);
  box-shadow: var(--shadow-rest);
  transition:
    transform var(--dur-2) var(--ease-spring),
    box-shadow var(--dur-2) var(--ease-out),
    background var(--dur-2) var(--ease-out),
    border-color var(--dur-2) var(--ease-out);
  will-change: transform;
}

/* Interactive tile (wrapped in <a>) — give it a stronger hover. */
a.tile,
.tile--interactive {
  cursor: pointer;
}
a.tile:hover,
.tile--interactive:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
  background: var(--paper-dim);
}

/* ── 3. Variants ───────────────────────────────────────────── */

/* Filled — dark cast-iron tile. Used for the hero on the home page,
   for high-impact moments. White type on near-black. */
.tile--filled {
  background: var(--filled-bg);
  color: var(--filled-fg);
  border-color: rgba(255,255,255,0.04);
}
.tile--filled .tile__sub,
.tile--filled .tile__eyebrow,
.tile--filled .tile__meta { color: rgba(246,240,225,0.7); }
.tile--filled .tile__eyebrow::before { background: rgba(246,240,225,0.4); }
a.tile.tile--filled:hover,
.tile--filled.tile--interactive:hover { background: #14110D; }

/* Matcha — primary brand accent fill. Used sparingly: one per page. */
.tile--matcha {
  background: var(--matcha-500);
  color: var(--paper-bone);
  border-color: var(--matcha-700);
}
.tile--matcha .tile__sub,
.tile--matcha .tile__eyebrow { color: rgba(246,240,225,0.8); }
.tile--matcha .tile__eyebrow::before { background: rgba(246,240,225,0.45); }
a.tile.tile--matcha:hover { background: var(--matcha-700); }

/* Ghost — outline only. Used for "explore" tiles and overflow links. */
.tile--ghost {
  background: transparent;
  border: 1px dashed var(--paper-edge);
}

/* Image tile — the photo IS the tile. Padding goes to zero.
   Inner caption sits at the bottom over a gradient scrim. */
.tile--image {
  padding: 0;
  background: var(--ink-900);
  color: var(--paper-bone);
}
.tile--image > img,
.tile--image > picture > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-4) var(--ease-out);
  z-index: -1;
}
a.tile.tile--image:hover > img,
.tile--image.tile--interactive:hover > img { transform: scale(1.04); }
/* Scrim — only on tiles that contain a caption. Two-stop gradient
   so the very top stays clean (lets the food breathe) and the bottom
   third gets the dark wash for text legibility. */
.tile--image:has(.tile__caption)::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top,
      rgba(0,0,0,0.78) 0%,
      rgba(0,0,0,0.55) 22%,
      rgba(0,0,0,0.0) 55%);
  pointer-events: none;
  z-index: 0;
}

.tile__caption {
  margin-top: auto;
  padding: clamp(16px, 1.4vw, 24px);
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  z-index: 1;
}
.tile__caption-eyebrow {
  font-family: var(--font-ui);
  font-size: var(--t-eyebrow);
  font-weight: 500;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: rgba(246,240,225,0.88);
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.tile__caption-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.4rem, 1.0rem + 1.6vw, 2.2rem);
  font-weight: 400;
  color: var(--paper-bone);
  line-height: 1.05;
}

/* Inverted (paper-bone background) — for muted callouts inside a
   filled-tile page row. */
.tile--bone { background: var(--paper-bone); }

/* Plate tile — paper-cream with a subtle circular spotlight in the
   corner. Used for nigiri/plate motifs and stat tiles. */
.tile--plate {
  background:
    radial-gradient(circle at 100% 0%, rgba(155,184,90,0.18), transparent 40%),
    var(--paper-cream);
}

/* ── 4. Internal slots ─────────────────────────────────────── */

/* Eyebrow at the top of any tile */
.tile__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-ui);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--ink-500);
}
.tile__eyebrow::before {
  content: "";
  width: 18px;
  height: 1px;
  background: var(--ink-500);
  display: inline-block;
}
.tile__eyebrow .tile__eyebrow-no {
  font-family: var(--font-mono);
  font-feature-settings: "tnum";
  color: var(--ink-300);
}

/* Title — Instrument Serif, fluidly sized */
.tile__title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.8rem);
  font-weight: 400;
  line-height: 1.0;
  letter-spacing: var(--ls-tight);
  color: inherit;
}
.tile__title em {
  font-style: italic;
  color: var(--ink-500);
}
.tile--filled .tile__title em,
.tile--matcha .tile__title em { color: rgba(246,240,225,0.6); }

/* Sub-copy / paragraph */
.tile__sub {
  font-size: var(--t-body);
  color: var(--ink-700);
  line-height: 1.5;
  max-width: 46ch;
}

/* Footer of a tile — arrow + label, or key:value strip. */
.tile__cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-ui);
  font-size: 0.94rem;
  font-weight: 500;
  color: inherit;
}
.tile__cta .btn__arrow {
  display: inline-block;
  transition: transform var(--dur-2) var(--ease-spring);
}
a.tile:hover .tile__cta .btn__arrow,
.tile--interactive:hover .tile__cta .btn__arrow { transform: translateX(4px); }

/* "Stat" tile content — a huge number plus a label. */
.tile__stat-number {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--t-tile-num);
  line-height: 0.9;
  font-weight: 400;
  letter-spacing: -0.04em;
  color: inherit;
  font-feature-settings: "tnum";
}
.tile__stat-label {
  font-family: var(--font-ui);
  font-size: var(--t-eyebrow);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--ink-500);
  font-weight: 500;
}
.tile--filled .tile__stat-label,
.tile--matcha .tile__stat-label { color: rgba(246,240,225,0.6); }

/* Meta row — small label : value pairs across the bottom */
.tile__meta {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  font-family: var(--font-ui);
  font-size: 0.82rem;
  color: var(--ink-500);
}
.tile__meta dt {
  font-size: var(--t-micro);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--ink-300);
  margin-bottom: 2px;
}
.tile__meta dd { color: var(--ink-900); font-weight: 500; margin: 0; }
.tile--filled .tile__meta dd { color: var(--paper-bone); }
.tile--filled .tile__meta dt { color: rgba(246,240,225,0.4); }

/* Chip row inside a tile — small filters / tags */
.tile__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.tile__chips .chip {
  background: rgba(255,255,255,0.6);
  border-color: rgba(0,0,0,0.04);
  padding: 4px 10px;
  font-size: 0.76rem;
}
.tile--filled .tile__chips .chip {
  background: rgba(255,255,255,0.06);
  color: var(--paper-bone);
  border-color: rgba(255,255,255,0.1);
}

/* Pull-quote tile */
.tile--quote .tile__title {
  font-style: italic;
  font-size: clamp(1.2rem, 1.0rem + 0.8vw, 1.7rem);
  line-height: 1.3;
}
.tile--quote .tile__title::before {
  content: "\201C";
  font-size: 2.6em;
  line-height: 0;
  vertical-align: -0.5em;
  margin-right: 6px;
  color: var(--matcha-500);
  font-style: normal;
}

/* Big-number plate (for "today's special" price etc.) */
.tile__price {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.6rem);
  font-weight: 400;
  font-feature-settings: "tnum";
  letter-spacing: var(--ls-tight);
  line-height: 0.95;
  color: var(--ink-900);
}

/* ── 5. Tile decorations ───────────────────────────────────── */

/* A small numbered chip in the top-right corner ("01 / 05") */
.tile__index {
  position: absolute;
  top: clamp(16px, 1.4vw, 24px);
  right: clamp(16px, 1.4vw, 24px);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.06em;
  color: var(--ink-300);
}
.tile--filled .tile__index,
.tile--matcha .tile__index { color: rgba(246,240,225,0.5); }

/* Plate-disc decoration in the corner — for visual rhythm. */
.tile__disc {
  position: absolute;
  width: clamp(80px, 9vw, 140px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.5), transparent 60%),
    var(--paper-dim);
  border: 1px solid var(--paper-edge);
  z-index: 0;
}
.tile__disc--matcha {
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.4), transparent 60%),
    var(--matcha-300);
  border-color: var(--matcha-500);
}
.tile__disc--akami {
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.4), transparent 60%),
    var(--akami);
  border-color: var(--akami-deep);
}

/* ── 6. Bento "row pairs" — two-tile compositions ──────────── */
/* Bento home uses these row patterns frequently:
     12 cols  = [ 7  + 5 ]  hero + image
     12 cols  = [ 3 + 3 + 6 ] stat + stat + image
     12 cols  = [ 4 + 4 + 4 ] three equal locations
   These are not classes — they're advisory. Each page sets --c/--r
   on its tiles directly. */