﻿.gallery-section{padding:8.8rem 0;}

.gallery-section h2{color: var(--text-color-primary);text-transform: uppercase;font-size: 1.5rem;font-family: var(--ff-default);margin: 0;line-height: 1;letter-spacing: .2rem;font-weight: 500;}
.gallery-section h3{font-size: 2.4rem;line-height: 1.3;text-transform: uppercase;color: var(--text-color-primary);text-align: center;font-weight: 300;margin:3.2rem 0 6.4rem}

.gallery-carousel{margin-top:6.4rem;cursor: grab;}
.gallery-carousel .swiper-wrapper{align-items:center}
.gallery-carousel .swiper-slide{background:var(--beige-color)}
.gallery-carousel .swiper-slide img{opacity:1;height:auto;width:100%;display:block;}
.gallery-carousel .custom-swiper-pagination-wrapper{margin-top: 3.2rem;}
.gallery-carousel .swiper-pagination.swiper-pagination-progressbar.swiper-pagination-horizontal{position: relative;height: 1px;background: var(--beige-color);background:#dad9d4}
.gallery-carousel .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {background: #838383;}

.gallery-section p{margin:6.4rem auto 3.2rem;width:100%}
.gallery-section .button--primary{margin:0}

@media(max-width:767px) {
    .gallery-section{padding:4.4rem 0;}
}


@media(min-width:650px){
    .gallery-section p{width:calc((100% - 11 * 2.4rem) / 12 * 10 + 9 * 2.4rem)}
}

@media(min-width:992px){
    .gallery-section p{width:calc((100% - 11 * 2.4rem) / 12 * 8 + 7 * 2.4rem)}
}

@media(min-width:1280px){
    .gallery-section p{width:calc((100% - 11 * 2.4rem) / 12 * 6 + 5 * 2.4rem);margin:6.4rem auto 3.2rem}
    /*.gallery-section{padding:17.6rem 0}*/
    .gallery-section h3{font-size:3.2rem}
    .gallery-carousel .custom-swiper-pagination-wrapper{margin-top: 4.8rem;}
}



/**
 * Swiper CSS - Dimensioni con Aspect Ratio
 * ==========================================
 * Sistema semplificato basato su size + aspect-ratio
 */

/* ============================================
   SWIPER CONTAINER
   ============================================ */

.swiper {width: 100%;margin: 0 auto;position: relative;}

/* ============================================
   ALLINEAMENTO BOTTOM
   ============================================ */

.swiper-wrapper {display: flex;align-items: flex-end !important;height: auto !important;}

/* ============================================
   SLIDE CONFIGURATION
   ============================================ */

.swiper-slide {width: auto !important;height: auto !important;display: flex;align-items: flex-end;justify-content: center;}

/* ============================================
   IMMAGINI BASE
   ============================================ */

.swiper-slide img {display: block;width: auto;height: auto;max-width: 100%;object-fit: cover;}

/* ============================================
   ASPECT RATIO - Mantiene le proporzioni
   ============================================ */

.swiper-slide.ratio-3-2 img {aspect-ratio: 3 / 2;}
.swiper-slide.ratio-3-4 img {aspect-ratio: 3 / 4;}
.swiper-slide.ratio-1-1 img {aspect-ratio: 1 / 1;}

/* ============================================
   DIMENSIONI - Desktop 1920px
   ============================================ */

/*.swiper-slide.size-xl img {max-width: 1010px;}
.swiper-slide.size-lg img {max-width: 866px;}
.swiper-slide.size-md img {max-width: 432px;}*/

.swiper-slide.size-xl img {width:auto;height:35vw}
.swiper-slide.size-lg img {width:auto;height:30vw}
.swiper-slide.size-md img {width:auto;height: 30vw;}


/* ============================================
   NAVIGATION
   ============================================ */

.swiper-button-next,.swiper-button-prev {color: #fff;background-color: rgba(0, 0, 0, 0.5);width: 50px;height: 50px;border-radius: 50%;transition: background-color 0.3s ease;}
.swiper-button-next:hover,.swiper-button-prev:hover {background-color: rgba(0, 0, 0, 0.7);}
.swiper-button-next::after,.swiper-button-prev::after {font-size: 24px;}

/* ============================================
   PAGINATION
   ============================================ */

/*.swiper-pagination {bottom: 20px !important;}*/
.swiper-pagination-bullet {background-color: #333;opacity: 0.5;width: 12px;height: 12px;transition: all 0.3s ease;}
.swiper-pagination-bullet-active {background-color: #333;opacity: 1;width: 14px;height: 14px;}

/* ============================================
   RESPONSIVE - Desktop Medium (1024px-1439px)
   ============================================ */

@media (min-width: 1024px) and (max-width: 1439px) {
/*    .swiper-slide.size-xl img {max-width: 757px;}
    .swiper-slide.size-lg img {max-width: 649px;}
    .swiper-slide.size-md img {max-width: 324px;}*/
    .swiper-slide.size-xl img {height:35vw}
    .swiper-slide.size-lg img {height:30vw}
    .swiper-slide.size-md img {height: 30vw;}

}

/* ============================================
   RESPONSIVE - Tablet (768px-1023px)
   ============================================ */

@media (min-width: 768px) and (max-width: 1023px) {
/*    .swiper-slide.size-xl img {max-width: 505px;}
    .swiper-slide.size-lg img {max-width: 433px;}
    .swiper-slide.size-md img {max-width: 216px;}*/

    .swiper-slide.size-xl img {height:35vw}
    .swiper-slide.size-lg img {height:30vw}
    .swiper-slide.size-md img {height: 30vw;}

    .swiper-button-next,.swiper-button-prev {width: 40px;height: 40px;}
    .swiper-button-next::after,.swiper-button-prev::after {font-size: 18px;}
}

/* ============================================
   RESPONSIVE - Mobile (481px-767px)
   ============================================ */

@media (min-width: 481px) and (max-width: 767px) {
/*    .swiper-slide.size-xl img {max-width: 354px;min-height: 200px;}
    .swiper-slide.size-lg img {max-width: 303px;min-height: 171px;}
    .swiper-slide.size-md img {max-width: 151px;min-height: 85px;}*/

    .swiper-slide.size-xl img {height:50vw}
    .swiper-slide.size-lg img {height:45vw}
    .swiper-slide.size-md img {height: 45vw;}

    .swiper-button-next,.swiper-button-prev {width: 36px;height: 36px;}
    .swiper-button-next::after,.swiper-button-prev::after {font-size: 16px;}
}

/* ============================================
   RESPONSIVE - Mobile Small (max-width: 480px)
   ============================================ */

@media (max-width: 480px) {
/*    .swiper-slide.size-xl img {max-width: 283px;min-height: 180px;}
    .swiper-slide.size-lg img {max-width: 242px;min-height: 154px;}
    .swiper-slide.size-md img {max-width: 121px;min-height: 77px;}*/

    .swiper-slide.size-xl img {height:50vw}
    .swiper-slide.size-lg img {height:45vw}
    .swiper-slide.size-md img {height: 45vw;}


    .swiper-button-next,.swiper-button-prev {width: 32px;height: 32px;}
    .swiper-button-next::after,.swiper-button-prev::after {font-size: 14px;}
    .swiper-pagination-bullet {width: 8px;height: 8px;}
    .swiper-pagination-bullet-active {width: 10px;height: 10px;}
}

/* ============================================
   VARIANTI STILISTICHE
   ============================================ */

.swiper.with-shadow .swiper-slide img {box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);}
.swiper.rounded .swiper-slide img {border-radius: 12px;}
.swiper.bordered .swiper-slide img {border: 4px solid white;box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);}

/* ============================================
   ACCESSIBILITÀ
   ============================================ */

.swiper-slide a:focus-visible {outline: 3px solid #4A90E2;outline-offset: 4px;border-radius: 4px;}
.swiper-button-next:focus-visible,.swiper-button-prev:focus-visible {outline: 3px solid #4A90E2;outline-offset: 2px;}

@media (prefers-reduced-motion: reduce) {
    .swiper-slide,.swiper-button-next,.swiper-button-prev,.swiper-pagination-bullet {transition: none !important;}
}

/* ============================================
   PRINT
   ============================================ */

@media print {
    .swiper-button-next,.swiper-button-prev,.swiper-pagination {display: none !important;}
    .swiper-wrapper {flex-wrap: wrap;}
    .swiper-slide {page-break-inside: avoid;margin-bottom: 20px;}
}
