/* ============================================================
   responsive-fix.css  –  IFSAM
   Fix leggero e non distruttivo.
   ============================================================ */

/* ----------------------------------------------------------
   1. SCROLL – sempre attivo
   ---------------------------------------------------------- */
html, body {
  overflow-y: scroll !important;
  overflow-x: hidden !important;
  height: auto !important;
  max-height: none !important;
}
main {
  overflow: visible !important;
  height: auto !important;
}
* { box-sizing: border-box; }
img, video { max-width: 100%; }

/* ----------------------------------------------------------
   2. CAROUSEL (locale) – frecce dentro la card, non fuori
   ---------------------------------------------------------- */

/* Il grid del carousel ha position:relative dal JS */
.js-carousel-with-media-module .foundations-card-grid,
.js-carousel-with-media-module .foundations-card-grid > .foundations-card,
.js-carousel-with-media-module .foundations-card-grid > .foundations-card-wrapper {
  position: relative !important;
}

/* Frecce ← → aggiunte da local-fixes.js */
.local-carousel-prev,
.local-carousel-next,
.foundations-card-grid > button {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 20 !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  border: none !important;
  cursor: pointer !important;
  font-size: 18px !important;
  line-height: 36px !important;
  text-align: center !important;
  padding: 0 !important;
  background: rgba(0,0,0,0.45) !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Su mobile: frecce più piccole e dentro il bordo */
@media (max-width: 767px) {
  .foundations-card-grid > button[style*="left"] {
    left: 6px !important;
    width: 30px !important;
    height: 30px !important;
    font-size: 15px !important;
  }
  .foundations-card-grid > button[style*="right"] {
    right: 6px !important;
    width: 30px !important;
    height: 30px !important;
    font-size: 15px !important;
  }

  /* Clip il grid per non far uscire le frecce */
  .js-carousel-with-media-module .foundations-card-grid {
    overflow: hidden !important;
  }

  /* Immagine card: non trabocca */
  .foundations-card-image,
  .foundations-card-big-image,
  .foundations-card-small-image {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }

  /* Card image wrapper: limita l'altezza su mobile */
  .foundations-card-image-wrapper,
  .foundations-card-big-image-wrapper,
  .foundations-card-small-image-wrapper {
    max-height: 200px !important;
    overflow: hidden !important;
  }
}

/* ----------------------------------------------------------
   3. CAROUSEL WITH MEDIA MODULE – immagine non esce
   ---------------------------------------------------------- */
.carousel-with-media-module-image-wrapper {
  overflow: hidden !important;
}
.carousel-with-media-module-image-wrapper img {
  max-width: 100% !important;
  height: auto !important;
}

@media (max-width: 767px) {
  .carousel-with-media-module-image-wrapper {
    max-height: 260px !important;
  }
  .carousel-with-media-module-image-wrapper img {
    width: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }
}

/* ----------------------------------------------------------
   4. MOBILE  < 768px – fix generali
   ---------------------------------------------------------- */
@media (max-width: 767px) {

  /* Testo hero */
  .header-standard-module-headline h1,
  .foundations-heading-xxl-l {
    font-size: clamp(22px, 6vw, 36px) !important;
    line-height: 1.2 !important;
  }

  /* Hero: non blocca lo scroll */
  .header-standard-module-wrapper {
    min-height: auto !important;
    height: auto !important;
  }

  /* Pulsanti hero */
  .header-standard-module-top-button {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
  }
  .header-standard-module-top-button .foundations-button,
  .header-standard-module-top-button a.foundations-button {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  /* Offer pills – scorri orizzontalmente senza traboccare */
  .header-standard-module-offer-container {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 8px !important;
    padding-bottom: 6px !important;
    scrollbar-width: none !important;
    max-width: 100% !important;
  }
  .header-standard-module-offer-container::-webkit-scrollbar { display: none; }
  .header-standard-module-offer-button {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }

  /* Titoli sezioni */
  .foundations-heading-xxl {
    font-size: clamp(20px, 5.5vw, 30px) !important;
    line-height: 1.25 !important;
  }
  .foundations-heading-xl-l {
    font-size: clamp(16px, 4.5vw, 22px) !important;
  }

  /* Corpo testo */
  .foundations-body p,
  .foundations-body-default {
    font-size: 14px !important;
    line-height: 1.65 !important;
  }

  /* Nessun overflow orizzontale */
  section, .foundations-module, .container {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  /* Card grande: altezza non fissata */
  .foundations-card-big {
    max-height: none !important;
  }

  /* Footer */
  footer.overall-footer {
    margin-top: 0 !important;
  }

  /* Disclaimer: mostra solo versione corta */
  .component-disclaimer-text-long { display: none !important; }
  .component-disclaimer-text-short { display: block !important; }

  /* Padding sezioni ridotto */
  .foundations-module {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
  .foundations-module-heading {
    margin-bottom: 24px !important;
  }
}

/* ----------------------------------------------------------
   5. TABLET  768px – 1199px
   ---------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1199px) {

  /* Hero */
  .header-standard-module-headline h1,
  .foundations-heading-xxl-l {
    font-size: clamp(28px, 4vw, 48px) !important;
    line-height: 1.2 !important;
  }
  .header-standard-module-wrapper {
    min-height: auto !important;
  }

  /* Titoli sezioni */
  .foundations-heading-xxl {
    font-size: clamp(24px, 4vw, 38px) !important;
  }

  /* No overflow orizzontale */
  section, .foundations-module {
    overflow-x: hidden !important;
  }

  /* Immagini carousel */
  .carousel-with-media-module-image-wrapper img {
    max-width: 100% !important;
    height: auto !important;
  }
}

/* ----------------------------------------------------------
   6. STICKY HEADER – non blocca lo scroll
   ---------------------------------------------------------- */
.sticky-header {
  height: auto !important;
  overflow: visible !important;
}

/* ----------------------------------------------------------
   7. HAMBURGER – sempre cliccabile su mobile
   ---------------------------------------------------------- */
@media (max-width: 1199px) {
  .js-header-navbar-show-mobile-menu {
    display: flex !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    z-index: 10001 !important;
  }
}

/* ----------------------------------------------------------
   8. IMMAGINI LAZY
   ---------------------------------------------------------- */
img[data-src], img.lazyload, img.lazyloading {
  opacity: 1 !important;
  visibility: visible !important;
}

/* ----------------------------------------------------------
   9. CAROUSEL-WITH-MEDIA-MODULE – fix immagine sovrapposta al testo
      Struttura reale HTML:
      .foundations-card.foundations-card-big
        .foundations-card-heading  ← testo
        .foundations-card-image-wrapper.carousel-with-media-module-image-wrapper ← immagine
      
      In local-navbar-fix.css l'image-wrapper è position:absolute
      che su mobile copre il testo. Su mobile mettiamo tutto
      in colonna con immagine SOTTO il testo.
   ---------------------------------------------------------- */
@media (max-width: 767px) {

  /* La card grande: flex colonna */
  .js-carousel-with-media-module .foundations-card-big,
  .carousel-with-media-module .foundations-card-big {
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    overflow: hidden !important;
    min-height: auto !important;
    height: auto !important;
  }

  /* Testo (heading) in cima, larghezza piena */
  .js-carousel-with-media-module .foundations-card-big-heading,
  .carousel-with-media-module .foundations-card-big-heading {
    position: relative !important;
    width: 100% !important;
    z-index: 2 !important;
    padding: 24px 24px 16px !important;
  }

  /* Image wrapper: torna nel flusso normale, SOTTO il testo */
  .js-carousel-with-media-module .carousel-with-media-module-image-wrapper,
  .carousel-with-media-module .foundations-card-big-image-wrapper,
  .carousel-with-media-module .carousel-with-media-module-image-wrapper {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: 100% !important;
    height: 180px !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
  }

  /* Immagine dentro il wrapper */
  .carousel-with-media-module-image-wrapper img,
  .carousel-with-media-module .foundations-card-big-image-wrapper img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
  }

  /* Per le card scure (Cybersecurity, Supporto dedicato):
     L'immagine ha object-position diverso */
  #module9084 .carousel-with-media-module-image-wrapper img {
    object-position: right 15% !important;
  }
  #module10205 .carousel-with-media-module-image-wrapper img {
    object-position: center 10% !important;
  }

  /* Rimuovi pseudo-elemento gradient che copre l'immagine su mobile */
  #module9084 .carousel-with-media-module-image-wrapper::before,
  #module10205 .carousel-with-media-module-image-wrapper::before {
    background: linear-gradient(to bottom, rgba(12,24,41,0.5) 0%, transparent 100%) !important;
  }
}

