/* =====================================================================
   SERVIZI — corpo della pagina (06/10/2026). Va dopo style.css e fx.css.
   Manifesto · formule in elenco tipografico grande · mosaico approvato · nastro · chiusura su onde
   ===================================================================== */

/* ---------- le formule ---------- */
.sform { background: var(--teal-deep); color: var(--white); padding-block: clamp(5rem, 10vw, 9rem) clamp(4rem, 8vw, 7rem); overflow: hidden; }
.sform__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 2rem 4rem; align-items: end; margin-bottom: clamp(3rem, 6vw, 5rem); }
.sform__title { font: 200 clamp(2.6rem, 5.6vw, 5.4rem)/.98 var(--font-display); letter-spacing: -.035em; max-width: 12ch; }
.sform__lead { font: 300 clamp(1.1rem, 1.5vw, 1.35rem)/1.45 var(--font-display); color: rgba(255,255,255,.8); max-width: 30ch; }
.sform__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(255,255,255,.18); }
.sform__row { position: relative; display: grid; grid-template-columns: 4.5rem minmax(0, 7fr) minmax(0, 4fr); gap: 1rem 2.5rem; align-items: center;
  padding-block: clamp(2rem, 4vw, 3.4rem); isolation: isolate; transition: background-color .6s var(--ease); }
.sform__row::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgba(255,255,255,.18); transform-origin: left; }
.sform__n { align-self: start; padding-top: .9rem; font: 300 .95rem/1 var(--font-display); letter-spacing: .18em; color: var(--sand); transition: color .4s var(--ease); }
.sform__name { position: relative; z-index: 2; font: 200 clamp(2.6rem, 6.2vw, 6.2rem)/.95 var(--font-display); letter-spacing: -.035em;
  transition: transform .8s var(--ease); }
.sform__name span { display: block; }
.sform__name span + span { color: rgba(255,255,255,.55); }
.sform__desc { position: relative; z-index: 2; font-size: 1.02rem; line-height: 1.7; color: rgba(255,255,255,.78); max-width: 38ch; }
/* la foto si apre passando sopra la riga: a metà riga, dietro al nome */
.sform__img { position: absolute; z-index: 1; left: 44%; top: 50%; width: clamp(14rem, 21vw, 21rem); aspect-ratio: 4 / 3; margin: 0; overflow: hidden;
  translate: -50% -50%; clip-path: inset(50% 0 50% 0); transition: clip-path .9s var(--ease); pointer-events: none; }
.sform__img img { width: 100%; height: 100%; object-fit: cover; scale: 1.25; transition: scale 1.2s var(--ease); }
@media (hover: hover) and (min-width: 900px) {
  .sform__row:hover { background-color: rgba(255,255,255,.035); }
  .sform__row:hover .sform__name { transform: translateX(1.4rem); }
  .sform__row:hover .sform__n { color: var(--white); }
  .sform__row:hover .sform__img { clip-path: inset(0 0 0 0); }
  .sform__row:hover .sform__img img { scale: 1; }
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .sform__row::after { animation: sformLine linear both; animation-timeline: view(); animation-range: entry 20% entry 90%; }
    @keyframes sformLine { from { transform: scaleX(0); } }
    .sform__name span { animation: sformName linear both; animation-timeline: view(); animation-range: entry 10% entry 75%; }
    @keyframes sformName { from { opacity: 0; transform: translateY(45%); } }
    .sform__desc, .sform__n { animation: sformDesc linear both; animation-timeline: view(); animation-range: entry 25% entry 90%; }
    @keyframes sformDesc { from { opacity: 0; transform: translateY(24px); } }
  }
}
@media (max-width: 899px) {
  .sform__head { grid-template-columns: 1fr; }
  .sform__row { grid-template-columns: 2.6rem minmax(0, 1fr); gap: 1.2rem 1rem; }
  .sform__desc, .sform__img { grid-column: 2; }
  .sform__img { position: relative; left: auto; top: auto; width: 100%; aspect-ratio: 16 / 10; translate: none; clip-path: none; order: 3; }
  .sform__img img { scale: 1; }
  .sform__name { font-size: clamp(2.2rem, 11vw, 3.4rem); }
}

/* ---------- mosaico: le foto le apre fx.js (data-fx="clip") ---------- */
.svc { padding-bottom: clamp(5rem, 9vw, 8rem); }

/* ---------- nastro su sabbia ---------- */
.smarq { background: var(--sand-pale); border-block: 0; }
.smarq span { color: var(--teal-deep); }
.smarq i { background: var(--teal); }

/* ---------- chiusura ---------- */
.swave__answer { max-width: 22ch; }