/* =========================================================================
   Savorita Journey ("Your journey starts here"), variante Combinata
   Specifica: docs/home-2027.md §4 · Mockup: mockups/home-journey/

   Regole di scrittura: radice .sv-jr.sv-jr; responsive a contenitore. Da
   1000 le porte, sotto 1000 la domanda (il tablet verticale è un telefono
   grande). Niente !important su display. I link si vestono da data-sjr.

   data-seg sul contenitore = la scelta della pagina (vuoto: nessuna).
   is-anim sul contenitore = c'è lo script: solo allora i vantaggi partono
   nascosti per entrare a impulsi.
   ========================================================================= */

.sv-jr.sv-jr{
  --sj-green:#087F23; --sj-green-d:#054a15; --sj-green-soft:#e6f4e9; --sj-ink:#293241; --sj-ink-2:#5d6675; --sj-ink-3:#8a93a0;
  --sj-yellow:#FFCC37; --sj-paper:#F7F6FE; --sj-line:#dde2e6; --sj-line-2:#c6cdd4;
  --sj-font:Nunito, "Nunito Sans", system-ui, sans-serif;
  --sj-out:cubic-bezier(.2,.8,.2,1); --sj-ease:cubic-bezier(.7,0,.2,1);
  --sj-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(--sj-font); -webkit-font-smoothing:antialiased; text-align:left; color:var(--sj-ink);
}
.sv-jr.sv-jr *,
.sv-jr.sv-jr *::before,
.sv-jr.sv-jr *::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-jr.sv-jr .x),
   così in hover i bottoni tengono solo lo sfondo e il bordo che dichiarano (0.10.1) */
html .sv-jr.sv-jr 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;
  white-space:normal; /* il tema (Hello Elementor) dà nowrap a tutti i bottoni */
  -webkit-tap-highlight-color:transparent;
}
.sv-jr.sv-jr :focus-visible{ outline:3px solid var(--sj-yellow); outline-offset:3px; border-radius:8px; }
.sv-jr.sv-jr-wrap{ container-type:inline-size; container-name:svjr; width:100%; }

