/*
 * custom.css — override del tema, scritti da noi.
 *
 * assets/css/styles.css è il CSS del tema acquistato (minificato): non si modifica.
 * Questo file è caricato DOPO styles.css, quindi a pari specificità vince per ordine
 * di sorgente. Ogni regola qui dentro deve dire quale regola del tema corregge.
 */

/* ===================== banner-intero ===================== */

/*
 * Titolo sempre su una riga.
 *
 * Il tema fissa .banner-style1 .main-title h1 a 110px, con 90px sotto 1200px, 70px
 * sotto 768px e 36px sotto 576px. Sono misure per breakpoint che ignorano sia la
 * larghezza reale della colonna (col-xxl-8 dentro container-fluid px-lg-16) sia la
 * lunghezza del testo: con "Giovanni De Giovanni" il titolo andava a capo da 576px
 * fino a ~1900px di viewport.
 *
 * Qui la dimensione si calcola su 100cqi — la larghezza della colonna, grazie al
 * container query di sotto, non del viewport — diviso il numero di caratteri del
 * titolo (--titolo-caratteri, emesso dal blocco) e per 0.5 em a carattere. 0.484 è
 * la larghezza media misurata sul font del tema; 0.5 tiene un margine di sicurezza.
 * Il min() conserva la dimensione massima del tema sui viewport molto larghi.
 *
 * Nessun pavimento sulla dimensione: un titolo molto lungo rimpicciolisce invece di
 * sforare la riga e generare scroll orizzontale.
 */
.banner-intero-titolo {
    container-type: inline-size;
}

.banner-style1 .main-title h1 {
    white-space: nowrap;
    font-size: min(110px, calc(100cqi / var(--titolo-caratteri, 20) / 0.5));
}

/*
 * Larghezza utile del titolo quando c'è la foto laterale.
 *
 * Da 768px in su la foto è position-absolute a destra: si sovrappone alla colonna
 * senza restringerla, quindi il titolo su una riga finirebbe sopra la persona. Le
 * percentuali sotto sono lo spazio a sinistra del soggetto misurato sul banner reale
 * (la foto è un ritaglio con alpha: il soggetto inizia al 15% della larghezza del
 * file, il resto è trasparente), preso al limite inferiore di ogni breakpoint:
 * 52,6% a 768px, 53,4% a 992px, 61,3% a 1200px. Da 1400px la colonna diventa
 * col-xxl-8 e lo spazio libero supera la sua larghezza: nessun vincolo serve.
 */
@media (min-width: 768px)  { .banner-intero-titolo--con-foto { max-width: 50%; } }
@media (min-width: 992px)  { .banner-intero-titolo--con-foto { max-width: 52%; } }
@media (min-width: 1200px) { .banner-intero-titolo--con-foto { max-width: 60%; } }
@media (min-width: 1400px) { .banner-intero-titolo--con-foto { max-width: 100%; } }

/* Foto laterale su desktop: era uno style inline nel blocco, spostato qui invariato. */
.banner-intero-foto-desktop {
    display: block;
    width: auto;
    max-height: 90vh;
    object-fit: contain;
}

/*
 * Foto laterale sotto i 768px: in flusso tra sottotitoli e bottone (il wrapper
 * desktop è position-absolute e resta nascosto), centrata e alta al massimo 40vh
 * per tenere il banner dentro una schermata.
 */
.banner-intero-foto-mobile {
    display: block;
    width: auto;
    max-height: 40vh;
    margin-inline: auto;
}