Foldable Banner: Carousel

.c-foldable-banner {
  background-color: primary(sky, 120);
  position: relative;

  &.is-collapsed {
    border-top: none;
  }

}

/*------------------------------------*\
  CAROUSEL VARIANT
  Il wrapper ospita lo scrolling-banner (carosello) al posto di immagine+testo.
  Sfondo e padding restano quelli base del __wrapper (un solo livello).
\*------------------------------------*/
.c-foldable-banner--carousel {

  // Il wrapper non ha padding/max-width propri: i colori delle slide
  // riempiono il banner edge-to-edge (padding interno alla slide).
  .c-foldable-banner__wrapper {
    display: block;
    max-width: none;
    margin-inline: 0;
    padding: 0;
    position: relative;
  }

  .c-scrolling-banner {
    width: 100%;
  }

  // Pulsante di chiusura in overlay sopra al carosello.
  .c-foldable-banner__close-btn {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
  }

}

/*------------------------------------*\
  COLLAPSED STATE
\*------------------------------------*/
.c-foldable-banner.is-collapsed {

  .c-foldable-banner__wrapper {
    display: none;
  }

  .c-foldable-banner__open-btn {
    display: flex;
  }

}

// Variante carousel: in chiusura NON usiamo display:none (che azzererebbe
// le larghezze calcolate da Owl, richiedendo un refresh alla riapertura →
// glitch di altezza). Collassiamo l'altezza tenendo il wrapper renderizzato,
// così Owl resta sempre misurato e la riapertura è immediata e stabile.
.c-foldable-banner--carousel.is-collapsed {

  .c-foldable-banner__wrapper {
    display: block;
    height: 0;
    overflow: hidden;
  }

}
/*------------------------------------*\
  END COLLAPSED STATE
\*------------------------------------*/


.c-foldable-banner__wrapper {
  max-width: remify(900px);
  margin-inline: auto;
  gap: remify(16px);
  align-items: center;
  padding: remify(16px);
  display: flex;

  @include min-screen(bp(tablet)) {
    padding: remify(24px) remify(16px);
  }
}

.c-foldable-banner__image {
  display: none;

  @include min-screen(bp(phablet)) {
    display: block;
  }

}

.c-foldable-banner__text {
  @include font-scale(level-1-5);
  color: secondary(basic-white, 100);

  @include min-screen(bp(tablet)) {
    @include font-scale(level-2);
  }

  a {
    color: currentColor;
  }
}

.c-foldable-banner__close-btn {
  width: remify(44px);
  aspect-ratio: 1;
  background-color: transparent;
  border: none;
  cursor: pointer;
}

.c-foldable-banner__open-btn {
  display: none;
  position: absolute;
  left: 50%;
  bottom: -20px;
  transform: translateX(-50%);
  background-color: primary(sky, 120);
  border: none;
  align-items: center;
  justify-content: center;
  width: remify(48px);
  border-radius: 0 0 remify(8px) remify(8px);
  cursor: pointer;
  z-index: $z-Index-foldable-open-btn;
}