/**
 * Cosamirai Image Accordion - Styles
 */

 .cosamirai-image-accordion {
    position: relative;
    width: 100%;
    padding:  0;
}

.image-accordion-container {
    display: flex;
    align-items: flex-start; /* Aligner en haut, l'escalier descend */
    justify-content: center;
    gap: 1rem;
    width: 100%;
    padding: 0 1rem;
}

/* ============================================
   Accordion Item
   ============================================ */

.accordion-item {
    position: relative;
    min-width: 0;
    transition: flex 0.75s cubic-bezier(0.05, 0.73, 0.59, 0.88);
    cursor: pointer;
    /* Ratio par défaut (far) - base 320 */
    flex: 320 1 0%;
}

/* Item actif (survolé ou par défaut) - ratio 472 */
.accordion-item.active {
    flex: 472 1 0%;
}

/* Adjacent primaire - écart notable avec active */
.accordion-item.adjacent-primary {
    flex: 390 1 0%;
}

/* Adjacent secondaire - écart réduit */
.accordion-item.adjacent-secondary {
    flex: 370 1 0%;
}

/* Items éloignés niveau 1 - écart réduit */
.accordion-item.far-1 {
    flex: 350 1 0%;
}

/* Items éloignés niveau 2 - écart réduit */
.accordion-item.far-2 {
    flex: 335 1 0%;
}

/* Items éloignés niveau 3 - écart réduit */
.accordion-item.far-3 {
    flex: 320 1 0%;
}

/* ============================================
   Image Wrapper - Effet escalier en hauteur via aspect-ratio
   ============================================ */

.accordion-item__image-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 0;
    /* Aspect ratio par défaut (far-2) - le plus court */
    aspect-ratio: var(--image-aspect, 3 / 2.5);
    transition: aspect-ratio 0.75s cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* Aspect ratios pour l'effet escalier - progression linéaire subtile */
/* Active = 3/4, puis décroissance de 0.06 par niveau */
.accordion-item.active .accordion-item__image-wrapper {
    aspect-ratio: 33 / 47;
}

.accordion-item.adjacent-primary .accordion-item__image-wrapper {
    aspect-ratio: 33 / 47;
}

.accordion-item.adjacent-secondary .accordion-item__image-wrapper {
    aspect-ratio: 33 / 47;
}

.accordion-item.far-1 .accordion-item__image-wrapper {
    aspect-ratio: 33 / 44;
}

.accordion-item.far-2 .accordion-item__image-wrapper {
    aspect-ratio: 33 / 40;
}

.accordion-item.far-3 .accordion-item__image-wrapper {
    aspect-ratio: 33 / 35;
}

.accordion-item__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transition: transform 0.75s linear( 0, 0.1538 4.09%, 0.2926 8.29%, 0.4173 12.63%, 0.5282 17.12%, 0.6255 21.77%, 0.7099 26.61%, 0.782 31.67%, 0.8425 37%, 0.8887 42.23%, 0.9257 47.79%, 0.9543 53.78%, 0.9752 60.32%, 0.9883 67.11%, 0.9961 75%, 1 );
}

.accordion-item.active .accordion-item__image {
    transform: scale(1.02);
}

/* ============================================
   Button
   ============================================ */

