/**
 * Cosamirai Property Accordion - Styles
 * Calqué sur cosamirai-image-accordion.
 */

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

.cosamirai-property-accordion .property-accordion-container {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 1rem;
    width: 100%;
    padding: 0 1rem;
}

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

.cosamirai-property-accordion .accordion-item {
    position: relative;
    min-width: 0;
    transition: flex 0.6s 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 );
    cursor: pointer;
    flex: 320 1 0%;
}

.cosamirai-property-accordion .accordion-item.active {
    flex: 472 1 0%;
}

.cosamirai-property-accordion .accordion-item.adjacent-primary {
    flex: 390 1 0%;
}

.cosamirai-property-accordion .accordion-item.adjacent-secondary {
    flex: 370 1 0%;
}

.cosamirai-property-accordion .accordion-item.far-1 {
    flex: 350 1 0%;
}

.cosamirai-property-accordion .accordion-item.far-2 {
    flex: 335 1 0%;
}

.cosamirai-property-accordion .accordion-item.far-3 {
    flex: 320 1 0%;
}

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

.cosamirai-property-accordion .accordion-item__image-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 0;
    aspect-ratio: var(--image-aspect, 3 / 2.5);
    transition: aspect-ratio 0.75s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.cosamirai-property-accordion .accordion-item.active .accordion-item__image-wrapper,
.cosamirai-property-accordion .accordion-item.adjacent-primary .accordion-item__image-wrapper,
.cosamirai-property-accordion .accordion-item.adjacent-secondary .accordion-item__image-wrapper {
    aspect-ratio: 33 / 47;
}

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

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

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

.cosamirai-property-accordion .accordion-item__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transition: transform 0.6s 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-property-accordion .accordion-item.active .accordion-item__image {
    transform: scale(1.02);
}

/* ============================================
   Overlay title (sur l'image)
   ============================================ */

.cosamirai-property-accordion .accordion-item__overlay-title {
    --overlay-max-font-size: 38;
    --overlay-max-font-ratio: 0.14;
    --overlay-right-margin: 1.8rem;
    position: absolute;
    left: 1.8rem;
    right: var(--overlay-right-margin);
    bottom: 1.8rem;
    font-family: "PP Fragment Glare", serif;
    font-weight: 300;
    color: var(--c-stone, #f5e5b9);
    white-space: nowrap;
    overflow: hidden;
    pointer-events: none;
    /* font-size défini par le JS (fit-to-width capé à --overlay-max-font-size) */
    border-top: 1px solid var(--c-stone, #f5e5b9);
    padding-top: 1rem;
}

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

.cosamirai-property-accordion .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;
    border-radius: 100%;
    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;
}

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

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

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

.cosamirai-property-accordion .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);
}

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

.cosamirai-property-accordion .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;
}

.cosamirai-property-accordion .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-property-accordion--preview {
    padding: 2rem;
}

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

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

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

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

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

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

@media (max-width: 1024px) {
    .cosamirai-property-accordion .property-accordion-container {
        gap: 0.75rem;
        padding: 0 1rem;
    }

    .cosamirai-property-accordion .accordion-item__button {
        font-size: 0.75rem;
        padding: 0.5rem 1rem;
    }
}

/* Carousel mode pour tablet/mobile - 800px */
@media (max-width: 800px) {
    .cosamirai-property-accordion {
        padding: 2rem 0;
        overflow: hidden;
    }

    .cosamirai-property-accordion.carousel-mode .property-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-property-accordion.carousel-mode .property-accordion-container.is-dragging {
        cursor: grabbing;
        transition: none;
    }

    .cosamirai-property-accordion.carousel-mode .accordion-item,
    .cosamirai-property-accordion.carousel-mode .accordion-item.active,
    .cosamirai-property-accordion.carousel-mode .accordion-item.adjacent-primary,
    .cosamirai-property-accordion.carousel-mode .accordion-item.adjacent-secondary,
    .cosamirai-property-accordion.carousel-mode .accordion-item.far-1,
    .cosamirai-property-accordion.carousel-mode .accordion-item.far-2,
    .cosamirai-property-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-property-accordion.carousel-mode .accordion-item.carousel-active {
        opacity: 1;
        transform: scale(1);
    }

    .cosamirai-property-accordion.carousel-mode .accordion-item .accordion-item__image-wrapper {
        aspect-ratio: 33 / 47 !important;
    }

    .cosamirai-property-accordion.carousel-mode .accordion-item__content {
        opacity: 1;
        max-height: none;
        padding-top: 1rem;
        visibility: visible;
        transform: none;
    }

    .cosamirai-property-accordion.carousel-mode .accordion-item__button {
        opacity: 1;
        visibility: visible;
    }
}

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