/* ============================================================
   EUFORIA — Homepage (Fase 3) — CSS di supporto
   File:   assets/css/home.css  ·  handle: euforia-home
   Server: wp-content/themes/hello-elementor-child/assets/css/home.css
   Carica SOLO sulla front page (functions-home-APPEND.php).
   ------------------------------------------------------------
   NB: tipografia, colori, layout di sezione e responsive sono ora
   IMPOSTATI NATIVAMENTE nei widget/container del template
   (euforia-home-elementor.json). Questa CSS serve SOLO agli interni
   dei pochi widget HTML rimasti (Elementor free non li copre):
   slider Lookbook, form Newsletter, tag sulla foto, placeholder liste.
   Design: mock site-preview/preview-homepage-v2.html.
   ============================================================ */
:root{
  --paper:#FFFFFF; --line:#E8E1D5; --grey:#ECECEA;
  --fucsia:#C42C7B; --ink:#2B2723; --ink-mut:#9C9486;
  --font-d:'Cormorant Garamond',Georgia,serif;
  --font-b:'Quicksand',system-ui,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- LOOKBOOK slider (widget HTML) ---------- */
.euf-lb{position:relative;}
/* frecce prev/next (iniettate da home.js sopra il track, allineate a destra) */
.euf-lb-nav{display:flex;justify-content:flex-end;gap:10px;padding:0 40px 20px;}
.euf-lb-btn{width:46px;height:46px;border-radius:100px;cursor:pointer;
  border:1px solid var(--line);background:var(--paper);color:var(--ink);
  display:grid;place-items:center;padding:0;
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);}
.euf-lb-btn:hover{background:var(--ink);color:#fff;border-color:var(--ink);}
.euf-lb-btn svg{width:18px;height:18px;}
@media(max-width:760px){.euf-lb-nav{display:none;}} /* su mobile si scorre col dito */
/* ⚠️ snap MAI "mandatory" (e niente scroll-behavior:smooth in CSS): con mandatory il
   browser ri-allinea da solo il track mentre le immagini caricano = scroll automatici
   → Chrome interrompe la misurazione LCP al primo scroll = NO_LCP su PageSpeed
   (verificato 12 ago 2026). Lo smooth per le frecce lo passa già home.js in scrollBy. */
.euf-lb-track{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x proximity;
  padding:0 40px 8px;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.euf-lb-track::-webkit-scrollbar{height:0;}
.euf-lb-slide{position:relative;flex:0 0 auto;width:min(78vw,420px);aspect-ratio:4/5;
  scroll-snap-align:start;overflow:hidden;border-radius:3px;display:block;background:var(--grey);}
.euf-lb-slide.euf-lb-wide{width:min(86vw,620px);aspect-ratio:3/2;}
.euf-lb-slide img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease);
  -webkit-user-drag:none;user-select:none;pointer-events:none;}
.euf-lb-slide:hover img{transform:scale(1.05);}
.euf-lb-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:26px 24px;
  background:linear-gradient(to top,rgba(20,38,40,.55),rgba(20,38,40,0) 78%);}