/* ----------------------------------------------------------
   10. TABLET (768–1023px) – ridimensiona immagine
   ---------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1023px) {

  .carousel-with-media-module-image-wrapper {
    width: 42% !important;
  }

  .carousel-with-media-module-image-wrapper img {
    height: 88% !important;
    width: auto !important;
    max-width: 100% !important;
  }
}

/* ==============================================================
   11. FOOTER RESPONSIVE – Correzione globale
       Scope: SOLO ≤991px. Desktop ≥992px usa i valori CDN originali.
       Source of truth: footer-nav.js (NAV data + CSS accordion)
   ============================================================== */

/* ── Tablet + Mobile ≤991px ──────────────────────────────────── */
@media (max-width: 991px) {

  /* Elimina spazio bianco CDN (margin-top:120px / padding-bottom:135px) */
  footer.overall-footer {
    margin-top: 0 !important;
    padding-top: 40px !important;
    padding-bottom: 40px !important;
    height: auto !important;
    min-height: 0 !important;
  }

  /* Stack verticale */
  .overall-footer-top {
    flex-direction: column !important;
    align-items: flex-start !important;
    margin-bottom: 24px !important;
  }

  .overall-footer-top-left {
    display: block !important;
    margin-bottom: 0 !important;
  }

  /* Accordion ifsam-footer-nav: sempre visibile, larghezza piena */
  #ifsam-footer-nav {
    display: block !important;
    width: 100% !important;
    margin-top: 24px !important;
  }

  /* Griglia CDN: nascosta, sostituita dall'accordion footer-nav.js */
  .overall-footer-menu,
  .overall-footer-menu-wrapper {
    display: none !important;
  }
}

/* ── Mobile ≤767px ───────────────────────────────────────────── */
@media (max-width: 767px) {

  footer.overall-footer {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }

  .overall-footer-top {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  .overall-footer-top-left {
    margin-bottom: 4px !important;
  }

  #ifsam-footer-nav {
    margin-top: 8px !important;
    margin-bottom: 24px !important;   /* override desktop 48px */
  }

  /* Pulsanti footer: stack verticale */
  .overall-footer-btns {
    flex-direction: column !important;
    gap: 12px !important;
    margin-top: 20px !important;
    margin-bottom: 20px !important;
  }
  .overall-footer-btns-list {
    flex-direction: column !important;
    gap: 8px !important;
  }

  /* Note e copyright */
  .overall-footer-notes {
    font-size: 12px !important;
    line-height: 1.6 !important;
    margin-top: 16px !important;
  }
  .overall-footer-copyright {
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-top: 10px !important;
  }

  /* Rimuovi padding-bottom enorme CDN dal container */
  .overall-footer .container {
    padding-bottom: 0 !important;
  }
}