/* =============================================================================
   Widget "Hero pagina" (titolo + immagine in evidenza). Solo CSS strutturale:
   colori, tipografia, padding, allineamento e colore sfumatura arrivano dai
   controlli Elementor. Look di default: immagine di sfondo (cover) che sfuma
   verso il colore di sfondo del sito, con il titolo in basso.
   ============================================================================= */

.cp-page-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* titolo in basso (override dal controllo Posizione verticale) */
    align-items: flex-start;   /* titolo a sinistra (override dal controllo Allineamento) */
    background-size: cover;
    background-position: center center; /* immagine sempre centrata, H e V */
    background-repeat: no-repeat;
    overflow: hidden;
    /* Default richiesti, senza doverli impostare a mano in Elementor:
       full-bleed + altezza 60vh. !important per battere i valori messi sulle
       istanze (es. min-height 825px).

       ⚠️ NIENTE `100vw` + margin trick (2026-07-20). `100vw` include la
       larghezza della scrollbar mentre l'area di contenuto no: il hero sforava
       di ~7px per lato e — peggio — trascinava con sé i `.boxed` al suo interno,
       che risultavano disallineati di 7px rispetto a header e footer.
       Verificato su tutte le pagine che usano il widget (Lo Studio, Imprese,
       Lavoratori): il container Elementor che lo ospita è SEMPRE già a piena
       larghezza, quindi `width:100%` dà lo stesso full-bleed senza sbordare.
       SE un domani il widget venisse messo dentro un container boxed, non
       uscirebbe più da solo: in quel caso si mette il container a piena
       larghezza in Elementor, non si torna al 100vw. */
    width: 100% !important;
    margin-inline: 0 !important;
    min-height: 60vh !important;
    /* Niente padding sotto: il titolo (flex-end) resta a filo del fondo
       qualunque cosa sia impostata sull'istanza. */
    padding-block-end: 0 !important;
}

/* Sfumatura nera SEMPRE presente sopra l'immagine (di default), per la
   leggibilità del titolo bianco: nero al 20% in alto → nero al 100% in basso.
   Non arriva MAI a 0 → tutta l'immagine resta almeno leggermente scurita. */
.cp-page-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.2) 0%,
        rgba(0, 0, 0, 1) 100%
    );
}

/* Immagine in modalità "sopra il titolo". */
.cp-page-hero__img {
    display: block;
    max-width: 100%;
    height: auto;
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
}

/* Titolo: default del look "hero" (bianco, font secondario/serif, grande, in
   basso a sinistra). La classe `boxed` (aggiunta in render) lo allinea alla
   griglia dei contenuti del sito. Tutto è sovrascrivibile dai controlli
   Colore / Tipografia del widget. */
.cp-page-hero__title {
    position: relative;
    z-index: 1;
    margin: 0;
    /* Stacco dal fondo = 2% (il valore del tuo hero fatto a mano), SENZA il
       padding extra del box → il titolo non è né troppo alto né a filo. */
    padding-block-end: 2%;
    color: var(--cp-white, #fff);
    /* Font vincolato al SECONDARIO del pannello (Instrument Serif) con !important:
       serve a battere eventuali Tipografia→Famiglia-font impostate a mano sulle
       vecchie istanze del widget (residui dell'era "Inter"), così il titolo hero
       segue SEMPRE il font del pannello. Size/peso/interlinea restano regolabili. */
    font-family: var(--Font-secondario, var(--cp-font-2, Georgia, serif)) !important;
    /* Tipografia allineata all'hero fatto a mano (riferimento): 70px in alto su
       desktop, scala giù su mobile; interlinea 1.0. !important per battere le
       Tipografia impostate sulle vecchie istanze del widget (es. 82,5px), così
       ogni hero esce identico senza sistemare istanza per istanza. */
    /* Stessa curva del resto del sito (min = 16 + (max−16) × 0.5, interpolata
       tra 390 e 1440px). La formula precedente — clamp(40px, 5.5vw, 70px) —
       restava piatta a 40px fino a ~730px di viewport: a 600px l'hero risultava
       PIÙ PICCOLO di un titolo di sezione (42px), invertendo la gerarchia.
       Dal 2026-07-23 la misura arriva dal PANNELLO Stile (Dimensione H1 →
       --cp-h1-fs, già emessa in forma fluida da panel.php con questa stessa
       curva); il clamp qui sotto è solo il fallback a pannello vuoto (=70px). */
    font-size: var(--cp-h1-fs, clamp(43px, calc(43px + 27 * (100vw - 390px) / 1050), 70px)) !important;
    line-height: 1.0 !important;
    /* Regular con !important: Instrument Serif ha SOLO il 400 → un peso maggiore
       diventerebbe un finto-bold sintetizzato. Batte anche eventuali pesi
       impostati a mano sulle vecchie istanze del widget. */
    font-weight: 400 !important;
    text-wrap: balance;
}

/* Placeholder visibile solo in editor quando la pagina non ha ancora un titolo. */
.cp-page-hero__placeholder {
    opacity: 0.6;
    font-style: italic;
}