/* ============================================================
   STEP 3 — HOME (componenti reali) — caricato dopo style.css
   ============================================================ */

/* --- Header logo --- */
.site-logo{ height:52px; width:auto; display:block; transition:filter .35s var(--ease), height .35s var(--ease); }
.site-header:not(.scrolled) .site-logo{ filter:brightness(0) invert(1); }        /* bianco sopra hero scuro */
.site-header.scrolled .site-logo{ filter:none; height:44px; }
/* logo del sito (WP custom logo) — limita la dimensione */
.site-header .custom-logo-link{ display:block; line-height:0; }
.site-header .custom-logo{ height:62px !important; width:auto !important; max-width:200px; display:block; transition:height .35s var(--ease); }
.site-header.scrolled .custom-logo{ height:50px !important; }

/* Menu a tendina (WP nativo .sub-menu) per la voce Servizi */
.site-header .nav .menu-item-has-children{ position:relative; }
.site-header .nav .menu-item-has-children>a::after{ content:"\25BE"; font-size:.7em; margin-left:.35rem; opacity:.7; }
.site-header .nav .sub-menu{ position:absolute; top:100%; left:0; min-width:230px; background:#fff; border-radius:12px; box-shadow:var(--shadow); padding:.5rem; margin:0; list-style:none; display:block; opacity:0; visibility:hidden; transform:translateY(8px); transition:all .25s var(--ease); z-index:120; }
.site-header .nav .menu-item-has-children:hover>.sub-menu,.site-header .nav .menu-item-has-children:focus-within>.sub-menu{ opacity:1; visibility:visible; transform:none; }
.site-header .nav .sub-menu li{ display:block; }
.site-header .nav .sub-menu a{ display:block; padding:.6rem .9rem; border-radius:8px; color:var(--ink) !important; text-transform:none; letter-spacing:0; font-size:.92rem; white-space:nowrap; }
.site-header .nav .sub-menu a::after{ display:none; }
.site-header .nav .sub-menu a:hover{ background:var(--tint); color:var(--blue) !important; }
@media (max-width:680px){
  .site-header .nav .sub-menu{ position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; background:transparent; padding:.2rem 0 .2rem 1rem; min-width:0; }
  .site-header .nav .sub-menu a{ color:rgba(255,255,255,.85) !important; }
  .site-header .nav .menu-item-has-children>a::after{ display:none; }
}
.nav-cta{ padding:.6rem 1.4rem !important; font-size:.85rem !important; }
.nav .nav-cta{ margin-left:.4rem; }

/* --- Hero video --- */
.hero__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
/* overlay leggero: scurisce solo top (nav/logo) e bottom (bottone), lascia risaltare il video */
.hero__overlay{ position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(31,35,44,.55) 0%, rgba(31,35,44,.12) 24%, rgba(31,35,44,.08) 62%, rgba(31,35,44,.42) 100%); }
.hero .wrap{ z-index:3; }
.hero__glow{ z-index:2; }
.hero__sub{ font-size:1.2rem; color:rgba(255,255,255,.88); max-width:56ch; margin:1.3rem 0 2.2rem; }

/* Hero minimale: solo video + bottone (in basso, centrato) */
.hero--minimal{ align-items:flex-end; }
.hero--minimal .wrap{ display:flex; justify-content:center; padding:0 0 12vh; }
.hero--minimal .hero__cta{ margin:0; }
.hero--minimal .btn-primary{ padding:1.05rem 2.6rem; font-size:1rem; box-shadow:0 14px 40px -12px rgba(0,0,0,.55); }

/* Utility: visibile solo agli screen reader (SEO/accessibilità, non a video) */
.sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* --- Intro / valore --- */
.intro-value{ background:#fff; }
.value-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; margin-top:3rem; }
.value-card{ text-align:center; padding:2rem 1.2rem; border-radius:var(--radius); background:var(--tint); transition:transform .35s var(--ease), box-shadow .35s var(--ease); }
.value-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-sm); }
.value-icon{ width:44px; height:44px; color:var(--blue-2); margin:0 auto 1rem; }
.value-card h3{ font-size:1.15rem; margin-bottom:.4rem; }
.value-card p{ font-size:.92rem; color:var(--muted); margin:0; }

/* --- Servizi (card con foto) --- */
.services{ background:var(--tint); }
.services__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; margin-top:3rem; }
.service-card{ display:flex; flex-direction:column; background:#fff; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .4s var(--ease), box-shadow .4s var(--ease); }
.service-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow); }
.service-card__img{ aspect-ratio:16/11; overflow:hidden; }
.service-card__img img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.service-card:hover .service-card__img img{ transform:scale(1.07); }
.service-card__body{ padding:1.5rem 1.4rem 1.7rem; display:flex; flex-direction:column; flex:1; }
.service-card__body h3{ color:var(--ink); margin-bottom:.5rem; }
.service-card__body p{ font-size:.92rem; color:var(--muted); flex:1; }
.service-card__link{ display:inline-flex; align-items:center; gap:.4rem; color:var(--blue); font-weight:600; font-size:.9rem; margin-top:.4rem; }
.service-card__link svg{ width:18px; height:18px; transition:transform .3s var(--ease); }
.service-card:hover .service-card__link svg{ transform:translateX(4px); }