.accordion-item__button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0.75rem 1.5rem;
    background-color: var(--c-linen, #f5f0e8);
    color: var(--c-oak-text, #333);
    text-decoration: none;
    font-family: "PP Fragment Glare", serif;
    font-size: 0.875rem;
    font-style: italic;
    border-radius: 50px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s cubic-bezier(0.25, 0.1, 0.25, 1) 0.2s, visibility 0.5s cubic-bezier(0.25, 0.1, 0.25, 1) 0.2s;
}

.accordion-item.active .accordion-item__button {
    opacity: 1;
    visibility: visible;
}

.accordion-item__button:hover {
    background-color: var(--c-oak, #b48a61);
    color: white;
}

/* ============================================
   Content (titre + texte)
   ============================================ */

.accordion-item__content {
    padding-top: 1.5rem;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.6s cubic-bezier(0.25, 0.1, 0.25, 1) 0.15s, max-height 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.accordion-item.active .accordion-item__content {
    opacity: 1;
    max-height: 200px;
}

.accordion-item__title {
    font-family: "PP Fragment Glare", serif;
    font-size: 1.125rem;
    font-weight: 400;
    color: var(--c-oak-text, #333);
    margin: 0 0 0.5rem 0;
}

.accordion-item__text {
    font-family: "PP Fragment Sans", sans-serif;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--c-oak-text, #666);
    margin: 0;
}

/* ============================================
   Backend Preview Styles
   ============================================ */

.cosamirai-image-accordion--preview {
    padding: 2rem;
}

.image-accordion-container--preview {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
}

.accordion-item--preview {
    flex: 0 0 150px;
    text-align: center;
}

.accordion-item--preview img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 4px;
}

.accordion-item--preview span {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.75rem;
}

.placeholder {
    text-align: center;
    color: #666;
    font-style: italic;
    padding: 2rem;
}

/* ============================================
   Responsive
   ============================================ */

@media (max-width: 1024px) {
    .image-accordion-container {
        gap: 0.75rem;
        padding: 0 1rem;
    }
    
    .accordion-item__button {
        font-size: 0.75rem;
        padding: 0.5rem 1rem;
    }
}

/* Carousel mode pour tablet/mobile - 800px */
@media (max-width: 800px) {
    .cosamirai-image-accordion {
        padding: 2rem 0;
        overflow: hidden;
    }
    
    .cosamirai-image-accordion.carousel-mode .image-accordion-container {
        display: flex;
        flex-wrap: nowrap;
        gap: 1rem;
        padding: 0;
        cursor: grab;
        touch-action: pan-y pinch-zoom;
        user-select: none;
        -webkit-user-select: none;
        transition: transform 0.3s ease-out;
        will-change: transform;
    }
    
    .cosamirai-image-accordion.carousel-mode .image-accordion-container.is-dragging {
        cursor: grabbing;
        transition: none;
    }
    
    .cosamirai-image-accordion.carousel-mode .accordion-item,
    .cosamirai-image-accordion.carousel-mode .accordion-item.active,
    .cosamirai-image-accordion.carousel-mode .accordion-item.adjacent-primary,
    .cosamirai-image-accordion.carousel-mode .accordion-item.adjacent-secondary,
    .cosamirai-image-accordion.carousel-mode .accordion-item.far-1,
    .cosamirai-image-accordion.carousel-mode .accordion-item.far-2,
    .cosamirai-image-accordion.carousel-mode .accordion-item.far-3 {
        flex: 0 0 80%;
        width: 80%;
        min-width: 0;
        transition:transform 0.3s linear( 0, 0.1538 4.09%, 0.2926 8.29%, 0.4173 12.63%, 0.5282 17.12%, 0.6255 21.77%, 0.7099 26.61%, 0.782 31.67%, 0.8425 37%, 0.8887 42.23%, 0.9257 47.79%, 0.9543 53.78%, 0.9752 60.32%, 0.9883 67.11%, 0.9961 75%, 1 );;
    }
    
    .cosamirai-image-accordion.carousel-mode .accordion-item.carousel-active {
        opacity: 1;
        transform: scale(1);
    }
    
    .cosamirai-image-accordion.carousel-mode .accordion-item .accordion-item__image-wrapper {
        aspect-ratio: 33 / 47 !important;
    }
    
    .cosamirai-image-accordion.carousel-mode .accordion-item__content {
        opacity: 1;
        max-height: none;
        padding-top: 1rem;
        visibility: visible;
        transform: none;
    }
    
    .cosamirai-image-accordion.carousel-mode .accordion-item__button {
        opacity: 1;
        visibility: visible;
    }
}

@media (max-width: 500px) {
    .cosamirai-image-accordion.carousel-mode .accordion-item,
    .cosamirai-image-accordion.carousel-mode .accordion-item.active,
    .cosamirai-image-accordion.carousel-mode .accordion-item.adjacent-primary,
    .cosamirai-image-accordion.carousel-mode .accordion-item.adjacent-secondary,
    .cosamirai-image-accordion.carousel-mode .accordion-item.far-1,
    .cosamirai-image-accordion.carousel-mode .accordion-item.far-2,
    .cosamirai-image-accordion.carousel-mode .accordion-item.far-3 {
        flex: 0 0 85%;
        width: 85%;
    }
}