/**
 * =========================================================
 * FILE: /assets/css/sections/text-image.css
 * TEMA: Gieffe Classic
 * SCOPO: Stili sezione Testo + immagine del Page Designer
 * COPYRIGHT: 2026 by Gieffe Informatica
 * VERSIONE: 9.1
 * =========================================================
 */

.gf-text-image {
    display: grid;
    grid-template-columns: minmax(280px, .9fr) minmax(0, 1.1fr);
    align-items: center;
    gap: 70px;
}

.gf-text-image--image-right {
    grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr);
}

/*
 * La posizione dell'immagine viene già scritta nel markup dal renderer PHP.
 * Queste regole restano come protezione per eventuali contenuti salvati da versioni precedenti.
 */
.gf-text-image--image-left .gf-text-image__media { order: 1; }
.gf-text-image--image-left .gf-text-image__content { order: 2; }
.gf-text-image--image-right .gf-text-image__content { order: 1; }
.gf-text-image--image-right .gf-text-image__media { order: 2; }

.gf-text-image__media {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

.gf-text-image__content {
    min-width: 0;
}

.gf-text-image__content > :first-child {
    margin-top: 0;
}

.gf-text-image__content > :last-child,
.gf-text-image__content .gf-text:last-child,
.gf-text-image__content .gf-actions:last-child {
    margin-bottom: 0;
}

.gf-section--text-image.gf-section--padding-custom {
    /*
     * Il padding alto/basso personalizzato arriva come stile inline sulla <section>.
     * Questa regola elimina solo il padding predefinito, senza sovrascrivere gli inline style.
     */
    padding-top: 0;
    padding-bottom: 0;
}

.gf-text-image__media img {
    display: block;
    border-radius: 14px;
}

.gf-text-image--mode-natural .gf-text-image__media img {
    width: auto;
    height: auto;
    max-width: 100%;
}

.gf-text-image--mode-contain .gf-text-image__media img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.gf-text-image--mode-cover .gf-text-image__media img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.gf-text-image--mode-logo .gf-text-image__media img {
    width: auto;
    height: auto;
    max-width: min(100%, 320px);
    max-height: 180px;
    object-fit: contain;
}


/*
 * Regole locali più specifiche per il template Testo + immagine.
 * Servono a rendere identico il comportamento tra anteprima Customizer e frontend,
 * anche quando le vecchie regole comuni del tema sono ancora in cache.
 */
.gf-text-image__media--mode-cover,
.gf-text-image--mode-cover .gf-text-image__media {
    width: 100%;
}

.gf-text-image__media--mode-cover img.gf-managed-image,
.gf-text-image--mode-cover .gf-text-image__media img.gf-managed-image,
.gf-text-image--mode-cover .gf-text-image__media img.gf-image-mode--cover {
    display: block;
    width: var(--gf-image-width, 100%) !important;
    height: var(--gf-image-height, auto) !important;
    aspect-ratio: 16 / 9 !important;
    object-fit: cover !important;
    object-position: center center !important;
}

.gf-text-image__media--mode-contain img.gf-managed-image,
.gf-text-image--mode-contain .gf-text-image__media img.gf-managed-image,
.gf-text-image--mode-contain .gf-text-image__media img.gf-image-mode--contain {
    width: var(--gf-image-width, 100%) !important;
    height: var(--gf-image-height, auto) !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
}

.gf-text-image__media--mode-natural img.gf-managed-image,
.gf-text-image--mode-natural .gf-text-image__media img.gf-managed-image,
.gf-text-image--mode-natural .gf-text-image__media img.gf-image-mode--natural {
    width: var(--gf-image-width, auto) !important;
    height: var(--gf-image-height, auto) !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
}


/*
 * Fix frontend: il contenuto della pagina può contenere markup generato da
 * versioni precedenti. Assegnare esplicitamente riga/colonna evita che testo
 * e immagine finiscano su righe diverse nel sito pubblicato.
 */
.gf-text-image--image-left > .gf-text-image__media,
.gf-text-image--image-left > .gf-text-image__content,
.gf-text-image--image-right > .gf-text-image__media,
.gf-text-image--image-right > .gf-text-image__content {
    grid-row: 1;
}

.gf-text-image--image-left > .gf-text-image__media { grid-column: 1; }
.gf-text-image--image-left > .gf-text-image__content { grid-column: 2; }
.gf-text-image--image-right > .gf-text-image__content { grid-column: 1; }
.gf-text-image--image-right > .gf-text-image__media { grid-column: 2; }

/*
 * In modalità "Riempi tagliando" il contenitore diventa il box di taglio.
 * L'immagine riempie sempre il box, anche quando il frontend sta mostrando
 * contenuto salvato prima della correzione del renderer.
 */
.gf-text-image--mode-cover > .gf-text-image__media,
.gf-text-image__media--mode-cover {
    width: 100%;
    height: var(--gf-image-height, auto);
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.gf-text-image--mode-cover > .gf-text-image__media img,
.gf-text-image__media--mode-cover img,
.gf-text-image--mode-cover > .gf-text-image__media img.gf-managed-image,
.gf-text-image__media--mode-cover img.gf-managed-image,
.gf-text-image--mode-cover > .gf-text-image__media img.gf-image-mode--cover,
.gf-text-image__media--mode-cover img.gf-image-mode--cover {
    display: block;
    width: var(--gf-image-width, 100%) !important;
    height: 100% !important;
    max-width: 100% !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
    object-position: center center !important;
}

@media (max-width: 900px) {
    .gf-text-image,
    .gf-text-image--image-right {
        grid-template-columns: 1fr;
    }

    .gf-text-image--image-left .gf-text-image__media,
    .gf-text-image--image-left .gf-text-image__content,
    .gf-text-image--image-right .gf-text-image__media,
    .gf-text-image--image-right .gf-text-image__content {
        order: initial;
        grid-column: auto;
        grid-row: auto;
    }
}