/* =====================================================================
   DRAFT 2 · CANTINA (maroon tile)
   Split hero with a tall photo that rolls into view. Big flat maroon
   panels taken from the tile wall. The menu reads like a supplier's
   catalogue: a sticky section index on the left, each section opening
   with a large photo, items in clean rows. Geist only.
   ===================================================================== */
:root {
  --font: "Geist", system-ui, sans-serif;
  --bg: #f7f1e7; --surface: #fffaf3; --accent: #7d2a33; --text: #22191a; --soft: #6c5f5a; --line: #e7dacb;
}
.nav .wtag { color: var(--accent); }
.hero-split { padding: 140px 0 var(--s800); }
.hero-split .split { grid-template-columns: 1.05fr 0.95fr; }
.kick { display: inline-block; color: var(--accent); letter-spacing: 0.08em; margin-bottom: var(--s300); }
.hero-split .hero-sub { margin-top: var(--s300); }
.hero-pic { height: 640px; border-radius: 24px; }

/* category rows: photo, name, italian name, arrow-free link */
.cats.rows { display: flex; flex-direction: column; }
.cats.rows .cat-tile { display: grid; grid-template-columns: 120px 1fr auto; gap: var(--s300); align-items: center; padding: var(--s200) 0; text-decoration: none; color: var(--text); box-shadow: inset 0 -1px 0 var(--line); transition: transform 500ms var(--ease); }
.cats.rows .cat-tile:hover { transform: translateX(8px); }
.cats.rows .cat-img { grid-column: 1; grid-row: 1; display: block; width: 120px; height: 80px; overflow: hidden; border-radius: 12px; }
.cats.rows img { width: 100%; height: 100%; object-fit: cover; }
.cats.rows .cat-name { grid-column: 2; grid-row: 1; }
.cats.rows .cat-it { grid-column: 3; grid-row: 1; color: var(--accent); }

.maroon { background: var(--maroon); color: #f8ecdf; padding: var(--s900) 0; --soft: #e7cfc6; }
.maroon .lede { color: #ecd8cf; }
.maroon .m-pic { height: 460px; border-radius: 24px; }
.maroon .lid { background: var(--maroon); }

.tagsec { background: var(--surface); }
.ordering .ord-card { background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); }

/* menu: sticky index + sections */
.menu-split { display: grid; grid-template-columns: 220px 1fr; gap: var(--s700); align-items: start; }
.cat-index { position: sticky; top: 112px; display: flex; flex-direction: column; gap: var(--s75); }
.cat-index a { text-decoration: none; color: var(--soft); padding: var(--s50) 0; transition: color 300ms var(--ease), transform 300ms var(--ease); }
.cat-index a:hover { color: var(--accent); transform: translateX(4px); }
.mode-index .cat-lead { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s400); align-items: end; margin-bottom: var(--s300); }
.mode-index .cat-lead .cat-img { display: block; height: 240px; overflow: hidden; border-radius: 16px; }
.mode-index .cat-lead img { width: 100%; height: 100%; object-fit: cover; }
.mode-index .cat-lead > div { display: flex; flex-direction: column; gap: var(--s75); }
.mode-index .item { display: grid; grid-template-columns: 1fr auto; gap: var(--s300); padding: var(--s300) 0; box-shadow: inset 0 -1px 0 var(--line); }
.mode-index .item > div:first-child { display: flex; flex-direction: column; gap: var(--s50); }
.mode-index .aside { display: flex; flex-direction: column; align-items: flex-end; gap: var(--s75); text-align: right; color: var(--soft); }
/* bakery page reuses the list layout */
.mode-list .items { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s300) var(--s600); }
.mode-list .item { display: grid; grid-template-columns: 96px 1fr; gap: var(--s200); padding-bottom: var(--s300); box-shadow: inset 0 -1px 0 var(--line); }
.mode-list .item img { width: 96px; height: 96px; border-radius: 12px; object-fit: cover; }
.mode-list .item > div { display: flex; flex-direction: column; gap: var(--s50); }
.mode-list .price { display: none; }
.band { margin: 0 var(--s300); border-radius: 24px; }

.foot { background: var(--maroon-d); color: #f8ecdf; --soft: #e2c4bc; --line: #7a3740; --text: #f8ecdf; --accent: #f1cfa6; }
.foot .phone b { color: #f8ecdf; }

@media (max-width: 900px) {
  .hero-pic { height: 420px; }
  .menu-split { grid-template-columns: 1fr; gap: var(--s300); }
  .cat-index { position: static; flex-direction: row; flex-wrap: wrap; gap: var(--s75) var(--s200); }
  .mode-index .cat-lead { grid-template-columns: 1fr; }
  .mode-list .items { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .cats.rows .cat-tile { grid-template-columns: 80px 1fr; }
  .cats.rows .cat-img { width: 80px; height: 64px; }
  .cats.rows .cat-it { display: none; }
  .mode-index .item { grid-template-columns: 1fr; }
  .mode-index .aside { align-items: flex-start; text-align: left; }
  .band { margin: 0 var(--s200); }
}
/* inner page heads sit on a maroon field */
.pagehead { background: var(--maroon); color: #f8ecdf; --soft: #e7cfc6; --text: #f8ecdf; padding-bottom: var(--s800); margin-bottom: var(--s600); }
.pagehead .hero-h { background-image: linear-gradient(90deg, #ffffff, #9b9b9b); }
.pagehead .lede { color: #ecd8cf; }
.pagehead .btn { background: var(--cream-hi); color: var(--maroon); }
.pagehead .phone b { color: #f8ecdf; }
.pagehead .tbc { color: #6a5300; }