/* ============================================================
   AGENCE AUGUSTIN — Dimensions exactes des images pilotées par ACF

   Champs v1.0.101 : largeur et hauteur en pixels.
   Champs vides : rendu historique strictement inchangé.
   ============================================================ */

.aa-image-exact-frame {
    display: block;
    width: auto;
    height: auto;
    max-width: none;
    min-width: 0;
    min-height: 0;
    margin-right: auto;
    margin-left: auto;
    line-height: 0;
    overflow: visible;
    background: transparent;
}

.aa-image-exact-frame--width {
    width: var(--aa-image-display-width) !important;
}

.aa-image-exact-frame--height {
    height: var(--aa-image-display-height) !important;
}

.aa-image-exact-frame > .aa-image-resizable {
    display: block !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    transform-origin: center center;
}

.aa-image-exact-frame--width:not(.aa-image-exact-frame--height) > .aa-image-resizable {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
}

.aa-image-exact-frame--height:not(.aa-image-exact-frame--width) > .aa-image-resizable {
    width: auto !important;
    height: 100% !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
}

.aa-image-exact-frame--width.aa-image-exact-frame--height > .aa-image-resizable {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
}

/*
 * A resized image must no longer sit inside the old fixed-size coloured frame.
 * The frame itself follows the image and becomes transparent. The selector list
 * intentionally targets only media wrappers, never cards that also contain text.
 */
:is(
    .editorial__media,
    .image-banner__media,
    .large-image-text__media,
    .image-text-multiple__media,
    .founder__portrait,
    .timeline-step__media,
    .full-width-banner__media,
    .project-showcase__media,
    .triptych-card__media,
    .gallery-free__grid > figure,
    .contact-minimal__media,
    .aa-article-media,
    .aa-article-gallery__item
):has(> .aa-image-exact-frame),
.aa-image-custom-parent {
    width: fit-content !important;
    max-width: none !important;
    height: fit-content !important;
    min-width: 0 !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    justify-self: center;
    align-self: start;
    margin-right: auto !important;
    margin-left: auto !important;
    overflow: visible !important;
    background: transparent !important;
}

/* Hover zooms are disabled for exact boxes: otherwise the visible dimensions
   would no longer match the numbers entered in WordPress. */
.aa-image-exact-frame .aa-image-resizable:hover,
:is(
    .full-width-banner__media,
    .large-image-text__media,
    .image-text-multiple__media,
    .triptych-card__media
):has(> .aa-image-exact-frame):hover .aa-image-resizable {
    transform: none !important;
}

/* Hero media are absolutely positioned by the component and therefore remain
   direct images instead of using the exact-frame wrapper. */
#main-content .hero__media.aa-image-resizable--width {
    right: auto !important;
    left: 50% !important;
    width: var(--aa-image-display-width) !important;
    max-width: none !important;
    transform: translateX(-50%) !important;
}

#main-content .hero__media.aa-image-resizable--height {
    top: 50% !important;
    bottom: auto !important;
    height: var(--aa-image-display-height) !important;
    min-height: 0 !important;
    transform: translateY(-50%) !important;
}

#main-content .hero__media.aa-image-resizable--width:not(.aa-image-resizable--height) {
    height: auto !important;
    object-fit: contain !important;
}

#main-content .hero__media.aa-image-resizable--height:not(.aa-image-resizable--width) {
    width: auto !important;
    object-fit: contain !important;
}

#main-content .hero__media.aa-image-resizable--width.aa-image-resizable--height {
    object-fit: cover !important;
    transform: translate(-50%, -50%) !important;
}

/* Exact desktop dimensions are deliberately unrestricted. On small screens,
   only the width is capped to the viewport to prevent horizontal scrolling;
   the chosen proportions are preserved. */
@media (max-width: 1023px) {
    .aa-image-exact-frame--width {
        width: min(var(--aa-image-display-width), 100%) !important;
    }

    .aa-image-exact-frame--width:not(.aa-image-exact-frame--height) {
        height: auto !important;
    }

    .aa-image-exact-frame--width.aa-image-exact-frame--height {
        height: auto !important;
        aspect-ratio: var(--aa-image-display-width-number) / var(--aa-image-display-height-number);
    }

    #main-content .hero__media.aa-image-resizable--width {
        width: min(var(--aa-image-display-width), 100vw) !important;
    }

    #main-content .hero__media.aa-image-resizable--width.aa-image-resizable--height {
        height: auto !important;
        aspect-ratio: var(--aa-image-display-width-number) / var(--aa-image-display-height-number);
    }
}