/* --- Chi sono --- */
.about{ background:#fff; }
.about__grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:clamp(2rem,6vw,4.5rem); align-items:center; }
.about__photo{ position:relative; }
.about__portrait{ aspect-ratio:4/5; border-radius:var(--radius); background:linear-gradient(160deg,var(--blue-deep),var(--dark)); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1rem; color:rgba(255,255,255,.65); box-shadow:var(--shadow); }
.about__portrait svg{ width:96px; height:96px; }
.about__portrait span{ font-size:.85rem; letter-spacing:.1em; text-transform:uppercase; }
.about__badge{ position:absolute; right:-16px; bottom:-16px; width:120px; height:120px; background:#fff; border-radius:16px; box-shadow:var(--shadow); padding:12px; display:flex; align-items:center; justify-content:center; }
.about__badge img{ max-width:100%; max-height:100%; object-fit:contain; }
.about__role{ color:var(--blue); font-weight:600; margin-top:-.3rem; margin-bottom:1.2rem; }
.about__text .eyebrow{ margin-bottom:.6rem; }

/* --- Pillars (I miei servizi) --- */
.pillars{ background:var(--dark); color:rgba(255,255,255,.82); }
.pillars h2{ color:#fff; }
.pillars .eyebrow{ color:var(--blue-2); }
.pillars__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; margin-top:3rem; }
.pillar{ padding:2.2rem 1.8rem; border:1px solid rgba(255,255,255,.12); border-radius:var(--radius); background:rgba(255,255,255,.03); transition:border-color .35s var(--ease), background .35s var(--ease); }
.pillar:hover{ border-color:var(--blue-2); background:rgba(0,115,206,.08); }
.pillar__num{ font-family:var(--serif); font-size:2.4rem; font-weight:700; color:var(--blue-2); display:block; line-height:1; margin-bottom:.8rem; }
.pillar h3{ color:#fff; font-size:1.2rem; margin-bottom:.6rem; }
.pillar p{ font-size:.95rem; color:rgba(255,255,255,.72); margin:0; }
.pillars__foot{ margin-top:2.6rem; color:rgba(255,255,255,.8); max-width:70ch; margin-inline:auto; }

/* --- Blog slider --- */
.blog{ background:var(--tint); }
.blog__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:2.4rem; }
.blog__head h2{ margin:0; }
.blog-slider{ position:relative; }
.blog-track{ display:flex; gap:1.4rem; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; padding:.4rem .2rem 1.4rem; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.blog-track::-webkit-scrollbar{ display:none; }
.blog-card{ flex:0 0 clamp(260px,28%,320px); scroll-snap-align:start; background:#fff; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .4s var(--ease), box-shadow .4s var(--ease); }
.blog-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.blog-card__img{ display:block; position:relative; aspect-ratio:16/10; overflow:hidden; }
.blog-card__img img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.blog-card:hover .blog-card__img img{ transform:scale(1.06); }
.blog-card__cat{ position:absolute; left:12px; top:12px; background:var(--blue); color:#fff; font-size:.68rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; padding:.35rem .7rem; border-radius:var(--pill); }
.blog-card__body{ padding:1.2rem 1.3rem 1.5rem; }
.blog-card__date{ font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-2); }
.blog-card__body h3{ font-size:1.15rem; margin:.4rem 0 .5rem; }
.blog-card__body h3 a{ color:var(--ink); }
.blog-card__body h3 a:hover{ color:var(--blue); }
.blog-card__body p{ font-size:.9rem; color:var(--muted); margin:0; }
.blog-nav{ position:absolute; top:38%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%; border:none; background:#fff; box-shadow:var(--shadow-sm); color:var(--blue); cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:5; transition:background .25s var(--ease), color .25s var(--ease); }
.blog-nav:hover{ background:var(--blue); color:#fff; }
.blog-nav svg{ width:22px; height:22px; }
.blog-prev{ left:-14px; }
.blog-next{ right:-14px; }
.blog__empty{ text-align:center; color:var(--muted); font-size:1.05rem; }

/* --- Footer extra --- */
.foot-cta{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; padding-bottom:3rem; margin-bottom:3rem; border-bottom:1px solid rgba(255,255,255,.12); }
.foot-cta h2{ color:#fff; margin:0; }
.foot-logo{ height:auto; width:130px; margin-bottom:1.1rem; filter:brightness(0) invert(1); }
.foot-social{ display:flex; gap:.7rem; margin-top:1.2rem; }
.foot-social a{ width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.75); transition:all .3s var(--ease); }
.foot-social a:hover{ background:var(--blue); border-color:var(--blue); color:#fff; }
.foot-social svg{ width:18px; height:18px; }
.foot-legal{ display:flex; gap:1.2rem; flex-wrap:wrap; }
.foot-legal a{ color:rgba(255,255,255,.6); font-size:.82rem; }
.foot-legal a:hover{ color:var(--gold-soft); }

/* --- Cookie banner --- */
.cookie-banner{ position:fixed; left:1rem; right:1rem; bottom:1rem; z-index:200; max-width:760px; margin:0 auto;
  background:var(--dark); color:rgba(255,255,255,.9); border:1px solid rgba(255,255,255,.12);
  border-radius:14px; box-shadow:var(--shadow); padding:1.1rem 1.3rem;
  display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap; justify-content:space-between;
  animation:cookieIn .5s var(--ease) both; }
.cookie-banner[hidden]{ display:none; }
@keyframes cookieIn{ from{ opacity:0; transform:translateY(20px); } to{ opacity:1; transform:none; } }
.cookie-banner p{ margin:0; font-size:.9rem; flex:1 1 320px; color:rgba(255,255,255,.82); }
.cookie-banner a{ color:var(--gold-soft); text-decoration:underline; }
.cookie-banner__actions{ display:flex; align-items:center; gap:1rem; }
.cookie-banner__link{ font-size:.85rem; color:rgba(255,255,255,.7) !important; text-decoration:none !important; }
.cookie-banner__link:hover{ color:#fff !important; }
.cookie-banner .btn{ padding:.6rem 1.5rem; }
@media (max-width:560px){ .cookie-banner{ flex-direction:column; align-items:stretch; text-align:left; } .cookie-banner__actions{ justify-content:space-between; } }

/* --- Certificazioni --- */
.certs{ margin-top:1.4rem; }
.certs__title{ display:block; font-size:.78rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--blue); margin-bottom:.7rem; }
.certs__title small{ text-transform:none; letter-spacing:0; font-weight:500; color:var(--muted-2); }
.certs__grid{ display:grid; grid-template-columns:1fr 1fr; gap:.9rem; }
.cert-thumb{ position:relative; display:block; padding:0; border:1px solid var(--line); border-radius:var(--radius); background:#fff; cursor:pointer; overflow:hidden; transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); }
.cert-thumb:hover{ transform:translateY(-4px); box-shadow:var(--shadow-sm); border-color:var(--blue); }
.cert-thumb img{ width:100%; height:130px; object-fit:contain; object-position:center; background:#f4f6fb; padding:8px; }
.cert-thumb__label{ display:flex; align-items:center; justify-content:center; gap:.4rem; padding:.55rem .5rem; font-size:.82rem; font-weight:600; color:var(--ink); border-top:1px solid var(--line); }
.cert-thumb__label svg{ width:14px; height:14px; color:var(--blue); }

/* --- Lightbox --- */
.lightbox{ position:fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center; padding:clamp(1rem,4vw,3rem); background:rgba(15,20,28,.9); backdrop-filter:blur(4px); animation:lbIn .25s var(--ease) both; }
.lightbox[hidden]{ display:none; }
@keyframes lbIn{ from{ opacity:0; } to{ opacity:1; } }
.lightbox__fig{ margin:0; max-width:min(1000px,92vw); max-height:90vh; display:flex; flex-direction:column; align-items:center; gap:.8rem; }
.lightbox__img{ max-width:100%; max-height:80vh; object-fit:contain; border-radius:6px; box-shadow:0 30px 80px -20px rgba(0,0,0,.7); background:#fff; }
.lightbox__cap{ color:rgba(255,255,255,.85); font-size:.88rem; text-align:center; max-width:60ch; }
.lightbox__close{ position:absolute; top:1rem; right:1.2rem; width:44px; height:44px; border:none; border-radius:50%; background:rgba(255,255,255,.12); color:#fff; font-size:1.8rem; line-height:1; cursor:pointer; transition:background .25s var(--ease); }
.lightbox__close:hover{ background:rgba(255,255,255,.25); }
.lightbox__nav{ position:absolute; top:50%; transform:translateY(-50%); width:52px; height:52px; border:none; border-radius:50%; background:rgba(255,255,255,.12); color:#fff; font-size:2rem; line-height:1; cursor:pointer; transition:background .25s var(--ease); }
.lightbox__nav:hover{ background:rgba(255,255,255,.28); }
.lightbox__nav[hidden]{ display:none; }
.lightbox__prev{ left:1rem; }
.lightbox__next{ right:1rem; }
@media (max-width:560px){ .lightbox__nav{ width:42px; height:42px; font-size:1.6rem; } .lightbox__prev{ left:.3rem; } .lightbox__next{ right:.3rem; } }

/* --- Responsive Step 3 --- */
@media (max-width:980px){
  .value-grid{ grid-template-columns:repeat(2,1fr); }
  .services__grid{ grid-template-columns:repeat(2,1fr); }
  .about__grid{ grid-template-columns:1fr; }
  .about__photo{ max-width:420px; }
  .pillars__grid{ grid-template-columns:1fr; }
}
@media (max-width:680px){
  .value-grid{ grid-template-columns:1fr; }
  .services__grid{ grid-template-columns:1fr; }
  .blog__head{ flex-direction:column; align-items:flex-start; }
  .blog-nav{ display:none; }
  .foot-cta{ flex-direction:column; align-items:flex-start; }
  .nav .nav-cta{ margin-left:0; margin-top:1rem; }
}