.sv-jr.sv-jr .sjr-sec{ padding:clamp(48px,8vh,96px) var(--sj-pad); background:#fff; scroll-margin-top:var(--sv-bar-h); }
.sv-jr.sv-jr .sjr-in{ max-width:1240px; margin:0 auto; display:grid; gap:clamp(24px,4vh,44px); }
.sv-jr.sv-jr .sjr-in > *{ min-width:0; }
.sv-jr.sv-jr .sjr-head h2{ margin:0; font-family:var(--sj-font); font-weight:900; font-size:clamp(32px,4.2cqw,56px); letter-spacing:-.03em; line-height:1.02; color:var(--sj-ink); text-transform:none; }
.sv-jr.sv-jr .sjr-head p{ margin:10px 0 0; font-weight:700; font-size:clamp(16px,1.4cqw,20px); color:var(--sj-green); }
.sv-jr.sv-jr .sjr-main{ display:grid; gap:20px; }
.sv-jr.sv-jr .sjr-ask{ margin:0; font-weight:900; font-size:clamp(22px,2.2cqw,30px); letter-spacing:-.02em; color:var(--sj-ink); transition:opacity .25s ease; scroll-margin-top:calc(var(--sv-bar-h) + 16px); }

/* ---------- un vantaggio (titoletto, testo, "How we do it") ---------- */
.sv-jr.sv-jr .sjr-b{ display:grid; gap:6px; min-width:0; }
.sv-jr.sv-jr .sjr-b h3{ margin:0; font-family:var(--sj-font); font-weight:900; font-size:clamp(19px,1.7cqw,24px); letter-spacing:-.015em; line-height:1.15; color:var(--sj-ink); text-transform:none; }
.sv-jr.sv-jr .sjr-b p{ margin:0; font-size:clamp(15px,1.2cqw,17px); font-weight:600; line-height:1.5; color:var(--sj-ink-2); }
.sv-jr.sv-jr a[data-sjr="how"]{ justify-self:start; display:inline-flex; align-items:center; gap:6px; font-weight:800; font-size:13.5px; color:var(--sj-green); text-decoration:none; margin-top:4px; }
.sv-jr.sv-jr a[data-sjr="how"] svg{ width:14px; height:14px; transition:transform .3s var(--sj-out); }
.sv-jr.sv-jr a[data-sjr="how"]:hover svg{ transform:translateX(3px); }

/* ---------- il bottone del test ---------- */
.sv-jr.sv-jr .sjr-acts{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px; }
.sv-jr.sv-jr a[data-sjr="test"]{
  display:inline-flex; align-items:center; gap:16px; text-align:left; max-width:100%;
  background:var(--sj-green); color:#fff; border-radius:20px; padding:16px 22px 16px 16px; text-decoration:none;
  box-shadow:0 18px 36px -18px rgba(8,127,35,.85); transition:transform .35s var(--sj-out), background .3s;
}
.sv-jr.sv-jr a[data-sjr="test"]:hover{ transform:translateY(-2px); background:var(--sj-green-d); color:#fff; }
.sv-jr.sv-jr a[data-sjr="test"] .ti{ flex:none; width:48px; height:48px; border-radius:14px; background:rgba(255,255,255,.16); display:grid; place-items:center; }
.sv-jr.sv-jr a[data-sjr="test"] .ti svg{ width:26px; height:26px; }
.sv-jr.sv-jr a[data-sjr="test"] b{ display:block; font-weight:900; font-size:clamp(17px,1.4cqw,19px); letter-spacing:-.01em; line-height:1.2; }
.sv-jr.sv-jr a[data-sjr="test"] small{ display:block; font-weight:700; font-size:14px; line-height:1.3; opacity:.85; margin-top:2px; }
.sv-jr.sv-jr a[data-sjr="test"] > svg{ flex:none; width:20px; height:20px; margin-left:6px; transition:transform .35s var(--sj-out); }
.sv-jr.sv-jr a[data-sjr="test"]:hover > svg{ transform:translateX(4px); }

.sv-jr.sv-jr .sjr-empty{ display:grid; place-items:center; background:#e6e3ef; border:2px dashed rgba(41,50,65,.35); color:var(--sj-ink); font-weight:800; font-size:12px; }

/* =========================================================================
   Le porte (da 1000)
   ========================================================================= */
.sv-jr.sv-jr .sjr-doors{ display:flex; gap:14px; height:clamp(460px,66vh,640px); }
.sv-jr.sv-jr .sjr-door{ position:relative; flex:1 1 0; min-width:0; display:flex; border-radius:26px; overflow:hidden; background:var(--sj-paper); transition:flex-grow .85s var(--sj-ease); }
.sv-jr.sv-jr-wrap:not([data-seg=""]) .sjr-door{ flex-grow:.55; }
.sv-jr.sv-jr-wrap[data-seg="restaurant"] .sjr-door[data-seg="restaurant"],
.sv-jr.sv-jr-wrap[data-seg="store"] .sjr-door[data-seg="store"]{ flex-grow:5; }
.sv-jr.sv-jr .sjr-face{ position:relative; flex:1 1 100%; min-width:0; color:#fff; text-align:left; transition:flex-basis .85s var(--sj-ease); }
.sv-jr.sv-jr .sjr-face-img{ position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover; transition:transform 1.2s var(--sj-out); }
.sv-jr.sv-jr .sjr-face:hover .sjr-face-img{ transform:scale(1.04); }
.sv-jr.sv-jr .sjr-face::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(20,26,36,.82) 0%,rgba(20,26,36,.2) 55%,rgba(20,26,36,0) 75%); }
.sv-jr.sv-jr .sjr-face-l{ position:absolute; z-index:1; left:26px; right:26px; bottom:24px; display:grid; gap:6px; transition:opacity .4s; }
.sv-jr.sv-jr .sjr-face-l small{ font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; opacity:.75; }
.sv-jr.sv-jr .sjr-face-l b{ font-weight:900; font-size:clamp(24px,2.6cqw,38px); letter-spacing:-.02em; line-height:1.05; overflow-wrap:break-word; transition:font-size .5s var(--sj-ease); }
.sv-jr.sv-jr .sjr-face-l span{ display:inline-flex; align-items:center; gap:8px; margin-top:6px; font-weight:800; font-size:14px; max-height:30px; overflow:hidden; transition:opacity .3s, max-height .5s var(--sj-ease), margin-top .5s var(--sj-ease); }
.sv-jr.sv-jr .sjr-face-l span i{ width:30px; height:30px; border-radius:50%; background:var(--sj-yellow); color:var(--sj-ink); display:grid; place-items:center; font-style:normal; }
.sv-jr.sv-jr .sjr-vert{ position:absolute; z-index:1; left:50%; bottom:26px; transform:translateX(-50%) rotate(180deg); writing-mode:vertical-rl; font-weight:900; font-size:17px; white-space:nowrap; opacity:0; transition:opacity .4s; }
.sv-jr.sv-jr-wrap:not([data-seg=""]) .sjr-door .sjr-face-l{ opacity:0; }
.sv-jr.sv-jr-wrap:not([data-seg=""]) .sjr-door .sjr-vert{ opacity:1; transition-delay:.4s; }
.sv-jr.sv-jr .sjr-body{ flex:0 0 0; min-width:0; overflow:hidden; background:#fff; border:2px solid var(--sj-line); border-left:0; border-radius:0 26px 26px 0; opacity:0; transition:flex-basis .85s var(--sj-ease), opacity .4s; }
.sv-jr.sv-jr .sjr-body-in{ height:100%; overflow:auto; padding:clamp(22px,3cqw,40px); display:flex; flex-direction:column; justify-content:center; gap:clamp(16px,2.6vh,26px); min-width:420px; }
.sv-jr.sv-jr .sjr-title{ font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--sj-ink-3); }
.sv-jr.sv-jr .sjr-rows{ display:grid; gap:clamp(12px,2.2vh,20px); }
.sv-jr.sv-jr .sjr-row{ display:grid; grid-template-columns:64px minmax(0,1fr); gap:16px; align-items:start; }
.sv-jr.sv-jr .sjr-row > img,
.sv-jr.sv-jr .sjr-row > .sjr-empty{ width:64px; height:64px; max-width:none; border-radius:14px; object-fit:cover; }

/* la porta scelta: foto a sinistra, contenuto a destra */
.sv-jr.sv-jr-wrap[data-seg="restaurant"] .sjr-door[data-seg="restaurant"] .sjr-face,
.sv-jr.sv-jr-wrap[data-seg="store"] .sjr-door[data-seg="store"] .sjr-face{ flex-basis:40%; }
.sv-jr.sv-jr-wrap[data-seg="restaurant"] .sjr-door[data-seg="restaurant"] .sjr-body,
.sv-jr.sv-jr-wrap[data-seg="store"] .sjr-door[data-seg="store"] .sjr-body{ flex-basis:60%; opacity:1; transition:flex-basis .85s var(--sj-ease), opacity .5s ease .45s; }
.sv-jr.sv-jr-wrap[data-seg="restaurant"] .sjr-door[data-seg="restaurant"] .sjr-face-l,
.sv-jr.sv-jr-wrap[data-seg="store"] .sjr-door[data-seg="store"] .sjr-face-l{ opacity:1; }
/* la foto è stretta: titolo più piccolo (va a capo), e "Open" sparisce perché la porta è già aperta */
.sv-jr.sv-jr-wrap[data-seg="restaurant"] .sjr-door[data-seg="restaurant"] .sjr-face-l b,
.sv-jr.sv-jr-wrap[data-seg="store"] .sjr-door[data-seg="store"] .sjr-face-l b{ font-size:clamp(22px,2cqw,28px); }
.sv-jr.sv-jr-wrap[data-seg="restaurant"] .sjr-door[data-seg="restaurant"] .sjr-face-l span,
.sv-jr.sv-jr-wrap[data-seg="store"] .sjr-door[data-seg="store"] .sjr-face-l span{ max-height:0; margin-top:-6px; opacity:0; }
.sv-jr.sv-jr-wrap[data-seg="restaurant"] .sjr-door[data-seg="restaurant"] .sjr-vert,
.sv-jr.sv-jr-wrap[data-seg="store"] .sjr-door[data-seg="store"] .sjr-vert{ opacity:0; }

/* =========================================================================
   La domanda (sotto 1000)
   ========================================================================= */
.sv-jr.sv-jr .sjr-q{ display:none; gap:clamp(22px,4vh,40px); }
.sv-jr.sv-jr .sjr-choose{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.sv-jr.sv-jr .sjr-opt{
  display:flex; flex-direction:column; align-items:flex-start; gap:10px; text-align:left;
  border:2px solid var(--sj-line); border-radius:20px; padding:14px; background:#fff;
  transition:border-color .3s, background .3s, opacity .3s, transform .3s var(--sj-out);
}
.sv-jr.sv-jr .sjr-opt[aria-pressed="true"]{ border-color:var(--sj-green); background:var(--sj-green-soft); }
.sv-jr.sv-jr .sjr-opt .ic{ flex:none; width:42px; height:42px; border-radius:14px; background:var(--sj-paper); display:grid; place-items:center; color:var(--sj-ink-2); transition:background .3s, color .3s; }
.sv-jr.sv-jr .sjr-opt[aria-pressed="true"] .ic{ background:var(--sj-green); color:#fff; }
.sv-jr.sv-jr .sjr-opt .ic svg{ width:26px; height:26px; }
.sv-jr.sv-jr .sjr-opt b{ display:block; font-weight:900; font-size:clamp(17px,2.4cqw,21px); letter-spacing:-.01em; line-height:1.2; }
.sv-jr.sv-jr .sjr-opt small{ display:block; font-size:12px; font-weight:700; color:var(--sj-ink-3); margin-top:2px; }
.sv-jr.sv-jr-wrap:not([data-seg=""]) .sjr-opt[aria-pressed="false"]{ opacity:.7; }

.sv-jr.sv-jr .sjr-path{ display:none; gap:clamp(22px,4vh,40px); }
.sv-jr.sv-jr-wrap[data-seg="restaurant"] .sjr-path[data-seg="restaurant"],
.sv-jr.sv-jr-wrap[data-seg="store"] .sjr-path[data-seg="store"]{ display:grid; }
.sv-jr.sv-jr .sjr-list{ display:grid; gap:clamp(18px,3vh,30px); max-width:860px; }
.sv-jr.sv-jr .sjr-li{ display:grid; grid-template-columns:64px minmax(0,1fr); gap:14px; align-items:center; }
.sv-jr.sv-jr .sjr-li > img,
.sv-jr.sv-jr .sjr-li > .sjr-empty{ width:64px; height:64px; max-width:none; border-radius:50%; object-fit:cover; box-shadow:0 0 0 0 rgba(255,204,55,.7); }
/* entrano a impulsi (solo con lo script: senza, si vedono subito) */
.sv-jr.sv-jr.is-anim .sjr-li{ opacity:0; transform:translateY(16px); }
.sv-jr.sv-jr.is-anim .sjr-li.on{ opacity:1; transform:none; transition:opacity .6s ease, transform .7s var(--sj-out); }
.sv-jr.sv-jr.is-anim .sjr-li.on > img{ animation:sjr-pulse .9s var(--sj-out); }
@keyframes sjr-pulse{ 0%{ box-shadow:0 0 0 0 rgba(255,204,55,.75); } 100%{ box-shadow:0 0 0 14px rgba(255,204,55,0); } }
.sv-jr.sv-jr.is-anim .sjr-qacts{ opacity:0; transition:opacity .6s ease; }
.sv-jr.sv-jr.is-anim .sjr-qacts.on{ opacity:1; }

@container svjr (max-width:999px){
  .sv-jr.sv-jr .sjr-doors{ display:none; }
  .sv-jr.sv-jr .sjr-q{ display:grid; }
  .sv-jr.sv-jr .sjr-main{ gap:22px; }
  /* dopo la scelta le due risposte diventano una barra compatta */
  .sv-jr.sv-jr-wrap:not([data-seg=""]) .sjr-choose{ gap:4px; background:#fff; border:1px solid var(--sj-line); border-radius:14px; padding:4px; }
  .sv-jr.sv-jr-wrap:not([data-seg=""]) .sjr-opt{ flex-direction:row; align-items:center; gap:8px; padding:8px 10px; border-width:0; border-radius:10px; transform:none; }
  .sv-jr.sv-jr-wrap:not([data-seg=""]) .sjr-opt .ic{ width:28px; height:28px; border-radius:8px; }
  .sv-jr.sv-jr-wrap:not([data-seg=""]) .sjr-opt .ic svg{ width:16px; height:16px; }
  .sv-jr.sv-jr-wrap:not([data-seg=""]) .sjr-opt b{ font-size:14px; }
  .sv-jr.sv-jr-wrap:not([data-seg=""]) .sjr-opt small{ display:none; }
  /* il bottone del test resta agganciato in basso finché non arriva al suo posto */
  .sv-jr.sv-jr .sjr-qacts{ position:sticky; bottom:calc(12px + env(safe-area-inset-bottom,0px)); z-index:5; }
  .sv-jr.sv-jr .sjr-qacts a[data-sjr="test"]{ width:100%; padding:14px 16px 14px 12px; gap:12px; box-shadow:0 18px 36px -12px rgba(8,127,35,.7), 0 0 0 6px #fff; }
  .sv-jr.sv-jr .sjr-qacts a[data-sjr="test"] .ti{ width:42px; height:42px; }
}
/* tablet verticale: lo stesso, più largo */
@container svjr (min-width:700px) and (max-width:999px){
  .sv-jr.sv-jr .sjr-opt{ flex-direction:row; align-items:center; gap:14px; padding:18px 20px; }
  .sv-jr.sv-jr .sjr-opt .ic{ width:52px; height:52px; }
  .sv-jr.sv-jr .sjr-li{ grid-template-columns:96px minmax(0,1fr); gap:22px; }
  .sv-jr.sv-jr .sjr-li > img,
  .sv-jr.sv-jr .sjr-li > .sjr-empty{ width:96px; height:96px; }
  .sv-jr.sv-jr .sjr-qacts a[data-sjr="test"]{ width:auto; }
}

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