/**
 * Modulo: CTA Banner
 * File: cta-banner.css
 * Banner configurabile con call-to-action
 */

/* ============================================
   BLOCK: cta-banner
   ============================================ */
   .cta-banner {
    padding: var(--spacing-xl, 4rem) 0;
    margin: var(--spacing-lg, 2rem);
    background: var(--color-white);
    border-radius: var(--border-radius-lg, 12px);
    position: relative;
    overflow: hidden;
}

/* ============================================
  ELEMENT: cta-banner__section-title
  ============================================ */
.cta-banner__section-title {
   text-align: center;

}

@media (min-width: 768px) {
   .cta-banner__section-title {

   }
}

@media (max-width: 767px) {
   .cta-banner__section-title {
       font-size: var(--text-h3, 2rem);
       margin-bottom: var(--spacing-lg, 2rem);
   }
}

/* Varianti colore */
.cta-banner--primary {
   background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark, #1a7db8) 100%);
   color: var(--color-white);
}

.cta-banner--secondary {
   background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-dark, #b8274a) 100%);
   color: var(--color-white);
}

.cta-banner--accent {
   background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark, #a8c032) 100%);
   color: var(--text-dark);
}

.cta-banner--info {
   background: linear-gradient(135deg, var(--info) 0%, var(--info-dark, #4a8fc1) 100%);
   color: var(--color-white);
}

.cta-banner--success {
   background: linear-gradient(135deg, var(--success) 0%, var(--success-dark, #0088cc) 100%);
   color: var(--color-white);
}

.cta-banner--warning {
   background: linear-gradient(135deg, var(--warning) 0%, var(--warning-dark, #d68910) 100%);
   color: var(--text-dark);
}

/* Wrapper principale */
.cta-banner__wrapper {
   display: flex;
   grid-template-columns: 1fr;
   /* gap: var(--spacing-lg, 2rem); */
   align-items: center;
   justify-content: space-between;
}

/* ============================================
  ELEMENT: cta-banner__content
  ============================================ */
.cta-banner__content {
   display: flex;
   flex-direction: column;
   /* gap: var(--spacing-md, 1.5rem); */
   padding: var(--space-xl);
}

.cta-banner__title {

}

.cta-banner__subtitle {
   /* font-family: var(--font-primary); */
   /* font-size: var(--text-lg, 1.25rem); */
   /* font-weight: 600; */
   /* margin: 0; */
   /* color: inherit; */
   /* opacity: 0.9; */
}

.cta-banner__description {
   /* font-family: var(--font-primary); */
   /* font-size: var(--text-base, 1rem); */
   /* line-height: 1.7; */
   margin: 0;
   /* color: inherit; */
   /* opacity: 0.95; */
}

.cta-banner__description p {
   /* margin-bottom: var(--spacing-sm, 1rem); */
   margin-bottom: var(--spacing-sm, 1rem);
}

.cta-banner__description p:last-child {
   /* margin-bottom: 0; */
   margin-bottom: 0;
}

.cta-banner__description strong {
   font-weight: 700;
   color: inherit;
}

/* ============================================
  ELEMENT: cta-banner__actions
  ============================================ */
.cta-banner__actions {
   margin-top: var(--spacing-md, 1.5rem);
}

.cta-banner__button {
   display: inline-flex;
   align-items: center;
   gap: var(--spacing-sm, 0.75rem);
   text-decoration: none;
   transition: transform var(--transition-fast, 0.2s), box-shadow var(--transition-fast, 0.2s);
}

.cta-banner__button:hover {
   transform: translateY(-2px);
   box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.cta-banner__button i {
   font-size: 1em;
}

.cta-banner__button-text {
   font-weight: 600;
}

/* Pulsante su sfondi chiari (accent, warning) */
.cta-banner--accent .cta-banner__button,
.cta-banner--warning .cta-banner__button {
   background: var(--bg-dark);
   /* color: var(--color-white); */
}

.cta-banner--accent .cta-banner__button:hover,
.cta-banner--warning .cta-banner__button:hover {
   background: var(--text-dark);
   opacity: 0.9;
}

/* ============================================
  ELEMENT: cta-banner__image-wrapper
  ============================================ */
.cta-banner__image-wrapper {
   display: none;
   position: relative;
   border-radius: var(--border-radius-md, 8px);
   overflow: hidden;
   padding: var(--space-xs);
   max-width: 600px;
   min-height: 100%;
   height: -webkit-fill-available;
}

.cta-banner__image {
   width: 100%;
   height: 100%;
   object-fit: cover;
   border-radius: var(--border-radius-md, 8px);
   /* padding: var(--space-xs); */
}

.cta-banner__image-placeholder {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   min-height: 300px;
   background: rgba(0, 0, 0, 0.05);
   border: 2px dashed rgba(0, 0, 0, 0.2);
   color: rgba(0, 0, 0, 0.4);
}

.cta-banner__image-placeholder i {
   font-size: 3rem;
   margin-bottom: var(--spacing-sm, 1rem);
}

.cta-banner__image-placeholder p {
   margin: 0;
   font-size: var(--text-sm, 0.875rem);
}

/* Varianti con immagine */
.cta-banner--primary .cta-banner__image-placeholder,
.cta-banner--secondary .cta-banner__image-placeholder,
.cta-banner--info .cta-banner__image-placeholder,
.cta-banner--success .cta-banner__image-placeholder {
   background: rgba(255, 255, 255, 0.1);
   border-color: rgba(255, 255, 255, 0.3);
   color: rgba(255, 255, 255, 0.6);
}

/* ============================================
  MODIFIER: Layout Reverse
  ============================================ */
.cta-banner--reverse .cta-banner__wrapper {
   direction: rtl;
}

.cta-banner--reverse .cta-banner__content,
.cta-banner--reverse .cta-banner__image-wrapper {
   direction: ltr;
}

/* ============================================
  MODIFIER: Senza Immagine
  ============================================ */
.cta-banner--no-image .cta-banner__wrapper {
   max-width: 800px;
   margin: 0 auto;
}

/* ============================================
  MODIFIER: Senza Pulsante
  ============================================ */
.cta-banner--no-button .cta-banner__actions {
   display: none;
}

/* ============================================
  RESPONSIVE: Tablet e Desktop
  ============================================ */
@media (min-width: 768px) {
   .cta-banner {
       padding: var(--spacing-xxl, 5rem) 0;
   }

   .cta-banner__wrapper {
       grid-template-columns: 1fr 1fr;
       /* gap: var(--spacing-xl, 3rem); */
   }

   .cta-banner__image-wrapper {
       display: block;
   }

   .cta-banner__title {
   }

   .cta-banner__subtitle {
   }

   .cta-banner__description {
       font-size: var(--text-lg, 1.125rem);
   }
.cta-banner__content {
   padding: var(--space-2xl) var(--space-md) var(--space-2xl) var(--space-2xl);
}
}

@media (min-width: 1024px) {
   .cta-banner {
       padding: var(--spacing-xxl, 6rem) 0;
   }

   .cta-banner__wrapper {
       /* gap: var(--spacing-xxl, 4rem); */
   }

   .cta-banner__title {
       font-size: 4rem;
   }

}

/* ============================================
  RESPONSIVE: Mobile
  ============================================ */
@media (max-width: 767px) {
   .cta-banner {
       padding: var(--spacing-lg, 2rem) var(--spacing-md, 1.5rem);
       margin: var(--spacing-md, 1.5rem) 0;
       border-radius: var(--border-radius-md, 8px);
   }

   .cta-banner__subtitle {
       font-size: var(--text-base, 1rem);
   }

   .cta-banner__description {

   }

   .cta-banner__button {
       width: 100%;
       justify-content: center;
   }

   .cta-banner__image-wrapper {
       display: none;
   }

}

/* ============================================
  ACCESSIBILITY
  ============================================ */
.cta-banner:focus-within {
   outline: 2px solid var(--primary);
   outline-offset: 4px;
}

.cta-banner__button:focus {
   outline: 2px solid var(--color-white);
   outline-offset: 2px;
}

/* ============================================
  SWIPER MODE: Slide Multiple
  ============================================ */
.cta-banner--swiper {
   padding: var(--space-lg) 0;
   margin: 0;
   background: var(--bg-primary);
}

/* Slide singola senza Swiper */
.cta-banner__slide-single {
   width: 100%;
   display: flex;
   justify-content: center;
}

.cta-banner__slide-single .cta-banner__slide {
   width: 100%;
   min-width: 390px;
   max-width: 800px;
}

/* ✅ Su mobile: slide singola a larghezza piena */
@media (max-width: 767px) {
   .cta-banner__slide-single .cta-banner__slide {
       min-width: 100%;
       max-width: 100%;
   }
}

.cta-banner__swiper {
   position: relative;
   width: fit-content;
   overflow: hidden;
   /* ✅ Altezza predefinita per modalità verticale */
   min-height: 400px;
   max-height: 800px;
   margin: auto;
}

.cta-banner__swiper .swiper-wrapper {
   display: flex;
   /* gap: var(--space-md); */
   margin: auto;
   position: relative;
   max-width: 100vw;
}

.cta-banner__swiper .swiper-slide {
   height: auto;
   display: flex;
   /* Limita altezza slide in modalità verticale */
   max-height: 100%;
   padding: var(--space-sm);
   /* Dimensioni flessibili: min 390px, max 800px */
   width: auto;
   min-width: 390px;
   max-width: 800px;
   flex-shrink: 0;
}

/* Su mobile: slide a larghezza piena */
@media (max-width: 767px) {
   .cta-banner__swiper .swiper-slide {

       width: 100%;
   }
}

/* Slide individuale */
.cta-banner__slide {
   width: 100%;
   /* padding: var(--spacing-xl, 4rem); */
   margin: 0;
   background: var(--color-white);
   border-radius: var(--border-radius-lg, 12px);
   position: relative;
   overflow: hidden;
   pointer-events: none;
}

/* Varianti colore per slide */
.cta-banner__slide--primary {
   background: linear-gradient(135deg, var(--primary) -77%, #092a3e 100%);
   color: var(--color-white);
}

.cta-banner__slide--secondary {
   background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-dark, #b8274a) 100%);
   color: var(--color-white);
}

.cta-banner__slide--accent {
   background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark, #a8c032) 100%);
   color: var(--text-dark);
}

.cta-banner__slide--info {
   background: linear-gradient(135deg, var(--info) 0%, var(--info-dark, #4a8fc1) 100%);
   color: var(--color-white);
}

.cta-banner__slide--success {
   background: linear-gradient(135deg, var(--success) 0%, var(--success-dark, #0088cc) 100%);
   color: var(--color-white);
}

.cta-banner__slide--warning {
   background: linear-gradient(135deg, var(--warning) 0%, var(--warning-dark, #d68910) 100%);
   color: var(--bg-dark);
}

/* Wrapper slide */
.cta-banner__slide .cta-banner__wrapper {
   width: 100%;
   position: relative;
}

/* ============================================
  SWIPER NAVIGATION
  ============================================ */
.cta-banner__navigation {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   width: 100%;
   display: flex;
   justify-content: space-between;
   pointer-events: none;
   z-index: 10;
   padding: 0 var(--spacing-md, 1.5rem);
   opacity: 0;
}

/* ✅ Nascondi frecce su mobile e tablet */
@media (max-width: 1023px) {
   .cta-banner__navigation {
       display: none;
   }
}

/* ✅ Nascondi frecce quando non necessarie (classe aggiunta da JS) */
.cta-banner__navigation.cta-banner__navigation--hidden {
   display: none;
}

.cta-banner__btn {
   width: 48px;
   height: 48px;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.9);
   border: none;
   color: var(--text-dark);
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all var(--transition-fast, 0.2s);
   pointer-events: auto;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.cta-banner__btn:hover:not(:disabled) {
   background: var(--color-white);
   transform: scale(1.1);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.cta-banner__btn:disabled {
   opacity: 0.4;
   cursor: not-allowed;
}

.cta-banner__btn i {
   font-size: 1.25rem;
}

/* ============================================
  SWIPER PAGINATION
  ============================================ */
.cta-banner__pagination {
   position: absolute;
   bottom: var(--spacing-lg, 2rem);
   left: 50%;
   transform: translateX(-50%);
   z-index: 10;
   display: flex;
   justify-content: center;
   gap: var(--spacing-xs, 0.5rem);
}

.cta-banner__pagination .swiper-pagination-bullet {
   width: 12px;
   height: 12px;
   background: rgba(255, 255, 255, 0.5);
   opacity: 1;
   transition: all var(--transition-fast, 0.2s);
}

.cta-banner__pagination .swiper-pagination-bullet-active {
   background: var(--color-white);
   width: 24px;
   border-radius: 6px;
}

/* ============================================
  PREVENZIONE SELEZIONE TESTO
  ============================================ */
.cta-banner__slide,
.cta-banner__content {
   user-select: none;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   /* padding: var(--spacing-xl, 4rem); */
   width: 100%;
}

/* Rendere clickabile solo il pulsante CTA */
.cta-banner__slide {

}

.cta-banner__button,
.cta-banner__btn {
   pointer-events: auto;
   user-select: none;
}

/* ============================================
  SWIPER MODALITÀ VERTICALE
  ============================================ */
.cta-banner__swiper.swiper-vertical {
   height: 600px;
   max-height: 90vh;
}

.cta-banner__swiper.swiper-vertical .swiper-slide {
   height: auto;
   max-height: 100%;
}

.cta-banner__swiper.swiper-vertical .swiper-slide .cta-banner__slide {
   height: 100%;
   max-height: 100%;
   overflow-y: auto;
}

/* ✅ Navigazione verticale: posiziona a sinistra/destra invece di top */
.cta-banner__swiper.swiper-vertical .cta-banner__navigation {
   top: auto;
   left: 50%;
   transform: translateX(-50%);
   width: auto;
   height: 100%;
   flex-direction: column;
   justify-content: space-between;
   padding: var(--spacing-md, 1.5rem) 0;
}

.cta-banner__swiper.swiper-vertical .cta-banner__btn--prev {
   top: 0;
   left: 50%;
   transform: translateX(-50%);
}

.cta-banner__swiper.swiper-vertical .cta-banner__btn--next {
   bottom: 0;
   top: auto;
   left: 50%;
   transform: translateX(-50%);
}

/* ✅ Paginazione verticale: posiziona a destra invece di bottom */
.cta-banner__swiper.swiper-vertical .cta-banner__pagination {
   bottom: auto;
   top: 50%;
   left: var(--spacing-lg, 2rem);
   right: auto;
   transform: translateY(-50%);
   width: auto;
   flex-direction: column;
   gap: var(--spacing-xs, 0.5rem);
}

/* ============================================
  RESPONSIVE SWIPER
  ============================================ */
@media (max-width: 767px) {
   .cta-banner__slide {
       margin: 0;
       border-radius: var(--border-radius-md, 8px);
   }

   .cta-banner__navigation {
       padding: 0 var(--spacing-sm, 1rem);
   }

   .cta-banner__btn {
       width: 40px;
       height: 40px;
   }

   .cta-banner__pagination {
       bottom: var(--spacing-md, 1.5rem);
   }

   /* ✅ Modalità verticale su mobile: altezza ridotta */
   .cta-banner__swiper.swiper-vertical {
       height: 500px;
       max-height: 70vh;
   }

   .cta-banner__swiper.swiper-vertical .cta-banner__pagination {
       left: var(--spacing-sm, 1rem);
   }

}

/* ============================================
  PAGE BUILDER MODE
  ============================================ */
.cta-banner--page-builder-mode .cta-banner__image-placeholder {
   display: flex;
}

.cta-banner--page-builder-mode .cta-banner__slide {
   pointer-events: auto;
   user-select: auto;
}

.cta-banner--page-builder-mode .cta-banner__content {
   user-select: auto;
}

.container_slides:hover .cta-banner__navigation {
   opacity: 1;
}