/* Patch: Experience section image sizing (match Figma proportions)
   Kept isolated to avoid impacting other components. */

:root{
  /* Align header left/right padding with page container (px-6 / lg:px-12). */
  --header-pad-x: clamp(24px, 4vw, 48px);
}

/* Patch: Modelli – icone categorie (match stile precedente: più grandi e perfettamente centrate)
   Targettizzato via data-page per evitare side effects sulle altre pagine. */
[data-page="modelli"] .models-category__icon{
  width: 32px;   /* prima risultavano troppo piccole (24px) */
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}
[data-page="modelli"] .models-category__icon svg{
  width: 100% !important;
  height: 100% !important;
  display: block;           /* evita baseline offset (icone “decentrate”) */
  margin: 0;
}


.experience-image{
  display:block;
  width:100%;
  height:clamp(170px, 12vw, 210px) !important;
  object-fit:cover !important;
}

/* Patch: Experience section feature icons (match Figma: centered + consistent size) */
.experience-features .feature-card__icon{
  width:56px;
  height:56px;
  background:#f2c200;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 56px;
}
.experience-features .feature-card__icon svg{
  width:30px;
  height:30px;
  display:block;
  stroke:#111;
  stroke-width:2.2;
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* ==================================================================
   PATCH CONSOLIDATI (richieste specifiche)
   - margine sopra/sotto prima fascia (hero)
   - stile pulsanti hero
   - frecce slider (visibilità)
   - footer (ripristino stile)
   Tutto è volutamente targettizzato per evitare side effects.
   ================================================================== */

/* Hero spacing: rende coerente lo spazio verticale della prima fascia
   senza toccare lo spacer dell'header (gestito in header.css). */
.hero-section{
  padding-top: 40px; /* più evidente rispetto alla versione attuale */
  padding-bottom: 64px;
  min-height: calc(100vh - var(--header-height));
}
@media (min-width: 768px){
  .hero-section{
    padding-top: 48px;
    padding-bottom: 72px;
  }
}

/* Hero buttons: esattamente come in Figma (fill giallo + outline nero). */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:44px;
  padding:0 22px;
  border-radius:10px;
  font-weight:500;
  font-size:14px;
  line-height:1;
  text-decoration:none;
  box-shadow:none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

/* CTA HERO: pulsanti più grandi senza impattare altre sezioni */
.hero__cta .btn{
  height:52px;
  padding:0 30px;
  font-size:15px;
  border-radius:12px;
}

/* HOME HERO (prima fascia): pulsanti ancora più grandi.
   Regola volutamente scoped per non impattare CTA di altre sezioni. */
/* Nota: i bottoni nella hero usano utilities (flex/gap) e non hanno wrapper .hero__actions;
   quindi targettiamo direttamente i .btn dentro .home-hero. */
.home-hero .btn{
  height:62px;
  padding:0 46px;
  font-size:16px;
  border-radius:14px;
  line-height:62px; /* centratura verticale per <a> */
  min-width:200px;
}

@media (max-width: 640px){
  .home-hero .btn{
    height:58px;
    line-height:58px;
    padding:0 38px;
    min-width:180px;
  }
}
.btn-primary{
  background:#f2c200;
  border:2px solid #f2c200;
  color:#111;
}
.btn-primary:hover{
  background:#e0b100;
  border-color:#e0b100;
}
.btn-outline{
  background:#fff;
  border:2px solid #111;
  color:#111;
}
.btn-outline:hover{
  background:#f6f6f6;
}

/* Slider arrows: forza rendering/colore degli SVG (evita regressioni). */
.questions-slider__nav button span{
  display:flex;
  align-items:center;
  justify-content:center;
}

/* ------------------------------------------------------------------
   FOOTER – ripristino stile (site-footer BEM)
-------------------------------------------------------------------*/
.site-footer{
  background:#0a0a0a;
  /* Base text non bianco pieno (come in Figma) */
  color:rgba(255,255,255,.72);
  padding:80px 0 40px;
}
.site-footer__inner{
  /* Stesso allineamento dell'header: gutter via width calc (evita padding doppio) */
  width:calc(100% - 48px);
  max-width:1536px;
  margin:0 auto;
}
@media (min-width: 1024px){
  .site-footer__inner{ width:calc(100% - 96px); }
}

.site-footer__top{
  display:grid;
  /* Colonne a larghezza controllata (come Figma) */
  grid-template-columns: minmax(360px, 520px) 180px 180px 180px;
  /* Allineamento orizzontale coerente con l'header: non centrare il blocco */
  justify-content: start;
  column-gap: 72px;
  row-gap: 28px;
}
@media (max-width: 1023px){
  .site-footer__top{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 640px){
  .site-footer__top{ grid-template-columns:1fr; }
}

.site-footer__logo-placeholder{
  /* placeholder bianco (senza logo), più simile a Figma */
  width: 270px;
  height: 44px;
  background: #ffffff;
  border-radius: 0 !important;
  display: block;
  overflow: hidden;  }

.site-footer__logo-img{
  height: 32px;
  width: auto;
  display: block;
}


.site-footer__desc{
  margin-top:18px;
  color:rgba(255,255,255,.72);
  font-size:16px;
  line-height:1.6;
  max-width:480px;
}

.site-footer__contact{
  margin-top:18px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.site-footer__contact-item{
  display:flex;
  align-items:center;
  gap:12px;
  color:rgba(255,255,255,.78);
  font-size: 16px;
  text-decoration:none;
}
.site-footer__contact-item:hover{ color:#fff; }
.site-footer__icon{
  /* icone contatti: più grandi e meno "compresse" */
  width: 34px;
  height: 34px;
  color: #f0b608;
  flex: 0 0 34px;
  display:block;
}

.site-footer__icon svg{
  width:100%;
  height:100%;
  display:block;
}

.site-footer__col-title{
  font-size: 18px;
  line-height: 1.2;
  font-weight:700;
  color:#fff;
  letter-spacing:.02em;
  text-transform:none;
  margin:0 0 14px;
}
.site-footer__list{ list-style:none; padding:0; margin:0; }
.site-footer__list li{ margin:10px 0; }
.site-footer__link{
  font-size: 15px;
  color:rgba(255,255,255,.78);
  text-decoration:none;
}
.site-footer__link:hover{ color:#fff; }

.site-footer__bottom{
  margin-top:56px;
  padding-top:22px;
  border-top:1px solid rgba(255,255,255,.12);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
}
.site-footer__copyright{
  margin:0;
  color:rgba(255,255,255,.72);
  font-size:14px;
}
.site-footer__legal{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
  align-items:center;
}
.site-footer__legal a{
  color:rgba(255,255,255,.72);
  text-decoration:none;
  font-size:14px;
}
.site-footer__legal a:hover{ color:#fff; }
.questions-slider__nav button svg{
  width:28px;
  height:28px;
  display:block;
  stroke:#fff !important;
  fill:none !important;
}

/* Slider domande: aumenta la distanza tra frecce e testo centrale */
[data-questions-slider] [data-qs-prev]{
  left: -72px !important;
}
[data-questions-slider] [data-qs-next]{
  right: -72px !important;
}

/* Su viewport piccoli evita che escano dallo schermo */
@media (max-width: 1024px){
  [data-questions-slider] [data-qs-prev]{
    left: 12px !important;
  }
  [data-questions-slider] [data-qs-next]{
    right: 12px !important;
  }
}

/* Footer: evita override globali che rendono tutto bianco pieno. */
.site-footer__inner{
  max-width: 1536px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}
@media (min-width: 1024px){
  .site-footer__inner{
    padding-left: 48px;
    padding-right: 48px;
  }
}
.site-footer__divider{
  height:1px;
  background: rgba(255,255,255,.15);
  border:0;
}

[data-qs-prev] svg, [data-qs-next] svg{
  width: 100%;
  height: 100%;
  display: block;
}

/* Slider arrows: force visible stroke/color */
.questions-slider button[data-qs-prev],
.questions-slider button[data-qs-next] {
  color: #fff;
}
.questions-slider button[data-qs-prev] svg,
.questions-slider button[data-qs-next] svg {
  stroke: #fff;
  fill: none;
}

/* Footer tweaks: placeholder + contact icons */
.site-footer .footer-logo-placeholder {
  background: #fff;
  border-radius: 14px;
  width: 240px;
  height: 44px;
}
@media (min-width: 768px) {
  .site-footer .footer-logo-placeholder {
    width: 280px;
    height: 46px;
  }
}
.site-footer a.flex.items-center.gap-3 span {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.site-footer a.flex.items-center.gap-3 span svg {
  width: 20px;
  height: 20px;
  stroke: #f0b608;
}
/* =========================================
   Homepage – riduzione spazio tra blocchi
   (solo homepage, non impatta altre pagine)
========================================= */
.page-home main > section.min-h-screen {
  min-height: auto !important;   /* elimina i "buchi" da 100vh */
}

.page-home main > section.py-12 {
  padding-top: 64px !important;
  padding-bottom: 64px !important;
}

@media (max-width: 767px) {
  .page-home main > section.py-12 {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
}
/* =========================================
   FAQ page – content styling
========================================= */
[data-page="faq"] .faq-card{
  background:#fff;
  border:1px solid #d9d9d9;
  border-radius:16px;
  box-shadow:0 1px 2px rgba(0,0,0,.06);
  padding:24px;
}
@media (min-width:768px){
  [data-page="faq"] .faq-card{ padding:40px; }
}

[data-page="faq"] .faq-item{
  border-bottom:1px solid #d9d9d9;
  padding:0 8px; /* px-2 */
}
[data-page="faq"] .faq-item:last-child{ border-bottom:0; }

[data-page="faq"] .faq-summary{
  list-style:none;
  cursor:pointer;
  padding:24px 0; /* py-6 */
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  font-weight:600;
  font-size:18px;
  color:#000;
  transition:color .2s ease;
}
[data-page="faq"] .faq-summary::-webkit-details-marker{ display:none; }
[data-page="faq"] .faq-summary::marker{ display:none; }
[data-page="faq"] .faq-item:hover .faq-summary{ color:#f0c300; }
[data-page="faq"] .faq-item[open] .faq-summary{ color:#f0c300; }

[data-page="faq"] .faq-chevron{
  width:20px;
  height:20px;
  color:#6b7280;
  flex:0 0 auto;
  transition:transform .2s ease, color .2s ease;
}
[data-page="faq"] .faq-chevron svg{ width:100%; height:100%; display:block; }
[data-page="faq"] .faq-item[open] .faq-chevron{ transform:rotate(180deg); color:#f0c300; }

[data-page="faq"] .faq-content{
  padding:0 0 24px 0; /* pb-6 */
  color:#5a5a5a;
  font-size:16px;
  line-height:1.75;
}
[data-page="faq"] .faq-item:last-child .faq-content{ padding-bottom:0; }

/* CTA */
[data-page="faq"] .faq-cta a{
  border-radius:8px !important;
  padding:12px 32px !important;
  font-weight:600;
}

@media (max-width:767px){
  [data-page="faq"] .faq-card{ padding:24px; }
  [data-page="faq"] .faq-summary{ font-size:16px; padding:20px 0; }
  [data-page="faq"] .faq-content{ padding-bottom:20px; }
}