/* === Desktop-proof overrides for hero right slider === */
.hero .hero-media{ position: relative !important; overflow: hidden !important; border-radius:16px; }
.hero .hero-media .hslider{ position: relative !important; width:100% !important; height:100% !important; }
@media (min-width:1024px){ .hero .hero-media .hslider{ min-height:460px; } }
@media (max-width:1023.98px){ .hero .hero-media .hslider{ min-height:280px; } }

/* Force only one visible slide */
.hero .hero-media .hslider > .hslide{ 
  position: absolute !important; inset:0 !important;
  width:100% !important; height:100% !important;
  display: none !important;        /* hidden by default */
}
.hero .hero-media .hslider > .hslide.active{
  display: block !important;
}

.hero .hero-media .hslider > .hslide img{
  width:100% !important; height:100% !important; object-fit:cover !important; display:block !important;
}

/* Hide any direct img placed in hero-media by theme */
.hero .hero-media > img{ display:none !important; }

/* === Footer order swap === */
#footer-wrap .footer-flex{ display:flex; gap:32px; flex-wrap:wrap; }
#footer-wrap .footer-left{ order: 2; }
#footer-wrap .footer-right{ order: 1; }
@media (max-width: 640px){
  /* keep stacking but swapped order persists naturally */
}
/* subtle alignment */
#footer-wrap .footer-right p{ margin: 6px 0; }

/* === Slider minimal black fade on change === */
.hero .hero-media .hslider{ position:relative; }
.hero .hero-media .hslider::after{
  content:""; position:absolute; inset:0; background:#000; opacity:0; pointer-events:none; transition:opacity .25s ease;
}
.hero .hero-media .hslider.fading::after{ opacity:.12; } /* minimal black flash */

/* === Footer alignment fix after swap === */
#footer-wrap .footer-flex{ display:flex; gap:32px; flex-wrap:wrap; align-items:flex-start; }
#footer-wrap .footer-left{ order:2; text-align:left; align-items:flex-start; }
#footer-wrap .footer-right{ order:1; text-align:right; align-items:flex-end; }
#footer-wrap .footer-left > *, #footer-wrap .footer-right > *{ margin: 4px 0; }
#footer-wrap .footer-logo, #footer-wrap img.footer-logo{ max-width: 180px; height:auto; }
@media (max-width: 640px){
  #footer-wrap .footer-left, #footer-wrap .footer-right{ text-align:center; align-items:center; }
  #footer-wrap .footer-logo, #footer-wrap img.footer-logo{ margin-inline:auto; }
}

/* === Global footer alignment & order (applies on all pages) === */
#footer-wrap .footer-flex{ display:flex; gap:32px; flex-wrap:wrap; align-items:flex-start; }
#footer-wrap .footer-left{ text-align:left; }
#footer-wrap .footer-right{ text-align:right; }
@media (max-width: 640px){
  #footer-wrap .footer-left, #footer-wrap .footer-right{ text-align:center; }
}

/* === Footer final alignment === */
#footer-wrap .footer-flex{ display:flex; gap:32px; flex-wrap:wrap; align-items:flex-start; }
#footer-wrap .footer-left{ text-align:left; }
#footer-wrap .footer-right{ text-align:right; }
@media (max-width: 640px){
  #footer-wrap .footer-left, #footer-wrap .footer-right{ text-align:center; }
}

/* === Footer: centered columns with breathable spacing (desktop & mobile) === */
#footer-wrap .footer-flex{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;     /* center the two blocks */
  align-items:center;
  gap: 32px 96px;             /* vertical / horizontal gap */
  padding-block: 24px;
}

#footer-wrap .footer-left,
#footer-wrap .footer-right{
  text-align:center;          /* center content inside each block */
  max-width: 560px;
}

#footer-wrap .footer-right img,
#footer-wrap img.footer-logo{
  display:block;
  max-width: 220px;           /* comfortable desktop size */
  width: 100%;
  height:auto;
  margin-inline:auto;
}

#footer-wrap .footer-copy{ 
  margin-top: 10px;
  opacity:.9;
}

/* Mobile tweaks */
@media (max-width: 640px){
  #footer-wrap .footer-flex{ gap: 20px 24px; padding-block: 20px; }
  #footer-wrap .footer-right img,
  #footer-wrap img.footer-logo{ max-width: 180px; }
}

/* === Mobile slider fix: show first slide by default, remove black fade on mobile === */
.hero .hero-media .hslider > .hslide:first-child{ display:block !important; }
@media (max-width: 1023.98px){
  .hero .hero-media .hslider{ min-height: 320px; }
  .hero .hero-media .hslider::after{ display:none !important; } /* disable black flash overlay on mobile */
}

