/*
* Linee dedicate — dall'originale index.html r.212–276.
*
* In questo file: tutto l'aspetto e l'impaginato.
* Markup in templates/lines.php, controlli in includes/widgets/class-lines.php.
* Nessun .js: entrate dal meccanismo condiviso, hover come transition,
* decorazioni di fondo dal componente condiviso .adea-deco del tema.
*
* Come l'about, il contenitore NON è `.adea-sect`: nell'originale la shell ha
* classe `sect adea-lines-shell` e `.sect` non ha padding orizzontale di base
* (solo 20px sotto 960px), mentre `.adea-sect` ne mette 40px sempre.
*
* Cascata MISURATA sull'originale (1440/1200/1024/900/700/560/375):
*
* >1040 1024–1040 621–960 ≤620
* sezione 54/0/86 54/0/86 34/0/86 28/0/70
* shell pad 0 0 0 20px 0 20px
* testata .96fr 1fr g24 1fr g28 1fr g28 1fr g28
* titolo 54px 46px 40px 34px
* copycol pt74 max620 pt0 max760 pt0 max760 pt0 max760
* copy 17px 17px 17px 16px
* occhiello 13px 8/18 13px 8/18 13px 8/18 12px 8/16
* griglia .96fr 1fr g24 1fr g24 1fr g20 1fr g20
* card 84px+1fr g24 84px+1fr g24 74px+1fr g20 1fr g16
* pad 28/26 pad 28/26 pad 24/22 pad 22/18
* icona 78px 78px 66px 60px
* h3 / p 28 / 16 28 / 16 24 / 16 22 / 15
* foto stretch 520px 460px 320px
*
* Variabili controllate dall'editor: ripiego = valore dell'originale, un
* controllo per gradino (§13). ⚠️ Le media query riscrivono la variabile su un
* elemento DISCENDENTE rispetto a quello su cui Elementor stampa il desktop;
* dove ciò non è possibile (la sezione stessa) si scrive la proprietà finale.
*
* Indice: sezione e shell · testata · occhiello · titolo · testo · griglia ·
* card · icona · foto · breakpoint · reduced-motion
*/
/* ---------- sezione e shell ----------
`.adea-deco-host` (dal tema) porta position:relative e overflow:hidden: le
decorazioni sporgono oltre il bordo e vanno ritagliate lì. */
.adea-lines-section{
background:var(--adea-lines-bg,#fff);
padding:var(--adea-lines-pad-t,54px) 0 var(--adea-lines-pad-b,86px);
scroll-margin-top:90px;
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 */
}
.adea-lines-shell{position:relative;z-index:1;max-width:var(--adea-lines-maxw,1240px);margin:0 auto}
/* ---------- testata ---------- */
.adea-lines-head{
display:grid;
grid-template-columns:var(--adea-lines-head-cols,minmax(0,.96fr) minmax(0,1fr));
gap:var(--adea-lines-head-gap,24px);align-items:start;margin-bottom:34px;
}
/* ---------- occhiello ----------
Componente condiviso .adea-c-kicker + margine e icona, come nell'about.
⚠️ A ≤620 l'originale lo rimpicciolisce (r.422): il componente non lo fa,
quindi qui c'è un override per quel solo gradino. */
.adea-lines-section .adea-c-kicker{margin-bottom:22px}
.adea-lines-kicker-ico{display:inline-flex;align-items:center;justify-content:center;line-height:0}
.adea-lines-kicker-ico svg{transition:transform .35s var(--adea-ease-spring)}
.adea-c-kicker:hover .adea-lines-kicker-ico svg{transform:scale(1.18) rotate(-6deg)}
/* ---------- titolo e testo ---------- */
.adea-lines-title{
font-family:var(--adea-font-titoli,'Poppins',sans-serif);
font-size:var(--adea-lines-title-size,54px);line-height:1.08;letter-spacing:-.04em;
color:#15171b;margin:0;max-width:640px;font-weight:400;
}
.adea-lines-copycol{
padding-top:var(--adea-lines-copy-pt,74px);
max-width:var(--adea-lines-copy-maxw,620px);justify-self:start;
}
.adea-lines-copy{font-size:var(--adea-lines-copy-size,17px);line-height:1.58;color:#4c5864;margin:0}
/* ---------- griglia: colonna di card + fotografia ---------- */
.adea-lines-grid{
display:grid;
grid-template-columns:var(--adea-lines-grid-cols,minmax(0,.96fr) minmax(0,1fr));
gap:var(--adea-lines-grid-gap,24px);align-items:stretch;
}
.adea-lines-stack{display:flex;flex-direction:column;gap:14px}
/* ---------- card ----------
NON è `.adea-c-card` del tema: quella è bianca, con bordo e ombra e si alza
di 6px. Questa è grigia (#f3f3f1), senza ombra a riposo, e si alza di 5px con
un'altra curva. Riusarla significherebbe sovrascriverne ogni dichiarazione. */
.adea-line-card{
display:grid;
grid-template-columns:var(--adea-lines-card-cols,84px minmax(0,1fr));
gap:var(--adea-lines-card-gap,24px);align-items:center;
padding:var(--adea-lines-card-pad,28px 26px);
border-radius:14px;background:#f3f3f1;border:1px solid #ecebe6;
cursor:pointer;text-decoration:none;
transition:transform .28s cubic-bezier(.34,1.4,.64,1),box-shadow .28s ease,border-color .22s ease;
}
.adea-line-card:hover,.adea-line-card:focus-visible{
transform:translateY(-5px);box-shadow:0 22px 46px -24px rgba(10,37,64,.24);border-color:#d7e4d8;
}
.adea-line-card-ico{
width:var(--adea-lines-ico,78px);height:var(--adea-lines-ico,78px);
border-radius:14px;background:#0f7d37;color:#fff;
display:flex;align-items:center;justify-content:center;
box-shadow:0 14px 28px -18px rgba(15,125,55,.5);
transition:transform .4s var(--adea-ease-spring),box-shadow .3s ease;
}
.adea-line-card:hover .adea-line-card-ico,
.adea-line-card:focus-visible .adea-line-card-ico{
transform:scale(1.06) rotate(-4deg);box-shadow:0 18px 34px -16px rgba(15,125,55,.6);
}
.adea-line-card-body h3{
font-family:var(--adea-font-titoli,'Poppins',sans-serif);
font-size:var(--adea-lines-h3,28px);line-height:1.08;letter-spacing:-.03em;
color:#15171b;margin:0 0 12px;font-weight:400;
}
.adea-line-card-body p{
font-size:var(--adea-lines-cardp,16px);line-height:1.58;color:#4f5964;margin:0;max-width:460px;
}
/* ---------- fotografia ----------
`min-height:0` con `height:100%`: la foto si stira quanto la colonna delle
card. Sotto 1040 la colonna sparisce e l'altezza diventa fissa. */
.adea-lines-media{
border-radius:14px;overflow:hidden;background:#eef3f7;
height:var(--adea-lines-media-h,100%);min-height:var(--adea-lines-media-minh,0px);
}
.adea-lines-media img{
width:100%;height:100%;object-fit:cover;object-position:center;
transition:transform .8s var(--adea-ease);
}
.adea-lines-media:hover img{transform:scale(1.05)}
/* ---------- breakpoint originali (misurati) ---------- */
@media(max-width:1040px){
.adea-lines-head{--adea-lines-head-cols:1fr;--adea-lines-head-gap:28px}
.adea-lines-title{--adea-lines-title-size:var(--adea-lines-title-size-1040,46px)}
.adea-lines-copycol{--adea-lines-copy-pt:0px;--adea-lines-copy-maxw:760px}
.adea-lines-grid{--adea-lines-grid-cols:1fr}
.adea-lines-media{--adea-lines-media-h:520px;--adea-lines-media-minh:520px}
}
@media(max-width:960px){
/* ⚠️ proprietà, non variabile: Elementor stampa --adea-lines-pad-t su
QUESTO stesso elemento con specificità più alta e vincerebbe. */
.adea-lines-section{padding-top:var(--adea-lines-pad-t-960,34px)}
/* `.sect` dell'originale: sotto 960 il margine laterale è 20px */
.adea-lines-shell{padding-left:20px;padding-right:20px}
.adea-lines-title{--adea-lines-title-size:var(--adea-lines-title-size-960,40px)}
.adea-lines-grid{--adea-lines-grid-gap:20px}
.adea-line-card{--adea-lines-card-cols:74px minmax(0,1fr);--adea-lines-card-gap:20px;--adea-lines-card-pad:24px 22px}
.adea-line-card-ico{--adea-lines-ico:66px}
.adea-line-card-body h3{--adea-lines-h3:24px}
.adea-lines-media{--adea-lines-media-h:460px;--adea-lines-media-minh:460px}
}
@media(max-width:620px){
.adea-lines-section{
padding-top:var(--adea-lines-pad-t-620,28px);
padding-bottom:var(--adea-lines-pad-b-620,70px);
}
/* l'originale rimpicciolisce l'occhiello solo qui (r.422) */
.adea-lines-section .adea-c-kicker{font-size:12px;padding:8px 16px}
.adea-lines-title{--adea-lines-title-size:var(--adea-lines-title-size-620,34px)}
.adea-lines-copy{--adea-lines-copy-size:16px}
.adea-line-card{--adea-lines-card-cols:1fr;--adea-lines-card-gap:16px;--adea-lines-card-pad:22px 18px}
.adea-line-card-ico{--adea-lines-ico:60px}
.adea-line-card-body h3{--adea-lines-h3:22px}
.adea-line-card-body p{--adea-lines-cardp:15px}
.adea-lines-media{--adea-lines-media-h:320px;--adea-lines-media-minh:320px}
}
/* ---------- reduced-motion ----------
Come l'originale (r.740–745): niente sollevamento della card, niente
rotazione dell'icona, niente ingrandimento della foto. Le entrate le spegne
già il meccanismo condiviso, le decorazioni sono ferme perché la loro
animazione sta sotto `no-preference`. */
@media(prefers-reduced-motion:reduce){
.adea-line-card:hover,.adea-line-card:focus-visible,
.adea-line-card:hover .adea-line-card-ico,
.adea-line-card:focus-visible .adea-line-card-ico,
.adea-lines-media:hover img{transform:none!important}
.adea-lines-media img{transition:none!important}
}