/* =====================================================================
   COLAZIONE — corpo della pagina (06/10/2026)
   Manifesto · «Dolce o salato? Entrambi!» a scena ferma con due colonne di
   foto che scorrono in direzioni opposte · caffetteria che si apre dal centro ·
   nastro delle bevande · chiusura.
   ===================================================================== */

/* ---------- manifesto ---------- */
.clz-quote { padding-block: clamp(6rem, 14vw, 11rem) clamp(5rem, 10vw, 8rem); }
.clz-eyebrow { text-align: center; margin-bottom: 2rem; }

/* ---------- dolce o salato ---------- */
.clz-duo { position: relative; background: var(--sand-pale); view-timeline: --clzduo block; }
.clz-duo__stage { position: relative; height: 100vh; overflow: hidden; display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr); grid-template-rows: 100%; gap: clamp(1.5rem, 3vw, 3.5rem);
  padding-inline: max(1.5rem, (100vw - var(--wrap)) / 2); }
.clz-duo__col { align-self: start; display: flex; flex-direction: column; gap: clamp(1rem, 2vw, 1.75rem); padding-block: 8vh; }
.clz-duo__col figure { position: relative; margin: 0; overflow: hidden; background: var(--teal); aspect-ratio: 4 / 5; flex: none; }
.clz-duo__col figure:nth-child(2) { aspect-ratio: 3 / 4; }
.clz-duo__col img { width: 100%; height: 100%; object-fit: cover; }
.clz-duo__text { align-self: center; text-align: center; display: flex; flex-direction: column; align-items: center; }
.clz-duo__title { font: 200 clamp(2.6rem, 5vw, 5rem)/.98 var(--font-display); letter-spacing: -.035em; color: var(--ink); }
.clz-duo__title > span { display: block; }
.clz-duo__both { margin-top: .12em; font-weight: 300; color: var(--teal); font-size: 1.32em; }
.clz-duo__body { margin-top: clamp(1.5rem, 3vh, 2.25rem); max-width: 36ch; font-size: clamp(.98rem, 1.1vw, 1.08rem); line-height: 1.75; color: var(--grey); }
@media (hover: hover) {
  .clz-duo__col img { transition: transform 1.2s var(--ease); }
  .clz-duo__col figure:hover img { transform: scale(1.06); }
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .clz-duo { height: 250vh; }
    .clz-duo__stage { position: sticky; top: 0; }
    .clz-duo__col { animation: linear both; animation-timeline: --clzduo; animation-range: contain 0% contain 100%; }
    .clz-duo__col--up { animation-name: clzUp; }
    .clz-duo__col--down { animation-name: clzDown; }
    @keyframes clzUp { from { transform: translateY(12vh); } to { transform: translateY(calc(100vh - 100% - 6vh)); } }
    @keyframes clzDown { from { transform: translateY(calc(100vh - 100% - 6vh)); } to { transform: translateY(12vh); } }
  }
}

/* ---------- caffetteria ---------- */
.clz-cafe { position: relative; height: 100vh; min-height: 560px; overflow: hidden; isolation: isolate; color: var(--white);
  background: var(--teal-deep); display: flex; align-items: flex-end; }
.clz-cafe__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.clz-cafe__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.clz-cafe::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(15deg, rgba(15,58,65,.9) 0%, rgba(15,58,65,.55) 36%, rgba(15,58,65,0) 68%); }
.clz-cafe__text { padding-bottom: clamp(3rem, 10vh, 6.5rem); }
.clz-cafe__title { max-width: 11ch; font: 200 clamp(2.8rem, 6.6vw, 6.4rem)/.96 var(--font-display); letter-spacing: -.035em; }
.clz-cafe__body { max-width: 50ch; margin-top: 1.6rem; font-size: clamp(1rem, 1.15vw, 1.12rem); line-height: 1.75; color: rgba(255,255,255,.88); }

/* ---------- nastro ---------- */
.clz-marq { background: var(--warm); }
.clz-marq span { font-style: normal; }

/* ---------- chiusura ---------- */
.clz-close { background: var(--warm); padding-block: clamp(4rem, 9vw, 8rem) clamp(5rem, 11vw, 9rem); }
.clz-close__inner { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(2rem, 6vw, 6rem); align-items: end; }
.clz-close__text { font: 200 clamp(2rem, 4vw, 3.8rem)/1.1 var(--font-display); letter-spacing: -.02em; color: var(--ink); }
.clz-close__text b { font-weight: 400; color: var(--teal-deep); }
.clz-close__side { display: flex; flex-direction: column; align-items: flex-start; gap: 2rem; }
.clz-close__lead { font-size: 1.06rem; line-height: 1.7; color: var(--grey); }

/* ---------- telefono ---------- */
@media (max-width: 900px) {
  .clz-duo__stage { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto !important; height: auto; gap: 1rem; padding-block: 4.5rem; }
  .clz-duo__text { grid-column: 1 / -1; grid-row: 1; padding-bottom: 2rem; }
  .clz-duo__col { padding-block: 0; }
  .clz-duo__col--up { grid-column: 1; grid-row: 2; }
  .clz-duo__col--down { grid-column: 2; grid-row: 2; margin-top: 4rem; }
  @media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) {
    .clz-duo { height: auto; }
    .clz-duo__stage { position: relative; height: auto; overflow: visible; }
    .clz-duo__col { animation: clzDrift linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    .clz-duo__col--down { animation-direction: reverse; }
    @keyframes clzDrift { from { transform: translateY(6vh); } to { transform: translateY(-6vh); } }
  } }
  .clz-cafe { height: 92svh; }
  .clz-close__inner { grid-template-columns: 1fr; }
}