/* ==========================================================================
   E42 Architect Block — styles structurels (v1.3.0)

   Deux modes de hauteur d'image (.e42-architect__media-frame = le cadre image) :

   - EQUAL (defaut) : "Hauteur egale au contenu".
     L'image egale exactement la hauteur du texte tant que celle-ci reste sous
     son ratio max. Sur grand ecran (texte court) -> hauteurs strictement egales
     (comme la maquette). Sur ecran etroit (texte plus haut) -> l'image se
     plafonne a son ratio max au lieu de s'etirer -> plus de sur-recadrage.
     Mecanique : cadre en aspect-ratio (= ratio max) + max-height:100% (= hauteur
     du contenu). Le cadre prend min(ratio max, hauteur contenu).

   - RATIO : "Ratio fixe". Le cadre garde toujours exactement le ratio choisi.
   ========================================================================== */

.e42-architect {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: var(--e42-gap, 48px);
    width: 100%;
    padding: 40px;
    box-sizing: border-box;
    background-color: #f4efe6;
}

.e42-architect--image-right {
    flex-direction: row-reverse;
}

.e42-architect--hover-zoom .e42-architect__media img {
    transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.e42-architect--hover-zoom .e42-architect__media:hover img {
    transform: scale(1.05);
}

/* --------------------------------------------------------------------------
   Colonne media (conteneur de positionnement du cadre)
   -------------------------------------------------------------------------- */
.e42-architect__media {
    display: flex;
    flex-direction: column;
    justify-content: var(--e42-media-valign, flex-start);
    flex: 0 0 var(--e42-media-width, 40%);
    max-width: var(--e42-media-width, 40%);
    box-sizing: border-box;
}

/* EQUAL : la colonne est aussi haute que le contenu */
.e42-architect--media-equal .e42-architect__media {
    align-self: stretch;
}

/* RATIO : la colonne = hauteur du cadre, positionnee dans la ligne */
.e42-architect--media-ratio .e42-architect__media {
    align-self: var(--e42-media-valign, flex-start);
}

/* --------------------------------------------------------------------------
   Cadre image : porte le ratio, l'image le remplit en object-fit:cover
   -------------------------------------------------------------------------- */
.e42-architect__media-frame {
    position: relative;
    width: 100%;
    aspect-ratio: var(--e42-ratio, 4 / 5);
    overflow: hidden;
}

/* EQUAL : le cadre ne depasse jamais la hauteur du contenu (cap au ratio max) */
.e42-architect--media-equal .e42-architect__media-frame {
    max-height: 100%;
}

.e42-architect__media-frame img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    max-width: none;                /* evite l'ecrasement par les styles de theme */
    object-fit: cover;
    object-position: center center;
}

/* --------------------------------------------------------------------------
   Colonne contenu
   -------------------------------------------------------------------------- */
.e42-architect__content {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
}

/* Titre */
.e42-architect__title {
    margin: 0 0 24px;
    font-family: inherit;           /* anti-contamination Times New Roman */
    line-height: 1.2;
}

/* Corps de texte (WYSIWYG) */
.e42-architect__text {
    font-family: inherit;
}

.e42-architect__text p {
    margin: 0 0 1.1em;
    font-family: inherit;
}

.e42-architect__text p:last-child {
    margin-bottom: 0;
}

/* Signature (SVG affiche en <img>) */
.e42-architect__signature {
    margin-top: 28px;
}

.e42-architect__signature-img {
    display: block;
    width: 180px;
    max-width: 100%;
    height: auto;
    margin: 0 0 8px;
}

.e42-architect__attribution {
    font-family: inherit;
    line-height: 1.4;
}

/* --------------------------------------------------------------------------
   Responsive : passage en colonne sous le breakpoint mobile Elementor (767px).
   Image pleine largeur. Le ratio est conserve par defaut ; une hauteur mobile
   peut etre forcee via le controle dedie (--e42-arch-mobile-height).
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {

    .e42-architect,
    .e42-architect--image-right {
        flex-direction: column;
    }

    .e42-architect__media {
        flex: 0 0 auto;
        max-width: 100%;
        width: 100%;
        align-self: stretch;
    }

    .e42-architect__media-frame {
        aspect-ratio: var(--e42-ratio, 4 / 5);
        max-height: none;
        height: var(--e42-arch-mobile-height, auto);
    }
}