.euf-lb-k{display:block;font-family:var(--font-b);font-size:10px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(255,255,255,.85);margin-bottom:5px;}
.euf-lb-t{display:block;font-family:var(--font-d);font-weight:400;font-size:24px;color:#fff;line-height:1.05;}
.euf-lb-progress{display:flex;align-items:center;padding:24px 40px 0;}
.euf-lb-bar{position:relative;height:2px;width:240px;background:var(--line);border-radius:2px;overflow:hidden;}
.euf-lb-bar-fill{position:absolute;left:0;top:0;height:100%;width:16%;background:var(--ink);
  border-radius:2px;transition:width .25s var(--ease);}
.euf-lb-count{display:none;font-family:var(--font-b);font-size:13px;font-weight:700;
  letter-spacing:.14em;color:var(--ink-mut);}
.euf-lb-count #eufLbCur{color:var(--fucsia);}
@media(max-width:760px){.euf-lb-bar{display:none;}.euf-lb-count{display:block;}}

/* ---------- TAG sulla foto Storytelling (widget HTML) ---------- */
.euf-st-tag{
  position:absolute;left:28px;bottom:28px;z-index:2;
  font-family:var(--font-b);font-size:10px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:#fff;background:rgba(43,39,35,.55);
  backdrop-filter:blur(4px);padding:8px 14px;border-radius:100px;
}

/* ---------- NEWSLETTER form (widget HTML: il Form è Pro) ---------- */
.euf-news-form{display:flex;gap:0;max-width:560px;margin:0 auto;
  border-bottom:1.5px solid rgba(43,39,35,.4);padding-bottom:10px;}
.euf-news-form input{flex:1;background:transparent;border:none;outline:none;
  font-family:var(--font-b);font-size:14px;color:var(--ink);}
.euf-news-form input::placeholder{color:var(--ink-mut);}
.euf-news-form button{font-family:var(--font-b);font-size:11px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;background:var(--ink);color:#fff;border:none;padding:11px 26px;
  border-radius:100px;cursor:pointer;transition:background .25s var(--ease);}
.euf-news-form button:hover{background:var(--fucsia);}
.euf-news-hint{font-family:var(--font-b);font-size:11px;color:var(--ink-mut);letter-spacing:.04em;
  text-align:center;margin-top:14px;}

/* ---------- PLACEHOLDER liste prodotti (temporaneo) ---------- */
.euf-products-placeholder{
  border:1px dashed var(--line);border-radius:4px;background:var(--paper);
  color:var(--ink-mut);font-family:var(--font-b);font-size:13px;letter-spacing:.06em;
  text-transform:uppercase;text-align:center;padding:64px 24px;margin-top:8px;
}

@media(prefers-reduced-motion:reduce){
  .euf-lb-slide img,.euf-lb-bar-fill{transition:none!important;}
}

/* ============================================================
   HERO v2 — immagine REALE (LCP rilevabile) invece del background CSS
   ------------------------------------------------------------
   Vive in un widget HTML dentro il container `.euf-hero` (a cui si
   TOGLIE lo sfondo/overlay nativo di Elementor). L'`<img fetchpriority>`
   è l'elemento più grande → Chrome lo fissa come LCP (i background CSS
   erano rilevati in modo ballerino = NO_LCP). Fondo scuro di fallback:
   il testo oro è leggibile SUBITO, mentre la foto arriva.
   Palette hero: oro brillante #F2D43D / oro pallido #FBE680 / oro caldo
   #E0BC5A / crema #F7EFD8 su blu-notte siciliano #0C2836.
   ============================================================ */
/* --- SEZIONE Elementor a filo (niente strisce bianche, foto a tutto bordo) ---
   Elementor RIMUOVE le classi ai container → l'hero non ha più `.euf-hero`. La sua
   sezione la becchiamo con :has(): la facciamo aderire ESATTA al blocco, così il suo
   min-height 100vh nativo non eccede il widget (era quello il "gap" bianco sopra) e il
   padding laterale sparisce (foto a tutto bordo). */
.e-con.e-parent:has(.euf-herov2){min-height:0!important;padding:0!important;}
.elementor-widget-html:has(.euf-herov2) > .elementor-widget-container{padding:0!important;line-height:normal;}
/* margine sopra l'header (body/wrapper) sulla front page */
html,body{margin:0;}
.home #content,.home .site-main,.home .page-content,.home .elementor-location-header{margin-top:0!important;padding-top:0!important;}

.euf-herov2{position:relative;min-height:100vh;min-height:100svh;
  --euf-hero-focus:50% 45%;           /* ← PUNTO A FUOCO della foto (X Y). Alza/abbassa Y o
                                          sposta X per scegliere cosa resta in campo. */
  display:grid;place-items:center;overflow:hidden;isolation:isolate;
  background:#0C2836;                 /* fallback scuro: testo oro leggibile da subito */
  padding:calc(var(--euf-headH,110px) + 24px) 22px 92px;}

/* immagine hero = LCP: reale, prioritaria, coprente. MAI animazione opacity qui. */
.euf-herov2-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:var(--euf-hero-focus,50% 50%);   /* quale porzione mostrare quando ritaglia */
  z-index:-2;-webkit-user-drag:none;user-select:none;}
/* Vuoi la foto INTERA senza ritaglio? aggiungi la classe `euf-hero--fit` al div .euf-herov2
   → l'immagine entra tutta (margini sul fondo scuro), invece di riempire ritagliando. */
.euf-herov2.euf-hero--fit .euf-herov2-img{object-fit:contain;}

/* overlay gradiente "editoriale": scuro sotto (leggibilità CTA) e in alto (header
   trasparente) + vignettatura morbida; chiaro al centro per far respirare la foto */