.aa-image-custom-parent--width {
    width: var(--aa-image-parent-width) !important;
    max-width: none !important;
}

.aa-image-custom-parent--height {
    height: var(--aa-image-parent-height) !important;
    min-height: 0 !important;
}

@media (max-width: 1023px) {
    .aa-image-custom-parent--width {
        width: min(var(--aa-image-parent-width), 100%) !important;
    }

    .aa-image-custom-parent--width.aa-image-custom-parent--height {
        height: fit-content !important;
    }
}

/* ============================================================
   V138 — Portrait fondatrice : dimensions ACF contenues dans la colonne

   Les dimensions d'image choisies dans le CMS restent des préférences
   de rendu. Elles ne doivent jamais permettre au portrait de dépasser
   la largeur réellement disponible dans sa colonne.

   Correctif volontairement limité au Layout founder_portrait :
   - aucune modification du flux ou des retours à la ligne du texte ;
   - le portrait reste contenu dans sa colonne ;
   - une largeur exacte trop grande est réduite proportionnellement ;
   - si largeur + hauteur sont renseignées, leur ratio est conservé ;
   - les autres Layouts ne sont pas modifiés.
   ============================================================ */
#main-content .founder .founder__portrait:has(> .aa-image-exact-frame) {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    justify-self: stretch !important;
    align-self: center !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    overflow: hidden !important;
}

#main-content .founder .founder__portrait > .aa-image-exact-frame {
    box-sizing: border-box !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-right: auto !important;
    margin-left: auto !important;
    overflow: hidden !important;
}

#main-content .founder .founder__portrait > .aa-image-exact-frame--width {
    width: min(var(--aa-image-display-width), 100%) !important;
}

#main-content .founder .founder__portrait > .aa-image-exact-frame--width:not(.aa-image-exact-frame--height) {
    height: auto !important;
}

#main-content .founder .founder__portrait > .aa-image-exact-frame--width.aa-image-exact-frame--height {
    height: auto !important;
    aspect-ratio: var(--aa-image-display-width-number) / var(--aa-image-display-height-number) !important;
}

#main-content .founder .founder__portrait > .aa-image-exact-frame > .aa-image-resizable {
    min-width: 0 !important;
    max-width: 100% !important;
}

/* ============================================================
   Bandeau image + texte multiple

   Ce composant lit ses éléments depuis un repeater ACF sous forme de tableau.
   Les dimensions doivent donc piloter à la fois l'image et la colonne de grille :
   une largeur personnalisée ne doit pas rester enfermée dans l'ancienne moitié
   de page, et une hauteur personnalisée ne doit pas conserver le ratio 16/10.
   ============================================================ */
body main .image-text-multiple.section.image-text-multiple--custom-images {
    overflow: visible !important;
}

.image-text-multiple__row--custom-width.image-text-multiple__row--left {
    grid-template-columns: var(--aa-multiple-image-width) minmax(0, 1fr) !important;
}

.image-text-multiple__row--custom-width.image-text-multiple__row--right {
    grid-template-columns: minmax(0, 1fr) var(--aa-multiple-image-width) !important;
}

.image-text-multiple__row--custom-media .image-text-multiple__media {
    max-width: none !important;
    min-width: 0 !important;
    aspect-ratio: auto !important;
    overflow: visible !important;
    background: transparent !important;
}

.image-text-multiple__row--custom-width.image-text-multiple__row--left .image-text-multiple__media {
    justify-self: start !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
}

.image-text-multiple__row--custom-width.image-text-multiple__row--right .image-text-multiple__media {
    justify-self: end !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
}

.image-text-multiple__row--custom-height .image-text-multiple__media {
    height: var(--aa-multiple-image-height) !important;
    min-height: 0 !important;
}

@media (max-width: 1023px) {
    .image-text-multiple__row--custom-width.image-text-multiple__row--left,
    .image-text-multiple__row--custom-width.image-text-multiple__row--right {
        grid-template-columns: 1fr !important;
    }

    .image-text-multiple__row--custom-width .image-text-multiple__media {
        width: min(var(--aa-multiple-image-width), 100%) !important;
        justify-self: center !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }

    .image-text-multiple__row--custom-height.image-text-multiple__row--custom-width .image-text-multiple__media {
        height: auto !important;
    }
}