/* my-home-carousel.css */

/* Contenitore principale dello slider (la "finestra") */
.setion-wrap.slider {
	position: relative;
	overflow: hidden;
	width: 100%;
	padding-left: 0;
	padding-right: 0;
	box-sizing: border-box;
	max-width: 1620px;
	margin-inline: auto;
}

/* Track contenente tutte le slide */
.setion-wrap.slider .flex-wrap {
    display: flex;
    flex-wrap: nowrap;
    transition: transform 0.5s ease;
    will-change: transform;
    gap: 0;
    flex-direction: row;
    /*justify-content: center;*/
}

/* Stili specifici per gli articoli DENTRO UNO SLIDER */
.setion-wrap.slider .flex-wrap > article.production-article-item {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    background-color: transparent; 
    color: var(--text-color);
    /*aspect-ratio: 4/5; /* Esempio: Card più alta che larga (larghezza 2, altezza 3) */
                       /* Adatta questo rapporto per ottenere l'altezza desiderata in proporzione alla larghezza */
    /*overflow: hidden;*/ /* Assicura che il contenuto non esca dalla card con aspect-ratio */
    padding-inline: 20px;
}

.setion-wrap.slider .flex-wrap > article.production-article-item .item-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%; 
}

/* Contenitore dell'immagine nella card dello slider */
.setion-wrap.slider .flex-wrap > article.production-article-item .prod-img {
    width: 100%;
    height: 0; 
    padding-bottom: 100%; /* Per un aspect ratio 16:9 per l'immagine (9/16*100) */
                            /* Se vuoi che l'immagine sia quadrata: padding-bottom: 100%; */
                            /* Se vuoi 4:3: padding-bottom: 75%; */
    overflow: hidden;
    position: relative; 
}

.setion-wrap.slider .flex-wrap > article.production-article-item .prod-img img {
    position: absolute; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; 
    object-position: center; 
    display: block;
}

/* Box crediti */
.setion-wrap.slider .flex-wrap > article.production-article-item .article-content {
    padding: 15px;
    background-color: var(--background-color-grey-secondary); 
    flex-grow: 1; 
    display: flex;
    flex-direction: column;
    justify-content: space-between; 
    position: static; /* Resetta eventuali posizionamenti assoluti ereditati */
}

.setion-wrap.slider .flex-wrap > article.production-article-item .label-container {
    margin-bottom: 8px; 
    display: flex;
    flex-wrap: wrap;
    gap: 6px; 
}

.setion-wrap.slider .flex-wrap > article.production-article-item .label-container .item {
    font-size: 0.75em; 
    padding: 4px 8px;  
    text-transform: uppercase;
    font-weight: 600;
    line-height: 1;
}

.setion-wrap.slider .flex-wrap > article.production-article-item .label-container .genere.item {
    background-color: #333; 
    color: #fff;
    border: 1px solid #555;
}
.setion-wrap.slider .flex-wrap > article.production-article-item .label-container .sold-out-label.item {
    background-color: red; 
    color: #fff;
}

/*---------------label-----------------*/

.setion-wrap.slider .flex-wrap > article.production-article-item .prod-crediti {
	color: #fff;
	margin-bottom: 10px;
	position: relative;
}

div.prod-crediti div.label-container {
}



.setion-wrap.slider .flex-wrap > article.production-article-item .prod-crediti .prod-data {
	font-size: 1em;
	color: var(--text-color);
	margin-bottom: 4px;
}
.setion-wrap.slider .flex-wrap > article.production-article-item .prod-crediti .prod-attore {
    font-size: 0.9em;
    font-weight: bold;
    margin-bottom: 4px;
    display: none /*----NASCONDO ATTORE PRINCIPALE-----*/;
}

.setion-wrap.slider .flex-wrap > article.production-article-item .prod-crediti .prod-titolo {
	font-size: 1.6em;
	font-weight: bold;
	margin-bottom: 6px;
	line-height: 1;
}
.setion-wrap.slider .flex-wrap > article.production-article-item .prod-crediti .prod-titolo a {
    color: #fff;
    text-decoration: none;
}
.setion-wrap.slider .flex-wrap > article.production-article-item .prod-crediti .prod-titolo a {
	color: var(--rosso-primario);
	text-decoration: none;
}
.setion-wrap.slider .flex-wrap > article.production-article-item .prod-crediti .prod-titolo a:hover {
    text-decoration: underline;
}

.setion-wrap.slider .flex-wrap > article.production-article-item .prod-crediti .crediti-item { 
    font-size: 0.85em;
    color: #ddd;
    margin-bottom: 3px;
}

.setion-wrap.slider .flex-wrap > article.production-article-item .button-container a {
	padding: 0;
	font-size: 0.9em;
	text-align: center;
	text-decoration: none;
	border-radius: 0;
	flex-grow: 1;
	margin: 0;
}

.setion-wrap.slider .flex-wrap > article.production-article-item .button-container a {
	padding: 0;
	font-size: 0.9em;
	text-align: center;
	text-decoration: none;
	border-radius: 0;
	flex-grow: 1;
	margin: 0;
}

.setion-wrap.slider .flex-wrap > article.production-article-item .button-container .biglietti-button-style {
    background-color: #013d7c; 
    color: #fff;
}

.setion-wrap.slider .flex-wrap > article.production-article-item .button-container .scopri-button {
    background-color: #fff;
    color: #000;
    border: 1px solid #ccc;
}

