/******** contenuti live *******/

.bg-live{
	background-image: url('../../img/bg-delta.png');
	background-position: 50%;
	background-repeat: no-repeat;
	background-size: cover;
}

/* pagine social (mockup v3 pag. 28): cerchi da 48px blu notte con bordo bianco, 24px tra l'uno e l'altro */
.social .pagine-social {
    gap: 1.5rem;
}
.social .btn.rounded-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    width: 48px;
    padding: 0;
    margin: 0 !important;
    font-size: 1.25rem;
    border: 1px solid #fff;
    background-color: var(--ngai-blu-notte) !important;
}
/* al passaggio del mouse e al focus da tastiera: pallino bianco e icona nera */
.social .btn.rounded-circle:hover,
.social .btn.rounded-circle:focus-visible {
    background-color: #fff !important;
    border-color: #fff;
    color: #000;
}
/* pulsante "Vai ai contenuti in evidenza" (contenutilive.socialhighlights.button) */
.social .btn-light {
    --bs-btn-bg: #f2f2f2;
    --bs-btn-color: var(--ngai-blu-notte);
    --bs-btn-padding-x: 1.5rem;
    --bs-btn-padding-y: .75rem;
    font-weight: 400;
    margin: 0 !important;
}

/* fascia social (mockup "Contenuti live (default)"): onde su fondo steel blue e, da 1200px, sfera a destra
   allineata al contenitore (sotto i 1200px coprirebbe il testo); nel calc il 100% vale la larghezza
   meno quella dell'immagine, per questo si aggiungono i 216px della sfera */
.bg-social{
	background-color: var(--ngai-steel-blue);
	background-image: url('../../img/bg-social-onde-2026.jpg');
	background-position: 50%;
	background-repeat: no-repeat;
	background-size: cover;
}
@media (min-width: 1200px) {
	.bg-social{
		background-image: url('../../img/sfera-social-2026.png'), url('../../img/bg-social-onde-2026.jpg');
		background-size: 216px auto, cover;
		background-position: right calc((100% + 216px - 1140px) / 2 + 64px) center, 50%;
	}
}
@media (min-width: 1400px) {
	.bg-social{
		background-position: right calc((100% + 216px - 1320px) / 2 + 64px) center, 50%;
	}
}

.bg-social > .container{
	padding-top: 2rem;
	padding-bottom: 2rem;
	
}
/* da desktop la fascia e' alta come nel mockup v3 (370px), contenuto centrato in verticale */
@media (min-width: 992px) {
	.bg-social{
		display: flex;
		align-items: center;
		min-height: 370px;
	}
}

.text-shadow{
	text-shadow: 0px 3px 5px #000000;
}

.badge.text-bg-info {
  color: var(--ngai-primary-blue) !important;
  background-color: var(--ngai-ice-blue) !important;
  font-weight: 400 !important;
  font-size: 16px !important;
}

.video-container {
  border-radius: 40px;
  overflow: hidden;
}

.video-container iframe {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
}

.video-container-shorts {
  border-radius: 40px;
  overflow: hidden;
}

.video-container-shorts iframe {
  width: 100%;
  height: 100%;
  aspect-ratio: 9 / 16;
}

/****** GALLERY CAROUSEL ******/
.my-carousel {
  margin: 2rem auto;
  position: relative;
}

.my-carousel .mycarousel-wrapper {
  overflow: hidden;
}

.my-carousel .mycarousel-track {
  display: flex;
  transition: transform 0.5s ease;
  will-change: transform;
  position: relative;
}

.my-carousel .mycarousel-item {
  flex-shrink: 0;
  padding: 0 12px; /* 24px tra due video, come nel mockup v3 */
  width: 100%; /* Usa il 100% per il carosello */
  cursor: pointer;
}

/* > 768px: 2 elementi */
@media (min-width: 992px) {
  .my-carousel .mycarousel-item {
    width: 50%; /* Aumenta la larghezza degli item a 50% per schermi più grandi */
  }
 
  
}

.my-carousel .card {
  margin: 0;
  background: transparent !important;
  border: none;
}
.my-carousel .card-body {
  padding: 0;
}
/* i video arrivano ai bordi del contenitore come nel mockup v3 */
.video-gallery .my-carousel {
  margin-top: 0;
  margin-left: -12px;
  margin-right: -12px;
}

/* Pulsanti */
.my-carousel .mycarousel-btn,
.foto-gallery-btn {
  background: transparent;
  border: none;
  font-size: 2em;
  cursor: pointer;
  z-index: 5;
  color: #fff;
}

.my-carousel .mycarousel-btn:hover,
.foto-gallery-btn:hover {
  opacity: 1;
}

.my-carousel .mycarousel-btn.prev,
.foto-gallery-btn.prev {
  left: 10px;
}

