/*
* Azienda in breve — dall'originale index.html r.381–393.
*
* In questo file: tutto l'aspetto.
* Markup in templates/company.php, controlli in includes/widgets/class-company.php.
* Nessun .js: entrate dal meccanismo condiviso, hover come transition.
*
* ⚠️ Il velo scuro NON è un livello a parte come nell'hero: qui è il primo
* strato dello stesso `background-image` del livello foto, come nell'originale.
* Si può fare perché lo strato che si ingrandisce in hover è UNO solo, e il
* velo deve ingrandirsi con lui (l'hero invece muove la foto sotto un velo
* fermo, e lì i livelli devono essere due).
*
* Cascata MISURATA sull'originale (1440/1200/1024/900/700/560/375):
*
* >1040 1024–1040 621–960 ≤620
* altezza min 620px 560px 500px 460px
* inner pad 84px 40px 84px 40px 72px 20px 58px 20px
* copy maxw 640px 640px 560px 560px
* occhiello 12px 12px 12px 11px
* titolo 68px 56px 48px 38px lh1.02
* testo 17px 17px 16px 15px lh1.55
* CTA 17px ico48 17px ico48 17px ico48 16px ico44 (dal componente)
*
* Variabili controllate dall'editor: ripiego = valore dell'originale, un
* controllo per gradino (§13). Le media query riscrivono la variabile su un
* elemento DISCENDENTE; sulla sezione stessa si scrive la proprietà finale.
*
* Indice: sezione · fondo · impaginato · occhiello · titolo · testo · CTA ·
* breakpoint · reduced-motion
*/
/* ---------- sezione ---------- */
.adea-company-banner{
position:relative;overflow:hidden;scroll-margin-top:90px;
min-height:var(--adea-company-minh,620px);
font-family:var(--adea-font-testo,'Source Sans 3',system-ui,sans-serif);
line-height:normal; /* il Kit impone 1.5; l'originale eredita normal dal body */
}
/* ---------- fondo: velo + fotografia in un solo livello ----------
`background-position:center 32%` non è centrato di proposito: alza
l'inquadratura per non tagliare il capannone. */
.adea-company-bg{
position:absolute;inset:0;background-size:cover;
background-position:var(--adea-company-focus,center 32%);
transition:transform 1.3s var(--adea-ease);
}
.adea-company-banner:hover .adea-company-bg{transform:scale(1.06)}
/* ---------- impaginato ----------
Il testo sta a DESTRA (`justify-content:flex-end`) perché il velo è più
denso da quella parte: il gradiente parte da 270deg, cioè da destra. */
.adea-company-inner{
position:relative;z-index:1;max-width:var(--adea-company-maxw,1440px);margin:0 auto;
min-height:var(--adea-company-minh,620px);
display:flex;align-items:center;justify-content:flex-end;
padding:var(--adea-company-pad,84px 40px);
}
.adea-company-copy{max-width:var(--adea-company-copy-maxw,640px);margin-left:auto}
/* ---------- occhiello ----------
NON è `.adea-c-kicker--dark`: quella variante viene dalle "Applicazioni"
(verde chiaro, 13px, spaziatura .04em, senza maiuscoletto). Questa è bianca,
12px, .08em e tutta maiuscola: differisce in tutto tranne il raggio. */
.adea-company-kicker{
display:inline-flex;align-items:center;padding:8px 16px;border-radius:999px;
background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);
font-family:var(--adea-font-titoli,'Poppins',sans-serif);
font-size:var(--adea-company-kicker-size,12px);font-weight:600;
letter-spacing:.08em;text-transform:uppercase;color:#fff;margin-bottom:24px;
}
/* ---------- titolo e testo ---------- */
.adea-company-title{
font-family:var(--adea-font-titoli,'Poppins',sans-serif);
font-size:var(--adea-company-title-size,68px);
line-height:var(--adea-company-title-lh,.98);
letter-spacing:-.05em;color:#fff;margin:0 0 24px;font-weight:400;max-width:620px;
}
.adea-company-text{
font-size:var(--adea-company-text-size,17px);
line-height:var(--adea-company-text-lh,1.62);
color:rgba(255,255,255,.84);margin:0 0 18px;max-width:600px;
}
/* ---------- CTA ----------
È `.adea-c-cta` del tema, che nasce proprio da `.adea-company-cta`: qui
combaciano tutte le misure, base e gradino ≤620 compresi. Restano solo il
margine sopra e l'ombra in hover, che il componente ha diversa. */
.adea-company-copy .adea-c-cta{margin-top:18px}
.adea-company-copy .adea-c-cta:hover,
.adea-company-copy .adea-c-cta:focus-visible{box-shadow:0 14px 30px -12px rgba(66,173,89,.45)}
/* ---------- breakpoint originali (misurati) ---------- */
@media(max-width:1040px){
/* ⚠️ proprietà, non variabile: Elementor stampa --adea-company-minh su
QUESTO stesso elemento con specificità più alta e vincerebbe. */
.adea-company-banner{min-height:var(--adea-company-minh-1040,560px)}
.adea-company-inner{min-height:var(--adea-company-minh-1040,560px)}
.adea-company-title{--adea-company-title-size:var(--adea-company-title-size-1040,56px)}
}
@media(max-width:960px){
.adea-company-banner{min-height:var(--adea-company-minh-960,500px)}
.adea-company-inner{min-height:var(--adea-company-minh-960,500px);--adea-company-pad:72px 20px}
.adea-company-copy{--adea-company-copy-maxw:560px}
.adea-company-title{--adea-company-title-size:var(--adea-company-title-size-960,48px)}
.adea-company-text{--adea-company-text-size:16px}
}
@media(max-width:620px){
.adea-company-banner{min-height:var(--adea-company-minh-620,460px)}
.adea-company-inner{min-height:var(--adea-company-minh-620,460px);--adea-company-pad:58px 20px}
.adea-company-kicker{--adea-company-kicker-size:11px}
.adea-company-title{--adea-company-title-size:var(--adea-company-title-size-620,38px);--adea-company-title-lh:1.02}
.adea-company-text{--adea-company-text-size:15px;--adea-company-text-lh:1.55}
}
/* ---------- reduced-motion ----------
Come l'originale (r.745): la fotografia non si ingrandisce più. */
@media(prefers-reduced-motion:reduce){
.adea-company-bg{transition:none!important}
.adea-company-banner:hover .adea-company-bg{transform:none!important}
}