/*
 * La pagina «in arrivo» (parti/in-arrivo.php, 14 nov 2026). Sta da sola: niente sambuco.css, solo i font e i colori
 * del brand. Al computer le parole a sinistra e la Tre Cioccolati a destra; al telefono una colonna, con la foto
 * dopo il titolo.
 */

@font-face { font-family: Paragon; src: url(../fonts/paragon-400.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: Paragon; src: url(../fonts/paragon-400-italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: Satoshi; src: url(../fonts/satoshi-400.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: Satoshi; src: url(../fonts/satoshi-700.woff2) format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
	--cacao: #4F2D1D;
	--cacao-tenue: #6F6359;
	--taupe: #B0A49A;
	--filo: #E4DED4;
	--fondo: #F5F1EA;
	--salvia-scuro: #4E7A6D;
	--salvia-profondo: #2E5548;
	--titoli: Paragon, Georgia, "Times New Roman", serif;
	--testo: Satoshi, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	--margine: clamp(18px, 4vw, 56px);
	--molla: cubic-bezier(.2, .8, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fondo); color: var(--cacao); font: 400 1.0625rem/1.6 var(--testo); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, figure, ul { margin: 0; }
ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; text-decoration-color: rgba(79, 45, 29, .32); transition: text-decoration-color .2s; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--salvia-profondo); outline-offset: 3px; border-radius: 3px; }

/* la filigrana: il simbolo grandissimo e appena visibile, come nelle aperture delle pagine (sambuco.css). Il file ha già
   il 20% di opacità: .19 sulla crema è la stessa velatura. Il foglio la taglia ai bordi della finestra */
.foglio { position: relative; isolation: isolate; overflow: clip; }
.filigrana { position: absolute; z-index: -1; left: 0; top: 50%; width: max(120vmax, 1200px); max-width: none; translate: -44% -50%; opacity: .19; pointer-events: none; user-select: none; }

/* ── telefono: una colonna ── */
.arrivo { display: grid; grid-template-columns: minmax(0, 1fr); width: min(100%, 1440px); min-height: 100svh; margin-inline: auto; padding: 22px var(--margine) 30px; }
.marchio img { width: 104px; }

.annuncio { margin-top: 34px; }
.annuncio h1 { max-width: 11ch; font: 400 clamp(2.5rem, 1.55rem + 3.7vw, 4.75rem)/1.02 var(--titoli); letter-spacing: -.02em; text-wrap: balance; }
.annuncio p { max-width: 31em; margin-top: 18px; font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); line-height: 1.55; color: var(--cacao-tenue); text-wrap: pretty; }

.foto { margin-top: 30px; }
.foto img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 18px; box-shadow: 0 1px 0 rgba(79, 45, 29, .06), 0 28px 56px -34px rgba(43, 26, 18, .5); }
.foto figcaption { margin-top: 10px; font: italic 400 1rem/1.3 var(--titoli); color: var(--cacao-tenue); }

.negozi { margin-top: 40px; }
.negozi h2 { font: 400 1.625rem/1.15 var(--titoli); letter-spacing: -.01em; }
.negozi ul { margin-top: 14px; }
.negozio { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; padding: 14px 0 15px; border-top: 1px solid var(--filo); font-size: .9375rem; line-height: 1.5; }
.negozio h3 { font: 400 1.375rem/1.2 var(--titoli); }
.negozio .stato { grid-column: 2; grid-row: 1; align-self: center; }
.negozio p:not(.stato) { grid-column: 1 / -1; }
.stato { display: flex; align-items: center; gap: 8px; color: var(--cacao-tenue); white-space: nowrap; }
.stato i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--taupe); }
.aperto .stato { color: var(--cacao); }
.aperto .stato i { background: var(--salvia-scuro); box-shadow: 0 0 0 4px rgba(78, 122, 109, .16); }

.legale { margin-top: 36px; font-size: .8125rem; line-height: 1.55; color: var(--cacao-tenue); }
.legale .intero { white-space: nowrap; }

/* ── computer: le parole a sinistra, la torta a destra ── */
@media (min-width: 960px) {
	.arrivo { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(48px, 6vw, 112px); align-content: center; padding-block: 36px; }
	.marchio, .annuncio, .negozi, .legale { grid-column: 1; }
	.foto { grid-column: 2; grid-row: 1 / span 4; align-self: center; margin: 0; }
	.foto img { border-radius: 26px; }
	.marchio img { width: 118px; }
	.annuncio { margin-top: clamp(28px, 6vh, 64px); }
	.negozi { margin-top: clamp(32px, 6.5vh, 68px); }
	.legale { margin-top: clamp(28px, 5.5vh, 56px); }
}
/* i tre negozi affiancati solo quando c'è posto: a 1024 «Aperto fino alle 12:30» finiva sopra il negozio accanto */
@media (min-width: 1200px) {
	.negozi ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 22px; }
	.negozio { display: block; padding-top: 14px; }
	.negozio .stato { margin: 4px 0 6px; white-space: normal; }
}

/* un solo momento, all'apertura: la torta che si posa e, dietro, la filigrana che entra girando piano (come in home) */
@media (prefers-reduced-motion: no-preference) {
	.foto img { animation: posa 1.1s var(--molla) .12s both; }
	@keyframes posa { from { opacity: 0; transform: translateY(14px) scale(.985); } }
	.filigrana { animation: entra 3.2s cubic-bezier(.215, .61, .355, 1) both; }
	@keyframes entra { from { opacity: 0; rotate: -8deg; scale: 1.08; } }
}