/* =========================================================================
   Savorita Services ("This is savorita") e LA scheda del servizio
   Specifica: docs/home-2027.md §5 · Mockup: mockups/home-journey/

   Regole di scrittura: radice .sv-srv.sv-srv (anche il pannello a tutto
   schermo, spostato nel body, la porta addosso); responsive a contenitore,
   sotto 1000 una colonna (il tablet verticale è un telefono grande); niente
   !important su display; chiuso vuol dire spento. I link si vestono da
   data-sv, non dalla classe.

   Chi vede quali schede lo decide data-seg sul contenitore (vuoto = nessuna
   scelta: tutte, con le etichette).
   ========================================================================= */

.sv-srv.sv-srv{
  --sv-s-green:#087F23; --sv-s-green-d:#054a15; --sv-s-ink:#293241; --sv-s-ink-2:#5d6675; --sv-s-ink-3:#8a93a0;
  --sv-s-yellow:#FFCC37; --sv-s-paper:#F7F6FE; --sv-s-line:#dde2e6; --sv-s-line-2:#c6cdd4;
  --sv-s-font:Nunito, "Nunito Sans", system-ui, sans-serif;
  --sv-s-out:cubic-bezier(.2,.8,.2,1);
  --sv-s-pad:clamp(16px,4vw,64px);
  line-height:1.4; /* il kit dà al body un'interlinea fissa (30px) che i testi piccoli erediterebbero */
  font-family:var(--sv-s-font); -webkit-font-smoothing:antialiased; text-align:left; color:var(--sv-s-ink);
}
.sv-srv.sv-srv *,
.sv-srv.sv-srv *::before,
.sv-srv.sv-srv *::after{ box-sizing:border-box; }
/* "html" in testa: un gradino sopra il kit di Elementor (.elementor-kit-N button:hover/:focus,
   che a ogni bottone dà sfondo e bordo verdi), sotto le nostre classi (.sv-srv.sv-srv .x),
   così in hover i bottoni tengono solo lo sfondo e il bordo che dichiarano (0.10.1) */
html .sv-srv.sv-srv button{
  font:inherit; color:inherit; background:none; border:0; padding:0; margin:0; cursor:pointer;
  box-shadow:none; text-transform:none; letter-spacing:inherit; line-height:inherit; min-height:0;
}
.sv-srv.sv-srv :focus-visible{ outline:3px solid var(--sv-s-yellow); outline-offset:3px; border-radius:8px; }

.sv-srv.sv-srv-wrap{ container-type:inline-size; container-name:svsrv; width:100%; }