/* === Cross-fade slider: no display:none, first slide visible immediately === */
.hero .hero-media .hslider{ position:relative; }
.hero .hero-media .hslider > .hslide{
  position:absolute !important;
  inset:0 !important;
  width:100% !important; height:100% !important;
  opacity:0 !important;
  display:block !important;             /* keep in DOM to avoid black gaps */
  transition: opacity .6s ease !important;
}
.hero .hero-media .hslider > .hslide:first-child{ opacity:1 !important; }
.hero .hero-media .hslider > .hslide.active{ opacity:1 !important; }

/* === Smaller footer logo === */
#footer-wrap .footer-right img,
#footer-wrap img.footer-logo{
  max-width: 140px !important;
  height:auto;
}
@media (max-width: 640px){
  #footer-wrap .footer-right img,
  #footer-wrap img.footer-logo{
    max-width: 100px !important;
  }
}

/* === HERO as full-width background slider with centered overlay === */
section.hero{
  position: relative !important;
  min-height: 80svh;
  display: block;
  overflow: hidden;
}
section.hero .hero-bgslides{
  position: absolute;
  inset: 0;
  z-index: 1;
}
section.hero .hero-bgslides .bgslide{
  position: absolute; inset:0;
  opacity: 0;
  transition: opacity .6s ease;
}
section.hero .hero-bgslides .bgslide img{
  width:100%; height:100%;
  object-fit: cover; display:block;
}
section.hero .hero-bgslides .bgslide.active{ opacity: 1; }
section.hero .hero-center-overlay{
  position: absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  padding: clamp(24px, 6vw, 120px);
  z-index: 3;
}
section.hero .hero-center-overlay *{ color:#fff; text-align:center; }
/* Dark wash for readability */
section.hero::after{
  content:""; position:absolute; inset:0;
  background: rgba(0,0,0,0);
  z-index: 2;
}
@media (max-width: 1023.98px){
  section.hero{ min-height: 88svh !important; }
}

/* === Center hero buttons consistently === */
section.hero .hero-center-overlay .container{
  text-align:center !important;
}
section.hero .hero-center-overlay .container .btn,
section.hero .hero-center-overlay .container a{
  margin-left:auto; margin-right:auto;
}
section.hero .hero-center-overlay .container .btn + .btn,
section.hero .hero-center-overlay .container a + a{
  margin-left: 12px; margin-right:12px;
}

/* === Hero buttons grouped tightly and centered === */
section.hero .hero-center-overlay .container .btn-group,
section.hero .hero-center-overlay .container .button-row{
  display: inline-flex !important;
  justify-content: center;
  gap: 16px; /* small spacing */
}
section.hero .hero-center-overlay .container .btn,
section.hero .hero-center-overlay .container a.btn{
  margin: 0 !important;
}

/* === Force hero buttons centered as a group === */
section.hero .hero-center-overlay .container{
  text-align:center !important;
}
section.hero .hero-center-overlay .container .button-row{
  display:flex !important;
  justify-content:center !important;
  align-items:center;
  gap:16px;
}
section.hero .hero-center-overlay .container .button-row .btn{
  margin:0 !important;
}

/* === Hero text left-aligned, constrained width === */
section.hero .hero-center-overlay .container{
  text-align:left !important;
  max-width: 50% !important;
}
section.hero .hero-center-overlay .container h1,
section.hero .hero-center-overlay .container p{
  text-align:left !important;
}
/* Buttons aligned left under text, but still grouped inline */
section.hero .hero-center-overlay .container .button-row{
  display:flex !important;
  justify-content:flex-start !important;
  gap:16px;
}
@media (max-width: 1023.98px){
  section.hero .hero-center-overlay .container{
    max-width: 100% !important;
    text-align:center !important;
  }
  section.hero .hero-center-overlay .container h1,
  section.hero .hero-center-overlay .container p{
    text-align:center !important;
  }
  section.hero .hero-center-overlay .container .button-row{
    justify-content:center !important;
  }
}

/* === Hero text alignment applied to all screen sizes, text colors restored === */
section.hero .hero-center-overlay .container{
  max-width: 50% !important;
  text-align:left !important;
}
section.hero .hero-center-overlay .container h1,
section.hero .hero-center-overlay .container p{
  text-align:left !important;
  color: #e5e7eb !important; /* light gray body text */
}
section.hero .hero-center-overlay .container h1{
  color: #ffffff !important; /* white heading */
}
section.hero .hero-center-overlay .container h1 span{
  background: linear-gradient(90deg, #60a5fa, #34d399);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
section.hero .hero-center-overlay .container .button-row{
  display:flex !important;
  justify-content:flex-start !important;
  gap:16px;
}
@media (max-width: 1023.98px){
  section.hero .hero-center-overlay .container{
    max-width: 100% !important;
    text-align:left !important;
    padding-inline: 20px;
  }
  section.hero .hero-center-overlay .container h1,
  section.hero .hero-center-overlay .container p{
    text-align:left !important;
  }
  section.hero .hero-center-overlay .container .button-row{
    justify-content:flex-start !important;
  }
}

/* === AI page: full-section background image (cover) === */
section.hero.ai-hero-bg{
  background-image: url('../img/ai/ai-hero.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* keep inner layout intact; ensure any absolute bg layers don't hide it */
section.hero.ai-hero-bg .hero-bgslides{ display:none !important; } /* if any older bg layer existed */

/* Homepage hero stats below buttons (desktop-first) */
.hero .hero-copy .hero-stats{
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px;
  max-width: 900px;
}
.hero .hero-copy .hero-stats .stat-card{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 16px;
  padding: 16px 18px;
  text-align: center;
  backdrop-filter: blur(6px);
}
.hero .hero-copy .hero-stats .stat-value{
  font-size: clamp(26px, 2.6vw, 38px);
  font-weight: 800;
  color: #fff;
}
.hero .hero-copy .hero-stats .stat-label{
  margin-top: 6px;
  color: rgba(255,255,255,.9);
  font-size: clamp(13px, 1.2vw, 16px);
}
/* Keep them in one row on desktop; stack only under 640px if ever needed */
@media (max-width: 640px){
  .hero .hero-copy .hero-stats{
    grid-template-columns: repeat(3, minmax(0,1fr)); /* still in a row as requested desktop-only change */
  }
}

/* AI hero: keep background darkening but ensure text/buttons are bright */
section.hero.ai-hero-bg .hero-copy,
section.hero.ai-hero-bg .hero-copy *{
  color:#ffffff !important;
  opacity:1 !important;
  mix-blend-mode: normal !important;
  filter:none !important;
  text-shadow:none !important;
  position:relative;
  z-index:3;
}
section.hero.ai-hero-bg{ position:relative; }
section.hero.ai-hero-bg::after{ z-index:1 !important; }
section.hero.ai-hero-bg .container.hero-inner{ position:relative; z-index:2; }

/* Buttons in AI hero */
section.hero.ai-hero-bg .hero-copy .btn.btn-primary{
  background:#2563eb !important;
  border-color:#2563eb !important;
  color:#fff !important;
}
section.hero.ai-hero-bg .hero-copy .btn:not(.btn-primary){
  border-color:rgba(255,255,255,.8) !important;
  color:#fff !important;
}

/* === AI hero: vertically center content & restore gradient title === */
section.hero.ai-hero-bg{
  position: relative;
  min-height: 80vh;
}
section.hero.ai-hero-bg .hero-center-overlay,
section.hero.ai-hero-bg .container.hero-inner{
  min-height: 80vh;
  display: grid !important;
  align-items: center !important;
}
section.hero.ai-hero-bg .hero-two-col{
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  align-items: center !important;
  gap: 28px;
}
@media (max-width: 1023px){
  section.hero.ai-hero-bg .hero-two-col{
    grid-template-columns: 1fr;
  }
}

/* Keep AI text bright but allow gradient on highlighted spans */
section.hero.ai-hero-bg .hero-copy,
section.hero.ai-hero-bg .hero-copy *{
  color:#ffffff !important;
  opacity:1 !important;
  mix-blend-mode: normal !important;
  filter:none !important;
  text-shadow:none !important;
  position:relative;
  z-index:3;
}
/* Gradient utility (same as homepage) */
.text-gradient,
.brand-gradient,
.gradient-text{
  background: linear-gradient(90deg, #67b7ff 0%, #38bdf8 35%, #22d3ee 55%, #22c55e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent !important;
}
section.hero.ai-hero-bg .hero-copy .text-gradient,
section.hero.ai-hero-bg .hero-copy .brand-gradient,
section.hero.ai-hero-bg .hero-copy .gradient-text{
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* === AI hero: match homepage height on desktop & mobile, keep centered === */
section.hero.ai-hero-bg{
  min-height: 100vh !important;           /* full viewport height */
  display: flex !important;
  align-items: center !important;
}
/* Inner container should stretch to allow vertical centering */
section.hero.ai-hero-bg .container.hero-inner{
  min-height: 100vh !important;
  display: grid !important;
  align-items: center !important;
}
/* Two-column grid stays aligned */
section.hero.ai-hero-bg .hero-two-col{
  display: grid !important;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  align-items: center !important;
  gap: 28px;
}
@media (max-width: 1023px){
  section.hero.ai-hero-bg .hero-two-col{
    grid-template-columns: 1fr;
  }
}


/* === Rollback AI hero height to match homepage content height === */
section.hero.ai-hero-bg,
section.hero.ai-hero-bg .container.hero-inner{
  min-height: initial !important;
}
/* Keep vertical centering without forcing height */
section.hero.ai-hero-bg .container.hero-inner{
  display: grid !important;
  align-items: center !important;
}
section.hero.ai-hero-bg .hero-two-col{align-items:center !important;}

/* === AI hero height & gradient fix (stronger specificity) === */
section.hero.ai-hero-bg{
  min-height: 66vh !important;       /* closer to homepage height */
  display: block !important;          /* reset flex to avoid over-stretch */
  padding-top: 48px !important;
  padding-bottom: 48px !important;
}
section.hero.ai-hero-bg .container.hero-inner{
  min-height: 66vh !important;
  display: grid !important;
  align-items: center !important;
}
@media (max-width: 1023px){
  section.hero.ai-hero-bg{
    min-height: 66vh !important;      /* keep good proportions on mobile */
  }
  section.hero.ai-hero-bg .container.hero-inner{
    min-height: 66vh !important;
  }
}
/* Force gradient on AI title's .accent (no HTML change required) */
section.hero.ai-hero-bg .hero-copy .accent{
  background: linear-gradient(90deg, #67b7ff 0%, #38bdf8 35%, #22d3ee 55%, #22c55e 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

/* Extra breathing room below AI hero */
section.hero.ai-hero-bg{
  margin-bottom: 48px !important;
}
/* Video styling in AI hero right column */
section.hero.ai-hero-bg .hero-video{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 18px;
  padding: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  background: #0b1220;
}

/* If legacy image still present in the right hero, hide it when video exists */
section.hero.ai-hero-bg .hero-media img{ display:none !important; }
section.hero.ai-hero-bg .hero-media .hero-video{ display:block !important; }

/* hero video ensure visible */
section.hero .hero-right .hero-video,
section.hero .hero-media .hero-video{ display:block !important; }

/* Make 'La nostra storia' full-width and mobile-safe */
.section.about.storia-full .container { max-width: 1100px; }
.section.about.storia-full { padding-top: 32px; padding-bottom: 32px; }
.section.about.storia-full * { overflow: visible; }
@media (max-width: 900px){
  .section.about.storia-full h2, 
  .section.about.storia-full p { margin-right: 0; }
}

/* Align 'La nostra storia' section with other sections */
#la-nostra-storia .container {
  padding-left: 32px; /* small indent to match other sections */
}
@media (max-width: 900px){
  #la-nostra-storia .container {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* === Mobile hero tidy-up (buttons, heading, spacing) === */
@media (max-width: 900px){

  /* Softer heading size + spacing */
  .hero h1{
    font-size: clamp(24px, 8vw, 32px) !important;
    line-height: 1.2 !important;
    margin-bottom: 10px !important;
  }

  /* Ensure the buttons can wrap and never overflow the pill */
  .hero .actions a.btn,
  .hero .actions button.btn,
  .hero .actions .btn,
  .hero .actions a.button,
  .hero .actions .button,
  .hero .actions .btn-primary{
    display:inline-flex !important;     /* keep the pill look */
    align-items:center;
    justify-content:center;

    /* allow multi-line safely */
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;

     /* ensure the rounded background follows wrapped lines */
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    background-clip: padding-box;
    -webkit-background-clip: padding-box;

    /* clip any rendering glitches at the edges */
    overflow: hidden;

    /* sizing */
    max-width: 100% !important;
    height: auto !important;
    padding: 10px 14px !important;
    border-radius: 16px !important;
  }

  /* keep the button row wrapping nicely */
  .hero .actions{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:12px !important;
  }

  /* Slightly tighten hero layout on phones */
  .hero .container,
  .hero .hero-inner{
    gap: 18px !important;
  }

/* ==== Hero stats sizing & wrapping fix ==== */
/*@media (max-width: 1024px){
/* 1) Let the text column use full width on phones (your container was too narrow) */
section.hero .hero-center-overlay .container{
    max-width: 100% !important;
    padding-inline: 16px !important;
  }
  section.hero .hero-center-overlay .container .hero-copy{
    min-width: 0 !important; /* iOS flex clamp fix */
  }
}*/

  /* 3-only one needed-) Stats tiles: responsive text that never spills */
section.hero .hero-center-overlay .container .hero-stats{
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 14px;
}

section.hero .hero-center-overlay .container .hero-stats .stat-card{
  background: rgba(255,255,255,.08);
  display: grid; place-items: center;
  padding: 10px 12px;
  border-radius: 12px;
  min-width: 0; /* allow shrink */
}

/* Main number (40+, 400+, etc.) */
section.hero .hero-center-overlay .container .hero-stats .stat-value{
  font-size: clamp(18px, 5.2vw, 24px); /* responsive */
  line-height: 1.1;
  white-space: nowrap;
}

/* Label below (Anni, Clienti, Progetti) */
section.hero .hero-center-overlay .container .hero-stats .stat-label{
  font-size: clamp(12px, 3.6vw, 14px); /* responsive */
  line-height: 1.15;
  opacity: .9;
}