/* ============================================================
   SFIZIO v2 — ristorante (STYLE GAMMA · espresso/gold theme).
   Intimate, slow, high-end. Sections: #hero · #leonardo ·
   course sections (Pasta/Risotto/Terra/Mare/Dolci) · #kofte ·
   #contatti — each self-standing.
   ============================================================ */

/* ---------------- #hero ---------------- */
.dhero {
  position: relative; min-height: 88dvh;
  display: grid; align-items: end; overflow: clip;
}
.dhero__bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  filter: brightness(0.5) saturate(0.9) sepia(0.15);
}
.dhero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(19, 15, 11, 0.3), var(--bg) 96%);
}
.dhero__content {
  position: relative; z-index: 1;
  padding-block: calc(var(--nav-h) + var(--sp-6)) var(--sp-7);
  display: grid; gap: var(--sp-3);
}
.dhero em, .dleo em, .dkofte em, .dsec em { color: var(--dining); font-style: italic; }
.dhero .kicker { color: var(--dining); display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.dhero .soon { color: var(--dining); }
.dhero .lede { max-width: 38ch; }

/* ---------------- #leonardo ---------------- */
.dleo { padding-block: var(--sp-8); background: var(--bg-2); overflow: clip; }
.dleo__grid { display: grid; gap: var(--sp-6); }
.dleo__media {
  border-radius: var(--r-lg); overflow: clip;
  aspect-ratio: 4 / 5; max-height: 64dvh;
  will-change: clip-path, transform;
}
.dleo__media img { width: 100%; height: 100%; object-fit: cover; filter: sepia(0.25) brightness(0.9); }
.dleo__text h2 { font-size: var(--fs-2xl); }
@media (min-width: 800px) {
  .dleo__grid { grid-template-columns: 5fr 6fr; align-items: center; gap: var(--sp-7); }
}

/* ---------------- course sections ---------------- */
.dsec { padding-block: var(--sp-8) var(--sp-6); overflow: clip; }
.dsec:nth-child(even) { background: var(--bg-2); }
.dsec__head { max-width: 40rem; display: grid; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.dsec__title { font-size: var(--fs-2xl); }
.dsec__intro { color: var(--muted); }

/* the text grid: dishes as prose blocks, not bullets, not cards */
.dgrid {
  display: grid; gap: var(--sp-4) var(--sp-6);
  margin-bottom: var(--sp-6);
}
.dish { border-left: 2px solid var(--line-strong); padding-left: var(--sp-4); }
.dish h3 {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3);
  font-size: var(--fs-lg);
}
.dish .price { color: var(--dining); font-size: var(--fs-md); white-space: nowrap; }
.dish p { color: var(--muted); font-size: var(--fs-sm); margin-top: 4px; }
@media (min-width: 700px) { .dgrid { grid-template-columns: repeat(2, 1fr); } }

/* the fancy horizontal strip: tall imagery, captions, no cart chrome */
.dstrip-wrap { position: relative; }
.dstrip {
  display: flex; gap: var(--sp-4);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--sp-3);
}
.dstrip::-webkit-scrollbar { display: none; }
.dstrip figure {
  position: relative; flex: 0 0 auto;
  width: min(68vw, 21rem);
  aspect-ratio: 3 / 4;
  margin: 0; border-radius: var(--r-lg); overflow: clip;
  scroll-snap-align: start;
  will-change: clip-path;
}
.dstrip img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.82); }
.dstrip figcaption {
  position: absolute; inset: auto 0 0 0;
  padding: var(--sp-5) var(--sp-4) var(--sp-4);
  background: linear-gradient(transparent, rgba(12, 9, 6, 0.85));
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3);
}
.dstrip figcaption strong { font-family: var(--font-display); font-size: var(--fs-lg); color: #fff; }
.dstrip figcaption .price { color: var(--dining); }

/* per-section end links */
.dsec__cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); }

/* ---------------- #kofte ---------------- */
.dkofte { background: var(--bg); }
.dkofte__lede { color: var(--muted); max-width: 48ch; margin-bottom: var(--sp-6); }