/* ---------- sezione ---------- */
.sv-srv.sv-srv .ssv-sec{ background:var(--sv-s-paper); padding:clamp(48px,8vh,96px) var(--sv-s-pad); overflow-x:clip; scroll-margin-top:var(--sv-bar-h); }
.sv-srv.sv-srv .ssv-in{ max-width:1240px; margin:0 auto; display:grid; gap:clamp(20px,3.4vh,36px); }
.sv-srv.sv-srv .ssv-in > *{ min-width:0; }
.sv-srv.sv-srv .ssv-eb{ display:inline-flex; align-items:center; gap:10px; font-size:12.5px; font-weight:900; letter-spacing:.14em; text-transform:uppercase; color:var(--sv-s-green); }
.sv-srv.sv-srv .ssv-eb img{ width:30px; height:30px; max-width:none; }
.sv-srv.sv-srv .ssv-head h2{ margin:6px 0 0; font-family:var(--sv-s-font); font-weight:900; font-size:clamp(28px,3.4cqw,44px); letter-spacing:-.025em; line-height:1.05; color:var(--sv-s-ink); text-transform:none; }
.sv-srv.sv-srv .ssv-head p{ margin:8px 0 0; font-weight:700; color:var(--sv-s-ink-2); }
.sv-srv.sv-srv .ssv-bar{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; }
.sv-srv.sv-srv .ssv-switch{ display:inline-flex; gap:4px; background:#fff; border:1px solid var(--sv-s-line); border-radius:999px; padding:4px; }
.sv-srv.sv-srv .ssv-switch button{ padding:10px 18px; border-radius:999px; font-weight:800; font-size:14px; color:var(--sv-s-ink-2); transition:background .3s, color .3s; }
.sv-srv.sv-srv .ssv-switch button[aria-pressed="true"]{ background:var(--sv-s-ink); color:#fff; }
.sv-srv.sv-srv .ssv-remember{ font-size:12.5px; font-weight:700; color:var(--sv-s-ink-3); }
.sv-srv.sv-srv-wrap[data-seg=""] .ssv-remember{ visibility:hidden; }

/* chi vede quali schede */
.sv-srv.sv-srv-wrap[data-seg="restaurant"] .svS .sv-card[data-for="store"],
.sv-srv.sv-srv-wrap[data-seg="store"] .svS .sv-card[data-for="restaurant"]{ display:none; }
.sv-srv.sv-srv-wrap:not([data-seg=""]) .sv-tags{ display:none; }

/* =========================================================================
   LA scheda del servizio (usata anche dal pannello a tutto schermo)
   ========================================================================= */
.sv-srv.sv-srv .sv-card{
  --bg:#fff; --fg:var(--sv-s-ink); --mut:var(--sv-s-ink-2); --cta:var(--sv-s-green); --ctafg:#fff; --tag:var(--sv-s-ink); --tagfg:#fff;
  background:var(--bg); color:var(--fg); scroll-margin-top:calc(var(--sv-bar-h) + 20px);
}
.sv-srv.sv-srv .sv-card.t-paper{ --bg:var(--sv-s-paper); }
.sv-srv.sv-srv .sv-card.t-green{ --bg:linear-gradient(150deg,#0a8f28 0%,var(--sv-s-green) 40%,var(--sv-s-green-d) 100%); --fg:#fff; --mut:rgba(255,255,255,.88); --cta:var(--sv-s-yellow); --ctafg:var(--sv-s-ink); --tag:#fff; --tagfg:var(--sv-s-green); }
.sv-srv.sv-srv .sv-card.t-ink{ --bg:linear-gradient(160deg,#1d2430 0%,var(--sv-s-ink) 100%); --fg:#fff; --mut:rgba(255,255,255,.85); --cta:var(--sv-s-yellow); --ctafg:var(--sv-s-ink); --tag:var(--sv-s-yellow); --tagfg:var(--sv-s-ink); }
.sv-srv.sv-srv .sv-card.t-it{ --bg:#fff; --tag:#fff; --tagfg:var(--sv-s-ink); }
.sv-srv.sv-srv .sv-tx{ display:grid; gap:14px; align-content:center; padding:clamp(26px,4cqw,60px); }
.sv-srv.sv-srv .sv-tags{ display:flex; flex-wrap:wrap; gap:6px; }
.sv-srv.sv-srv .sv-tag{ border-radius:8px; padding:6px 12px; font-size:12px; font-weight:900; letter-spacing:.1em; text-transform:uppercase; background:var(--tag); color:var(--tagfg); }
.sv-srv.sv-srv .t-it .sv-tag{ border:1.5px solid var(--sv-s-line-2); }
.sv-srv.sv-srv .sv-ti{ display:flex; align-items:center; gap:14px; }
.sv-srv.sv-srv .sv-ti img{ width:42px; height:42px; max-width:none; flex:none; }
.sv-srv.sv-srv .sv-card h3{ margin:0; font-family:var(--sv-s-font); font-weight:900; font-size:clamp(26px,2.6cqw,40px); letter-spacing:-.025em; line-height:1.05; text-wrap:balance; color:var(--fg); text-transform:none; }
.sv-srv.sv-srv .sv-card p{ margin:0; font-size:clamp(16px,1.25cqw,18px); line-height:1.6; color:var(--mut); max-width:58ch; }
.sv-srv.sv-srv .sv-card p b{ color:var(--fg); font-weight:900; }
.sv-srv.sv-srv .sv-card p.small{ font-size:14px; font-weight:700; color:var(--fg); opacity:.85; }
.sv-srv.sv-srv .sv-card a[data-sv="cta"]{
  justify-self:start; display:inline-flex; align-items:center; gap:10px; background:var(--cta); color:var(--ctafg);
  border-radius:999px; padding:15px 24px; font-weight:900; font-size:15px; line-height:1.1; text-decoration:none; margin-top:6px;
  transition:transform .3s var(--sv-s-out), filter .3s;
}
.sv-srv.sv-srv .sv-card a[data-sv="cta"]:hover{ transform:translateY(-2px); filter:brightness(1.06); color:var(--ctafg); }
.sv-srv.sv-srv .sv-card a[data-sv="cta"] svg{ width:16px; height:16px; transition:transform .3s var(--sv-s-out); }
.sv-srv.sv-srv .sv-card a[data-sv="cta"]:hover svg{ transform:translateX(4px); }
.sv-srv.sv-srv .sv-ph{ position:relative; overflow:hidden; min-height:300px; }
.sv-srv.sv-srv .sv-ph img{ position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover; }
.sv-srv.sv-srv .t-it .sv-tx{ border-top:6px solid; border-image:linear-gradient(90deg,#009246 0 33.3%,#fff 33.3% 66.6%,#ce2b37 66.6%) 1; }
.sv-srv.sv-srv .sv-empty{ position:absolute; inset:0; display:grid; place-items:center; padding:12px; border:2px dashed rgba(41,50,65,.35); color:var(--sv-s-ink); font-weight:800; font-size:13px; text-align:center; background:#e6e3ef; }
.sv-srv.sv-srv .is-missing{ outline:1.5px dashed #EC1B30; outline-offset:2px; opacity:.7; cursor:help; }

/* ---------- stile Scena: foto e testo alternati, la foto si avvicina all'arrivo ---------- */
.sv-srv.sv-srv .svS{ display:grid; gap:18px; }
.sv-srv.sv-srv .svS .sv-card{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); min-height:clamp(480px,74vh,700px); border-radius:28px; overflow:hidden; }
.sv-srv.sv-srv .svS .sv-card.is-alt .sv-ph{ order:2; }
.sv-srv.sv-srv .svS .sv-ph img{ transform:scale(1.14); transition:transform 1.8s var(--sv-s-out); }
.sv-srv.sv-srv .svS .sv-card.in .sv-ph img{ transform:none; }
.sv-srv.sv-srv.is-anim .svS .sv-tx > *{ opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .8s var(--sv-s-out); }
.sv-srv.sv-srv.is-anim .svS .sv-card.in .sv-tx > *{ opacity:1; transform:none; }
.sv-srv.sv-srv .svS .sv-card.in .sv-tx > *:nth-child(2){ transition-delay:.08s; }
.sv-srv.sv-srv .svS .sv-card.in .sv-tx > *:nth-child(3){ transition-delay:.16s; }
.sv-srv.sv-srv .svS .sv-card.in .sv-tx > *:nth-child(4){ transition-delay:.24s; }
.sv-srv.sv-srv .svS .sv-card.in .sv-tx > *:nth-child(5){ transition-delay:.32s; }
.sv-srv.sv-srv .svS .sv-card.in .sv-tx > *:nth-child(n+6){ transition-delay:.4s; }

/* ---------- stile Tutto schermo: foto da bordo a bordo, testo su pannello pieno ---------- */
.sv-srv.sv-srv .svFull{ gap:0; }
.sv-srv.sv-srv .svFull .sv-card{
  position:relative; display:flex; align-items:center; width:100vw; margin-left:calc(50% - 50vw);
  min-height:clamp(620px,92vh,880px); border-radius:0; overflow:hidden; background:var(--sv-s-ink);
}
.sv-srv.sv-srv .svFull .sv-ph{ position:absolute; inset:0; min-height:0; }
.sv-srv.sv-srv .svFull .sv-ph img{ top:-9%; height:118%; transform:none; transition:none; will-change:transform; }
.sv-srv.sv-srv .svFull .sv-tx{
  position:relative; z-index:1; width:min(580px, calc(100% - 2 * var(--sv-s-pad)));
  margin:clamp(56px,10vh,110px) auto clamp(56px,10vh,110px) max(var(--sv-s-pad), calc(50vw - 620px));
  background:var(--bg); border-radius:24px; box-shadow:0 34px 70px -30px rgba(0,0,0,.7);
}
.sv-srv.sv-srv .svFull .sv-card.is-alt .sv-tx{ margin-left:auto; margin-right:max(var(--sv-s-pad), calc(50vw - 620px)); }

/* ---------- sotto 1000: una colonna ---------- */
@container svsrv (max-width:999px){
  .sv-srv.sv-srv .svS .sv-card{ grid-template-columns:1fr; min-height:0; }
  .sv-srv.sv-srv .svS .sv-card.is-alt .sv-ph{ order:0; }
  .sv-srv.sv-srv .sv-ph{ min-height:0; aspect-ratio:16/10; }
  .sv-srv.sv-srv .svFull .sv-card{ display:block; min-height:0; }
  .sv-srv.sv-srv .svFull .sv-ph{ position:relative; height:30vh; min-height:190px; max-height:260px; aspect-ratio:auto; width:100%; }
  .sv-srv.sv-srv .svFull .sv-tx,
  .sv-srv.sv-srv .svFull .sv-card.is-alt .sv-tx{ width:auto; margin:-56px 16px 28px; }
}

/* =========================================================================
   Pannello a tutto schermo ("How we do it" dalla Journey)
   ========================================================================= */
.sv-srv.svm{
  container-type:inline-size; container-name:svsvm;
  position:fixed; inset:0; z-index:var(--sv-z-fs, 2147483000);
  display:flex; align-items:center; overflow:hidden; background:#141a22;
  opacity:0; transition:opacity .4s ease; pointer-events:none;
}
.sv-srv.svm.open{ opacity:1; pointer-events:auto; }
.sv-srv.sv-srv .svm-bg{ position:absolute; inset:0; }
.sv-srv.sv-srv .svm-bg img{ width:100%; height:100%; max-width:none; object-fit:cover; transform:scale(1.14); transition:transform 1.6s var(--sv-s-out); }
.sv-srv.svm.open .svm-bg img{ transform:none; }
.sv-srv.sv-srv .svm-bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(20,26,34,.55) 0%,rgba(20,26,34,.15) 60%,rgba(20,26,34,.35) 100%); }
.sv-srv.sv-srv .svm-x{
  position:absolute; z-index:3; top:calc(18px + env(safe-area-inset-top,0px)); right:calc(18px + env(safe-area-inset-right,0px));
  width:48px; height:48px; border-radius:50%; display:grid; place-items:center; color:#fff;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.35); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.sv-srv.sv-srv .svm-x svg{ width:20px; height:20px; }
.sv-srv.sv-srv .svm-in{
  position:relative; z-index:2; width:min(640px, calc(100% - 2 * var(--sv-s-pad))); max-height:calc(100% - 120px);
  margin-left:max(var(--sv-s-pad), calc(50cqw - 600px)); display:flex; flex-direction:column; border-radius:26px; overflow:hidden;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.75); transform:translateY(40px); opacity:0;
  transition:transform .8s var(--sv-s-out) .15s, opacity .5s ease .15s;
}
.sv-srv.svm.open .svm-in{ transform:none; opacity:1; }
.sv-srv.sv-srv .svm-in .sv-card{ overflow:auto; background:var(--bg); }
.sv-srv.sv-srv .svm-in .sv-tx{ padding:clamp(26px,3.4cqw,48px); }
.sv-srv.sv-srv .svm-more{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:14px clamp(26px,3.4cqw,48px); background:#fff; border-top:1px solid var(--sv-s-line); }
.sv-srv.sv-srv .svm-more span{ font-size:11px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; color:var(--sv-s-ink-3); margin-right:4px; }
.sv-srv.sv-srv .svm-more button{ border:1.5px solid var(--sv-s-line-2); border-radius:999px; padding:7px 12px; font-weight:800; font-size:13px; color:var(--sv-s-ink-2); background:#fff; }
.sv-srv.sv-srv .svm-more button:hover{ border-color:var(--sv-s-ink); color:var(--sv-s-ink); }
@container svsvm (max-width:699px){
  .sv-srv.sv-srv .svm-in{
    width:100%; margin:0; align-self:flex-end;
    max-height:calc(100% - 96px - env(safe-area-inset-top,0px)); border-radius:24px 24px 0 0;
    padding-bottom:env(safe-area-inset-bottom,0px); background:#fff;
  }
  .sv-srv.sv-srv .svm-bg::after{ background:linear-gradient(0deg,rgba(20,26,34,.6),rgba(20,26,34,.1) 60%); }
}
html.sv-srv-lock{ overflow:hidden; }

/* corazza e movimento ridotto */
.sv-srv.sv-srv h2,
.sv-srv.sv-srv h3{ font-family:var(--sv-s-font)!important; }
@media (prefers-reduced-motion:reduce){
  .sv-srv.sv-srv *{ transition-duration:1ms!important; animation-duration:1ms!important; animation-delay:0ms!important; }
}

/* chiuso vuol dire spento */
.sv-srv.sv-srv [hidden],
.sv-srv.sv-srv[hidden]{ display:none!important; }