.euf-herov2-veil{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    /* scrim di protezione testo: ellisse scura dietro al contenuto centrale, sfuma ai bordi
       → la frase resta leggibile su QUALSIASI foto senza spegnere l'immagine intorno */
    radial-gradient(58% 50% at 50% 55%, rgba(8,20,28,.56) 0%, rgba(8,20,28,.34) 44%, rgba(8,20,28,0) 78%),
    radial-gradient(125% 82% at 50% 40%, rgba(12,40,54,0) 34%, rgba(9,26,36,.46) 100%),
    linear-gradient(180deg, rgba(9,24,32,.60) 0%, rgba(12,34,46,.12) 28%, rgba(12,34,46,.20) 56%, rgba(8,20,28,.78) 100%);}

.euf-herov2-inner{position:relative;z-index:1;max-width:880px;text-align:center;
  display:flex;flex-direction:column;align-items:center;
  animation:eufHeroIn .8s var(--ease) both;}

/* occhiello con pallino oro (il "tocco di colore") */
.euf-herov2-eyebrow{display:inline-flex;align-items:center;gap:9px;margin:0 0 20px;
  font-family:var(--font-b);font-size:11px;font-weight:700;letter-spacing:.3em;
  text-transform:uppercase;color:#FBE680;text-shadow:0 1px 10px rgba(6,16,24,.55);}
.euf-herov2-dot{width:6px;height:6px;border-radius:100px;background:#E0BC5A;
  box-shadow:0 0 0 4px rgba(224,188,90,.18);}

/* titolo: "La Sicilia" (oro brillante, maiuscolo dritto) + "fatta a mano" (corsivo) */
.euf-herov2-title{margin:0;font-family:var(--font-d);line-height:.98;
  text-shadow:0 2px 30px rgba(6,18,26,.5),0 1px 2px rgba(6,18,26,.35);}
.euf-herov2-l1{display:block;font-weight:500;text-transform:uppercase;letter-spacing:.035em;
  color:#F2D43D;font-size:clamp(44px,7.6vw,98px);}
.euf-herov2-l2{display:block;font-weight:400;font-style:italic;color:#FBE680;
  font-size:clamp(34px,5.6vw,74px);margin-top:.03em;}

/* filo oro sfumato */
.euf-herov2-rule{display:block;width:60px;height:2px;margin:26px 0 0;
  background:linear-gradient(90deg,transparent,#E0BC5A 28%,#F2D43D 72%,transparent);}

/* sottotitolo (nuovo — respiro + SEO) */
.euf-herov2-sub{margin:22px 0 0;max-width:512px;font-family:var(--font-b);
  font-size:clamp(14.5px,1.5vw,16px);line-height:1.72;color:#F7EFD8;
  text-shadow:0 1px 3px rgba(6,16,24,.6),0 2px 18px rgba(6,16,24,.5);}

/* CTA: 1 pulsante-fantasma primario (si riempie d'oro all'hover) + 1 link di testo */
.euf-herov2-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 26px;margin-top:34px;}
.euf-herov2-btn{font-family:var(--font-b);font-size:11.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:#F7EFD8;text-decoration:none;border:1px solid rgba(247,239,216,.72);
  border-radius:100px;padding:15px 30px;background:rgba(8,20,28,.14);text-shadow:0 1px 8px rgba(6,16,24,.5);
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease);}
.euf-herov2-btn:hover,.euf-herov2-btn:focus-visible{background:#E0BC5A;border-color:#E0BC5A;color:#2B2723;text-shadow:none;transform:translateY(-1px);outline:none;}
.euf-herov2-link{display:inline-flex;align-items:center;gap:8px;position:relative;padding:6px 2px;
  font-family:var(--font-b);font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:#F7EFD8;text-decoration:none;text-shadow:0 1px 8px rgba(6,16,24,.5);transition:color .25s var(--ease);}
.euf-herov2-link svg{width:17px;height:17px;transition:transform .25s var(--ease);}
.euf-herov2-link::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:#E0BC5A;
  transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease);}
.euf-herov2-link:hover{color:#FBE680;}
.euf-herov2-link:hover::after{transform:scaleX(1);}
.euf-herov2-link:hover svg{transform:translateX(4px);}

@keyframes eufHeroIn{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:none;}}

@media(max-width:600px){
  /* riempi TUTTO il container (100svh = altezza reale del viewport, niente barra vuota)
     e tieni il SOGGETTO a destra in campo (X 74%): su telefono la foto è ritagliata sui
     lati, quindi qui conta la X. Alza/abbassa 74% per spostare cosa si vede. */
  .euf-herov2{min-height:100svh;padding-bottom:76px;--euf-hero-focus:74% 50%;}
}
@media(prefers-reduced-motion:reduce){
  .euf-herov2-inner{animation:none;}
}