/* ============================================================
   SFIZIO v2 — pizza page (STYLE ALPHA · terracotta/clay theme).
   Wood-fired feel: ember glows, warm clay ground, charcoal edges.
   Sections: #hero · #impasto · #firme · #burrate · #crude ·
   #sottovuoto · #classiche — each self-standing.
   ============================================================ */

/* ---------------- #hero ---------------- */
.phero {
  position: relative;
  min-height: 88dvh;
  display: grid; align-items: end;
  overflow: clip;
}
.phero__bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center 30%;
  filter: brightness(0.6) saturate(1.05);
}
.phero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(30, 14, 8, 0.35), var(--bg) 96%);
}
/* the ember line: wood-fire glow rising from the fold */
.phero__ember {
  position: absolute; inset: auto 0 0 0; height: 38%;
  background:
    radial-gradient(60% 120% at 30% 100%, rgba(255, 122, 40, 0.4), transparent 70%),
    radial-gradient(45% 100% at 75% 100%, rgba(255, 77, 46, 0.28), transparent 70%);
  filter: blur(6px);
  animation: ember-breathe 5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes ember-breathe { 50% { opacity: 0.65; } }
.phero__content {
  position: relative; z-index: 1;
  padding-block: calc(var(--nav-h) + var(--sp-6)) var(--sp-7);
  display: grid; gap: var(--sp-3);
}
.phero em { color: var(--pizza); }
.phero .lede { max-width: 38ch; color: var(--ink); opacity: 0.9; }
.phero .kicker { color: var(--pizza); }

/* ---------------- #impasto (stat band) ---------------- */
.ptech {
  padding-block: var(--sp-6);
  background: var(--charcoal);
  color: #f6e8d8;
}
.ptech__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); }
.ptech__stat strong {
  font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 620;
  color: #ffb15e;                       /* fire on charcoal */
}
.ptech__stat strong span { font-size: 0.5em; opacity: 0.7; margin-left: 2px; }
.ptech__stat p { opacity: 0.75; font-size: var(--fs-sm); max-width: 18ch; }
@media (min-width: 800px) { .ptech__grid { grid-template-columns: repeat(4, 1fr); } }

/* ---------------- narrative sections ---------------- */
.psection { padding-block: var(--sp-8) var(--sp-7); }
.psection--alt { background: var(--bg-2); }
.psection__intro { max-width: 38rem; margin-bottom: var(--sp-6); }
.psection__intro h2 { font-size: var(--fs-2xl); }
.psection__intro em { color: var(--pizza); font-style: italic; }

/* #burrate — 1+2 mosaic */
.pmosaic { display: grid; gap: var(--sp-4); }
.pmosaic .pcard { width: auto; }
@media (min-width: 800px) {
  .pmosaic { grid-template-columns: 1.4fr 1fr; grid-auto-rows: minmax(0, auto); }
  .pmosaic > :first-child { grid-row: span 2; }
  .pmosaic > :first-child .pcard__media { aspect-ratio: 3 / 4; height: 100%; }
}

/* #sottovuoto — trio row */
.ptrio { display: grid; gap: var(--sp-4); }
.ptrio .pcard { width: auto; }
@media (min-width: 700px) { .ptrio { grid-template-columns: repeat(3, 1fr); } }

/* #classiche — deliberately plain */
.psection--plain { background: var(--charcoal); color: #f0e2d0; }
.psection--plain .kicker { color: #ffb15e; }
.psection--plain .pcard { background: #2e2119; border-color: rgba(255, 236, 214, 0.12); }
.psection--plain .pcard__desc { color: rgba(240, 226, 208, 0.6); }
.psection--plain .pcard__order { background: var(--act); }
.psection--plain .carousel::before { background: linear-gradient(90deg, var(--charcoal), transparent); }
.psection--plain .carousel::after { background: linear-gradient(-90deg, var(--charcoal), transparent); }

/* carousel gradient edges on the alt bg */
.psection--alt .carousel::before { background: linear-gradient(90deg, var(--bg-2), transparent); }
.psection--alt .carousel::after { background: linear-gradient(-90deg, var(--bg-2), transparent); }

@media (prefers-reduced-motion: reduce) {
  .phero__ember { animation: none; }
}