/* --- Layout mobile: una card per volta --- */
@media (max-width: 767px) {
    .setion-wrap.slider .flex-wrap > article.production-article-item {
        flex: 0 0 100%;
        max-width: 100%;
        aspect-ratio: 3/4; /* Esempio per mobile, leggermente più alta che larga */
    }
    .setion-wrap.slider .flex-wrap > article.production-article-item .prod-img {
         padding-bottom: 75%; /* Per un aspect ratio immagine 4:3 su mobile */
    }
    .setion-wrap.slider .slider-prev,
    .setion-wrap.slider .slider-next {
        font-size: 20px;
        padding: 5px 8px;
    }
}

/* --- Layout tablet: 2 card per riga --- */
@media (min-width: 768px) and (max-width: 1023px) {
    .setion-wrap.slider .flex-wrap > article.production-article-item {
        flex: 0 0 50%; 
        max-width: 50%;
        aspect-ratio: 2/3; /* Manteniamo il ratio delle card desktop */
    }
     .setion-wrap.slider .flex-wrap > article.production-article-item .prod-img {
         /*padding-bottom: 60%;*/ /* Adatta se necessario, es. per un ratio immagine 5:3 */
    }
}

/* --- Layout desktop: 4 card in riga --- */
@media (min-width: 1024px) {
    body.home .sect-stagione-2025-2026 .flex-wrap article.production-article-item {
        padding: 10px;
    }
    .setion-wrap.slider .flex-wrap > article.production-article-item .prod-img {
         padding-bottom: 100%; /* Immagine 1:1 per desktop */
    }
    /*body.home .setion-wrap.slider[data-items-per-view="3"] {
        aspect-ratio: 2/3; 
    }*/

}

/* Stili per frecce e pallini */
.slider-dots {
  text-align: center;
  padding: 15px 0;
  display: flex; 
  justify-content: center; 
  align-items: center; 
  background-color: transparent;
}
.slider-dots button {
  border: none;
  width: 20px; 
  height: 20px;
  margin: 0 4px;
  border-radius: 50%;
  background: #4a0007; 
  cursor: pointer;
  padding: 0;
  transition: background-color 0.3s ease;
}
.slider-dots button.active {
  background: #c60013 
}
.slider-dots button:hover {
    background: #aaa;
}
.slider-dots button.active:hover {
    background: #fff; 
}

.slider-prev,
.slider-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.1); 
  border: 1px solid rgba(255,255,255,0.2);
  color: white;
  font-size: 24px; 
  padding: 6px 10px;
  cursor: pointer;
  z-index: 10;
  border-radius: 50%;
  line-height: 1;
  height: auto;
  width: auto;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
.slider-prev:hover:not(:disabled),
.slider-next:hover:not(:disabled) {
    background: rgba(255,255,255,0.2);
    border-color: rgba(255,255,255,0.3);
}

.slider-prev { transform: translate(20px, -140px); } 
.slider-next { right: 0; transform: translate(-20px, -140px); }

.slider-prev:disabled,
.slider-next:disabled {
    background: rgba(0,0,0,0.1);
    border-color: rgba(0,0,0,0.1);
    color: #888;
    cursor: not-allowed;
}

/* Assicura che tutti gli articoli dello slider abbiano una base corretta */
.setion-wrap.slider .flex-wrap article {
    flex-shrink: 0;
    width: 100%; /* Default per 1 slide visibile su mobile */
    box-sizing: border-box;
}

/* Regole esistenti per gli slider a 2 e 4 colonne */
@media (min-width: 768px) {
    .setion-wrap.slider:not(.slider-three-cols) .flex-wrap article {
         width: 50%; /* 2 slides */
    }
}
@media (min-width: 1024px) {
    .setion-wrap.slider:not(.slider-three-cols) .flex-wrap article {
        width: 25%; /* 4 slides */
    }
}

/* NUOVE REGOLE per lo slider a 3 colonne */
@media (min-width: 768px) {
    .slider.slider-three-cols .flex-wrap article {
        width: calc(100% / 3);
    }
}

/* Stili per i diversi temi dello slider */
.setion-wrap.slider.slider-light {
    background-color: transparent;
    color: #333;
}
.setion-wrap.slider.slider-light h2.main-title {
    color: #333;
}
.setion-wrap.slider.slider-light .flex-wrap > article.production-article-item {
    background-color: #ffffff; 
    color: #333; 
    /*border: 0px solid #ddd;*/
}
.setion-wrap.slider.slider-light .flex-wrap > article.production-article-item .prod-crediti,
.setion-wrap.slider.slider-light .flex-wrap > article.production-article-item .prod-crediti .prod-titolo a,
.setion-wrap.slider.slider-light .flex-wrap > article.production-article-item .prod-crediti .crediti-item {
    color: var(--text-color);
}
.setion-wrap.slider.slider-light .flex-wrap > article.production-article-item .prod-crediti .prod-data {
    color: var(--text-color);	
    font-size: 0.9em;
	font-style: italic;
}
.setion-wrap.slider.slider-light .flex-wrap > article.production-article-item .label-container .genere.item {
    background-color: #eee; 
    color: #333;
    border: 1px solid #ccc;
}
.setion-wrap.slider.slider-light .flex-wrap > article.production-article-item .button-container .biglietti-button-style {
    background-color: #8a000d; 
    color: #fff;
}
.setion-wrap.slider.slider-light .flex-wrap > article.production-article-item .button-container .scopri-button {
	background-color: #fff;
	color: #000;
	border: none
}
.setion-wrap.slider.slider-light .slider-dots button {
    background: #4a0007;
}
.setion-wrap.slider.slider-light .slider-dots button.active {
    background: #c60013;
}
.setion-wrap.slider.slider-light .slider-prev,
.setion-wrap.slider.slider-light .slider-next {
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(0,0,0,0.1);
    color: white;
}
.setion-wrap.slider.slider-light .slider-prev:hover:not(:disabled),
.setion-wrap.slider.slider-light .slider-next:hover:not(:disabled) {
    background: rgba(0,0,0,0.6);
}