/* ===========================================================================
   pages.css — REVISIONE #195 (design approvato #182)
   Solo i componenti NON già coperti da style.css / migration.css:
   layout booking (prenota/ordina), LovelyCustomer, segreto single,
   e i seam del menu RMN ricolorati con i token #182.
   Tutto scoped; nessuna regola globale.
   ========================================================================== */

/* ── Seams menu RMN → palette #182 ───────────────────────────────────────── */
.light .pes-menu, .light-alt .pes-menu {
	--pes-accent: var(--oro-ink);
	--pes-rule: color-mix(in srgb, var(--oro-scuro) 35%, var(--crema));
	--pes-tint: rgba(140, 111, 63, 0.06);
	--pes-ink-soft: var(--testo-sec-chiaro);
	--pes-ink-faint: color-mix(in srgb, var(--testo-sec-chiaro) 60%, var(--crema));
}

/* ── Prenota: iframe + info ristorante ───────────────────────────────────── */
.booking-content { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.booking-info { background: var(--crema-carta); border-radius: 12px; padding: clamp(1.5rem, 3vw, 2.25rem); box-shadow: 0 8px 24px rgba(20, 19, 17, 0.08); }
.booking-info h2 { font-family: var(--font-display); font-size: 1.375rem; margin-bottom: 0.35rem; }
.booking-info .phone { font-family: var(--font-display); font-size: 1.25rem; color: var(--oro-ink); margin: 0.75rem 0; }
.booking-info p { color: var(--testo-sec-chiaro); }
@media (max-width: 900px) { .booking-content { grid-template-columns: 1fr; } }

/* ── LovelyCustomer ──────────────────────────────────────────────────────── */
.lc-benefits-section { padding-block: var(--space-section); }
.lc-padella { position: relative; max-width: min(420px, 60%); margin: clamp(2rem, 5vw, 3rem) auto; }
.lc-padella-logo { display: block; width: 100%; }
.lc-padella.is-pulsing img { animation: lcPulse 0.7s ease-in-out 3; }
.lc-benefits-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.5vw, 1.75rem); max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.lc-benefits-grid .credo-box { background: var(--crema-carta); border-radius: 12px; padding: clamp(1.5rem, 3vw, 2.25rem); box-shadow: 0 8px 24px rgba(20, 19, 17, 0.08); opacity: 0; }
.lc-benefits-grid .credo-box h3 { font-family: var(--font-display); font-size: 1.375rem; margin-bottom: 0.25rem; }
.lc-benefits-grid .credo-subtitle { font-size: var(--fs-micro); letter-spacing: 0.14em; text-transform: uppercase; color: var(--oro-ink); margin: 0 0 0.75rem; }
.lc-benefits-grid .credo-box p:not(.credo-subtitle) { color: var(--testo-sec-chiaro); margin: 0; }
.lc-benefits-grid.is-dropping .credo-box { animation: lcDrop 1.8s cubic-bezier(0.22, 0.9, 0.28, 1) forwards; }
.lc-benefits-grid.is-dropping .credo-box:nth-child(2) { animation-delay: 0.2s; }
.lc-benefits-grid.is-dropping .credo-box:nth-child(3) { animation-delay: 0.4s; }
.lc-benefits-grid.is-ready .credo-box { opacity: 1; animation: none; transition: opacity 0.6s ease-out; }
@keyframes lcDrop { 0% { opacity: 0; transform: translateY(-140px); } 60% { opacity: 1; } 100% { opacity: 1; transform: translateY(0); } }
@keyframes lcPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@media (max-width: 900px) { .lc-benefits-grid { grid-template-columns: 1fr; } .lc-benefits-grid .credo-box { opacity: 1; } }

/* ── Segreto single ──────────────────────────────────────────────────────── */
.pes-segreto-single { padding-block: clamp(4rem, 9vw, 6rem) var(--space-section); }
.pes-segreto-single .segreto-article { max-width: 70ch; margin: 0 auto; padding: 0 var(--gutter); }
.segreto-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.segreto-header .segreto-icona { font-size: 2rem; line-height: 1; }
.segreto-header .segreto-categoria { font-size: var(--fs-micro); letter-spacing: 0.14em; text-transform: uppercase; color: var(--oro-ink); border: 1px solid var(--oro-scuro); border-radius: 999px; padding: 0.15rem 0.7rem; }
.segreto-contenuto { color: var(--testo-sec-chiaro); font-size: 1.0625rem; margin-top: 1.5rem; }
.segreto-nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 3rem; flex-wrap: wrap; }
.segreto-nav a { color: var(--oro-ink); text-decoration: none; font-size: 0.9375rem; }
.segreto-nav a:hover { color: var(--oro); }