/* ============================================================
   SONIALOVA — atelier sposa & cerimonia (Torino)
   Design system condiviso da tutte le pagine.
   Palette dal logo: avorio + nero caldo + champagne.
   Font: Marcellus (display) · Jost (body) · Cormorant (accenti).
   ============================================================ */

:root{
  --avorio:#F5F0E7; --crema:#FCFAF6; --soft:#EBE3D6;
  --ink:#171410; --char:#33302A; --gold:#B4904C; --goldsoft:#C9AE7C; --muted:#7C7164;
  --line:rgba(23,20,16,.12);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--crema); color:var(--ink);
  font-family:"Jost",system-ui,sans-serif; font-weight:400; line-height:1.7;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
::selection{background:var(--gold); color:#fff}

h1,h2,h3,h4{font-family:"Marcellus",Georgia,serif; font-weight:400; line-height:1.14; margin:0}
.font-alt{font-family:"Cormorant Garamond",Georgia,serif}

/* ---- micro-componenti ---- */
.eyebrow{font-family:"Jost",sans-serif; font-weight:500; font-size:.72rem; letter-spacing:.3em;
  text-transform:uppercase; color:var(--gold)}
.rule-gold{width:54px; height:1px; background:var(--gold); border:0}
.rule-center{margin-left:auto; margin-right:auto}
.kicker{letter-spacing:.04em}

/* ---- bottoni ---- */
.btn{display:inline-flex; align-items:center; gap:.55rem; cursor:pointer; border:1px solid transparent;
  font-family:"Jost",sans-serif; font-weight:400; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  padding:.95rem 2rem; border-radius:2px; transition:background .35s ease,color .35s ease,border-color .35s ease,transform .35s ease}
.btn:hover{transform:translateY(-1px)}
.btn-ink{background:var(--ink); color:var(--avorio)}
.btn-ink:hover{background:var(--char)}
.btn-gold{background:var(--gold); color:#fff}
.btn-gold:hover{background:#a07e3f}
.btn-ghost{border-color:var(--char); color:var(--char)}
.btn-ghost:hover{border-color:var(--gold); color:var(--gold)}
.btn-light{background:var(--avorio); color:var(--ink)}
.btn-light:hover{background:#fff}
.btn-outline-light{border-color:rgba(245,240,231,.5); color:var(--avorio)}
.btn-outline-light:hover{border-color:var(--gold); color:var(--gold)}

/* ---- nav (barra scura, testo chiaro) ---- */
.nav-link{position:relative; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(245,240,231,.82); padding:.25rem 0; transition:color .3s ease}
.nav-link::after{content:""; position:absolute; left:0; bottom:-2px; width:0; height:1px; background:var(--gold); transition:width .35s ease}
.nav-link:hover{color:var(--avorio)}
.nav-link:hover::after,.nav-link[aria-current="page"]::after{width:100%}
.nav-link[aria-current="page"]{color:var(--avorio)}

.site-header{background:var(--ink); transition:background .4s ease,box-shadow .4s ease,padding .4s ease}
.site-header.scrolled{background:rgba(23,20,16,.92); backdrop-filter:blur(8px); box-shadow:0 1px 0 rgba(245,240,231,.12)}

/* ---- link testo ---- */
.link-gold{color:var(--gold); border-bottom:1px solid transparent; transition:border-color .3s}
.link-gold:hover{border-color:var(--gold)}

/* ---- card ---- */
.card-lift{transition:transform .5s ease, box-shadow .5s ease}
.card-lift:hover{transform:translateY(-4px); box-shadow:0 22px 50px -28px rgba(23,20,16,.4)}
.img-zoom{overflow:hidden}
.img-zoom img{transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.img-zoom:hover img{transform:scale(1.06)}

/* ---- reveal on scroll ---- */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .9s ease, transform .9s ease}
.reveal.in{opacity:1; transform:none}

/* ---- gallery / lightbox ---- */
.lb{position:fixed; inset:0; z-index:80; display:none; align-items:center; justify-content:center;
  background:rgba(23,20,16,.94); padding:4vw}
.lb.open{display:flex}
.lb img{max-width:92vw; max-height:88vh; box-shadow:0 30px 80px -20px rgba(0,0,0,.7)}
.lb-btn{position:absolute; top:50%; transform:translateY(-50%); background:none; border:0; color:#fff;
  font-size:2.4rem; cursor:pointer; opacity:.7; transition:opacity .3s; padding:1rem; line-height:1}
.lb-btn:hover{opacity:1}
.lb-prev{left:1vw} .lb-next{right:1vw}
.lb-close{position:absolute; top:2vh; right:2vw; font-size:2rem; opacity:.8}
.lb-cap{position:absolute; bottom:3vh; left:0; right:0; text-align:center; color:var(--avorio);
  font-family:"Cormorant Garamond",serif; font-size:1.25rem; letter-spacing:.04em}

/* ---- mappa facade ---- */
.map-facade{position:relative; cursor:pointer; background-size:cover; background-position:center}
.map-facade::after{content:""; position:absolute; inset:0; background:rgba(23,20,16,.32); transition:background .4s}
.map-facade:hover::after{background:rgba(23,20,16,.18)}
.map-facade .map-cta{position:relative; z-index:1}

/* ---- sticky CTA mobile ---- */
.cta-bar{position:fixed; left:0; right:0; bottom:0; z-index:60; display:flex; gap:1px;
  transform:translateY(100%); transition:transform .4s ease}
.cta-bar.show{transform:none}
.cta-bar a{flex:1; text-align:center; padding:.95rem; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase}
@media (min-width:768px){.cta-bar{display:none}}

/* ---- utils ---- */
.container-x{width:100%; max-width:1200px; margin:0 auto; padding-left:1.5rem; padding-right:1.5rem}
.tracking-wider-2{letter-spacing:.14em}
.hairline{height:1px; background:var(--line); border:0}

/* ---- form contatti ---- */
.frm-label{display:block; font-family:"Jost",sans-serif; font-weight:500; font-size:.72rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--char); margin-bottom:.5rem}
.frm-label .req{color:var(--gold)}
.frm-input{width:100%; background:var(--crema); border:1px solid var(--line); border-radius:2px;
  padding:.85rem 1rem; font-family:"Jost",sans-serif; font-weight:300; font-size:1rem; color:var(--ink);
  line-height:1.5; transition:border-color .3s ease, box-shadow .3s ease}
.frm-input::placeholder{color:#b3a896}
.frm-input:focus{outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(180,144,76,.14)}
textarea.frm-input{min-height:140px; resize:vertical}
select.frm-input{appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%237C7164' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1rem center; padding-right:2.6rem}
.frm-check{display:flex; align-items:flex-start; gap:.6rem; font-size:.92rem; color:var(--muted); line-height:1.5}
.frm-check input{margin-top:.25rem; width:1.05rem; height:1.05rem; accent-color:var(--gold); flex:0 0 auto}
.frm-note{font-size:.8rem; color:var(--muted)}
.hp-field{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

/* ---- menu mobile ---- */
.menu-toggle{display:inline-flex; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:.4rem}
.menu-toggle span{width:24px; height:1.5px; background:var(--avorio); display:block; transition:background .3s}
@media (min-width:1024px){ .menu-toggle{display:none} }
.mobile-menu{position:fixed; inset:0; z-index:70; background:var(--avorio); display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:1.5rem; opacity:0; pointer-events:none; transition:opacity .4s ease}
.mobile-menu.open{opacity:1; pointer-events:auto}
/* solo i link di navigazione diretti: NON tocca .btn né le icone social (annidate in .mm-social) */
.mobile-menu > a:not(.btn){font-family:"Marcellus",serif; font-size:1.55rem; letter-spacing:.06em; color:var(--ink)}
.mobile-menu .mm-close{position:absolute; top:1.4rem; right:1.4rem; font-size:2rem; background:none; border:0; cursor:pointer; color:var(--ink); line-height:1}
.mobile-menu .mm-logo{height:54px; width:auto; margin-bottom:.5rem}
.mm-social{display:flex; align-items:center; gap:1.6rem; margin-top:.6rem}
.mm-social a{color:var(--ink); display:inline-flex; transition:color .3s ease}
.mm-social a:hover{color:var(--gold)}

/* icona Instagram nell'header */
.ig-link{display:inline-flex; align-items:center; justify-content:center; color:rgba(245,240,231,.85); padding:.25rem; transition:color .3s ease}
.ig-link:hover{color:var(--gold)}

/* ---- hero ---- */
/* inquadratura: leggermente verso l'alto per non tagliare la testa; su mobile ancora più alta */
/* hero home (foto reale collezione, soggetto centrato): inquadro per mostrare viso e abito */
.hero-img{object-position:50% 14%}
@media (max-width:767px){ .hero-img{object-position:50% 12%} }
/* doppio scrim: verticale (testo in basso) + laterale sinistro (titolo allineato a sinistra) → testo sempre leggibile */
.hero-scrim{background:
  linear-gradient(to top, rgba(23,20,16,.78) 0%, rgba(23,20,16,.50) 35%, rgba(23,20,16,.30) 62%, rgba(23,20,16,.20) 100%),
  linear-gradient(to right, rgba(23,20,16,.42) 0%, rgba(23,20,16,.10) 55%, transparent 80%)}
.scroll-cue{width:1px; height:54px; background:linear-gradient(to bottom, transparent, rgba(245,240,231,.9))}

/* ---- carosello mobile (scroll-snap, niente JS) ---- */
/* il layout (flex su mobile → grid su sm+) è gestito con le utility Tailwind sugli elementi;
   qui solo: nascondere la scrollbar e l'hint "scorri →" mostrato solo su mobile */
.no-sb{scrollbar-width:none; -webkit-overflow-scrolling:touch}
.no-sb::-webkit-scrollbar{display:none}
.carousel-hint{display:none}
@media (max-width:639px){
  .carousel-hint{display:flex; align-items:center; gap:.45rem; margin-top:1.1rem;
    font-size:.64rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold)}
  .carousel-hint::after{content:"→"; font-size:.9rem; letter-spacing:0}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1; transform:none; transition:none}
  .img-zoom img,.btn,.card-lift{transition:none}
}

/* ---- galleria abiti: copertina + switch al passaggio mouse + nome ---- */
.dress-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:.85rem}
@media (min-width:768px){ .dress-grid{grid-template-columns:repeat(3,1fr); gap:1.25rem} }
.dress-cover{position:relative; display:block; overflow:hidden; border-radius:2px; aspect-ratio:2/3;
  cursor:pointer; background:var(--soft)}
.dress-cover img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.dress-cover .cover-b{opacity:0; transition:opacity .55s ease}
@media (hover:hover){ .dress-cover:hover .cover-b{opacity:1} }
.dress-cover:focus-visible{outline:2px solid var(--gold); outline-offset:2px}
.dress-badge{position:absolute; top:10px; right:10px; z-index:2; pointer-events:none;
  background:rgba(23,20,16,.55); color:var(--avorio); font-family:"Jost",sans-serif; font-size:.6rem;
  letter-spacing:.12em; text-transform:uppercase; padding:4px 9px; border-radius:999px}
.dress-name{font-family:"Marcellus",serif; font-size:1.1rem; text-align:center; margin-top:.7rem; color:var(--ink)}
.dress-brand{font-family:"Jost",sans-serif; font-size:.6rem; font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold); vertical-align:middle; margin-left:.35rem}