.my-carousel .mycarousel-btn.next,
.foto-gallery-btn.next {
  right: 10px;
}

/* Indicatori */
.my-carousel .mycarousel-indicators,
.foto-gallery-indicators,
.modal-indicators {
  display: flex;
  gap: 10px;
  z-index: 5;
  padding: 0 30px;
  margin-top: 13px;
}

.my-carousel .mycarousel-indicators button,
.foto-gallery-indicators button {
  border: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  cursor: pointer;
  background-color: #fff;
  user-select: none;
}

.modal-indicators button {
  border: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  cursor: pointer;
  background-color: #7e7d7d;
  user-select: none;
}

.my-carousel .mycarousel-indicators button.active,
.foto-gallery-indicators button.active,
.modal-indicators button.active {
  background-color: var(--ngai-orchid);
  opacity: 1;
}
/* pallino attivo dei caroselli della pagina: blu e piu' grande (mockup v3 pag. 28) */
.my-carousel .mycarousel-indicators button.active,
.foto-gallery-indicators button.active {
  background-color: var(--ngai-blu);
  width: 16px;
  height: 16px;
  margin: -2px 0;
}

.my-carousel.shorts-carousel .mycarousel-item {
  flex: 0 0 calc(100% / 6); /* verrà sovrascritto da media query se serve */
  max-width: calc(100% / 6);
  box-sizing: border-box;
}

@media (max-width: 1199px) and (min-width: 992px) {
  .my-carousel.shorts-carousel .mycarousel-item {
    flex: 0 0 calc(100% / 4);
    max-width: calc(100% / 4);
  }
}

@media (max-width: 991.98px) {
  .my-carousel.shorts-carousel .mycarousel-item {
   flex: 0 0 calc(100% / 2);
    max-width: calc(100% / 2);
  }
  
  .my-carousel .mycarousel-indicators, .foto-gallery-indicators, .modal-indicators {
   flex-wrap: wrap;
	}
}

/*** foto gallery ***/
	.foto-gallery-wrapper {
      overflow: hidden;
    }
    /* le foto arrivano ai bordi del contenitore (sotto i 576px il contenitore ha solo 12px di margine) */
    @media (min-width: 576px) {
      .foto-gallery-wrapper {
        margin: 0 -16px;
      }
    }

   .foto-gallery-track {
     display: flex;
     transition: transform 0.4s ease;
     will-change: transform;
   }

   .foto-gallery-item {
     flex-shrink: 0;
     padding: 0 16px; /* 32px tra due foto, come nel mockup v3 */
     width: 100%;
     cursor: pointer;
   }

   /* >=768px: 2 elementi */
    @media (min-width: 768px) {
    
     .card-foto {
	    height: 400px !important;
	}
   }
     
   @media (min-width: 992px) {
     .foto-gallery-item {
       width: 50%;
     }
   }

   /* >=1200px: foto piu' alte (mockup v3: 540x544); restano 2 per pagina come nel mockup */
   @media (min-width: 1200px) {
     .card-foto {
       height: 544px !important;
     }
   }
   
   .mycarousel-btn:disabled,
   .foto-gallery-btn:disabled {
     opacity: 0.5 !important;
     cursor: not-allowed;
   }
   
   #galleryModal .btn-close {
    --bs-btn-close-color: #fff;
   }

.card-foto{
	height: 280px;	
	border-radius: 40px;
}

.card-foto .img-fit {
	width: 100%;
    height: 100%;
    object-fit: cover;
}

/* gallery Highlights: le immagini contengono testo, quindi la card prende le proporzioni dell'immagine (4112x2580)
   invece dell'altezza fissa delle foto e l'immagine si vede intera, senza ritaglio */
.foto-gallery-highlights .card-foto {
	height: auto !important;
	aspect-ratio: 4112 / 2580;
	background-color: #fff;
}

.card-foto .card-img-overlay {
    position: absolute;
    top: initial;
    right: 0;
    bottom: 28px;
    left: 0;
    background: var(--ngai-steel-blue-90);
    overflow: hidden;
    border-radius: 0;
}

.card-foto .card-img-overlay .card-title{
	font-size: 1.2rem;
}

#galleryModal {
    z-index: 999999;
}

#galleryModal .foto-gallery-btn {
	color: #7e7d7d;
}
/* spazio sotto frecce e pallini per la posizione "1 / 82" (contatore-gallery, fuori dal flusso) */
#galleryModal .modal-footer {
	padding-bottom: 1.75rem;
}

#galleryModal .foto-gallery-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}


#galleryModal .img-fit {
	width: 100%;
    height: 100%;
    object-fit: fill;
}

.img-sm{
	max-width: 200px;
	height: auto;
}