/*
 * Fascia CTA con iscrizione — dall'originale index.html r.458–470.
 * È l'ultima sezione della home.
 *
 * In questo file: tutto l'aspetto.
 * Markup in templates/ctaband.php, controlli in includes/widgets/class-ctaband.php.
 * Nessun .js: entrate dal meccanismo condiviso, hover come transition, e la
 * form è una form vera che invia a un indirizzo (vedi il template).
 *
 * Come in "Azienda in breve", velo e fotografia sono UN solo background a due
 * strati: qui non c'è nemmeno l'ingrandimento in hover, quindi a maggior
 * ragione non servono due livelli.
 *
 * Cascata MISURATA sull'originale (1440/1200/1024/900/700/560/375):
 *
 *                >1040          1024–1040    621–960       ≤620
 *  altezza min   290px          280px        260px         290px
 *  inner pad     44/40          40/40        34/20         34/20
 *  griglia       1fr auto       1fr auto     1fr           1fr
 *                g 24/36        g 20/28      g 18          g 18
 *  h2            48px max700    42px max620  36px max560   31px lh1.03
 *  p             16px           16px         15px          15px + mb22
 *  form          460px, a destra             larga, sotto  in colonna
 *  form min-h    68px           68px         60px          60px
 *
 * ⚠️ L'altezza minima NON è monotona: scende a 260px sotto 960 e RISALE a
 * 290px sotto 620, perché lì la form va in colonna e occupa il doppio.
 * Non è un errore di trascrizione: misurato.
 *
 * Indice: sezione · fondo · impaginato · titolo e testo · form · campo ·
 *         bottone · breakpoint · reduced-motion
 */

/* ---------- sezione e fondo ---------- */
.adea-ctaband{
	position:relative;overflow:hidden;scroll-margin-top:80px;
	min-height:var(--adea-ctaband-minh,290px);
	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-ctaband-bg{position:absolute;inset:0;background-size:cover;background-position:var(--adea-ctaband-focus,center)}

/* ---------- impaginato ---------- */
.adea-ctaband-inner{
	position:relative;z-index:1;max-width:var(--adea-ctaband-maxw,1240px);margin:0 auto;
	min-height:var(--adea-ctaband-minh,290px);
	display:flex;align-items:center;padding:var(--adea-ctaband-pad,44px 40px);
}
.adea-ctaband-copy{
	max-width:1180px;width:100%;display:grid;
	grid-template-columns:var(--adea-ctaband-cols,minmax(0,1fr) auto);
	gap:var(--adea-ctaband-gap,24px 36px);align-items:end;
}

/* ---------- titolo e testo ----------
   Titolo e paragrafo stanno entrambi nella PRIMA colonna; la form occupa la
   seconda per tutte e due le righe. Sotto 960 la griglia diventa a colonna
   sola e la form scende sotto, larga quanto il testo. */
.adea-ctaband-copy h2{
	grid-column:1/2;
	font-family:var(--adea-font-titoli,'Poppins',sans-serif);
	font-size:var(--adea-ctaband-title-size,48px);
	line-height:var(--adea-ctaband-title-lh,.98);
	letter-spacing:-.05em;color:#fff;margin:0;font-weight:400;
	max-width:var(--adea-ctaband-title-maxw,700px);
}
.adea-ctaband-copy p{
	grid-column:1/2;
	font-size:var(--adea-ctaband-text-size,16px);line-height:1.55;
	color:rgba(255,255,255,.84);margin:0 0 var(--adea-ctaband-text-mb,0px);max-width:620px;
}

/* ---------- form ----------
   Il nome della classe dell'originale (`adea-footer-ref-subscribe`) dice che
   questa pillola è pensata anche per il footer. Finché la usa solo questa
   sezione resta qui: si promuove a componente condiviso quando arriva la
   seconda (§5 del prompt di porting). */
.adea-ctaband-form{
	grid-column:var(--adea-ctaband-form-col,2/3);grid-row:var(--adea-ctaband-form-row,1/span 2);
	align-self:center;justify-self:var(--adea-ctaband-form-justify,end);
	width:var(--adea-ctaband-form-w,460px);max-width:100%;
	display:flex;align-items:var(--adea-ctaband-form-align,center);
	flex-direction:var(--adea-ctaband-form-dir,row);gap:12px;
	background:#f6f4ef;border:1px solid #e2ddd4;
	border-radius:var(--adea-ctaband-form-radius,999px);
	padding:var(--adea-ctaband-form-pad,10px);
	min-height:var(--adea-ctaband-form-minh,68px);
}
.adea-ctaband-form input{
	flex:1;min-width:0;border:none;background:transparent;
	padding:var(--adea-ctaband-input-pad,0 20px);
	font-family:var(--adea-font-testo,'Source Sans 3',system-ui,sans-serif);
	font-size:var(--adea-ctaband-input-size,18px);color:#2f3842;outline:none;
	/* ⚠️ `line-height:normal` serve ANCHE qui, non basta averlo sulla sezione:
	   i controlli di modulo non ereditano il line-height dal genitore e il Kit
	   di Elementor gliene impone uno suo (1.5). Con quello il campo veniva 27px
	   invece di 25px e il bottone 54px invece di 55px (misurato). */
	line-height:normal;
}
.adea-ctaband-form input::placeholder{color:#9aa0a8}
.adea-ctaband-form button{
	border:none;background:var(--adea-verde,#42AD59);color:#fff;
	font-family:var(--adea-font-titoli,'Poppins',sans-serif);font-weight:600;font-size:16px;
	padding:15px 34px;border-radius:999px;cursor:pointer;line-height:normal;
	width:var(--adea-ctaband-btn-w,auto);
	transition:transform .18s cubic-bezier(.34,1.4,.64,1),box-shadow .22s ease,background .2s ease;
}
.adea-ctaband-form button:hover,.adea-ctaband-form button:focus-visible{
	background:var(--adea-verde-scuro,#379a4c);transform:translateY(-2px);
	box-shadow:0 12px 26px -10px rgba(66,173,89,.42);
}

/* etichetta per i lettori di schermo: visibile solo a loro.
   ⚠️ Aggiunta rispetto all'originale, che ha solo il placeholder — un campo
   senza etichetta non è annunciato. Deviazione DICHIARATA e migliorativa. */
.adea-ctaband-label{
	position:absolute;width:1px;height:1px;overflow:hidden;
	clip-path:inset(50%);white-space:nowrap;
}

/* ---------- breakpoint originali (misurati) ---------- */
@media(max-width:1040px){
	/* ⚠️ proprietà, non variabile: Elementor stampa --adea-ctaband-minh su
	   QUESTI stessi elementi con specificità più alta e vincerebbe. */
	.adea-ctaband{min-height:var(--adea-ctaband-minh-1040,280px)}
	.adea-ctaband-inner{min-height:var(--adea-ctaband-minh-1040,280px);--adea-ctaband-pad:40px 40px}
	.adea-ctaband-copy{--adea-ctaband-gap:20px 28px}
	.adea-ctaband-copy h2{--adea-ctaband-title-size:var(--adea-ctaband-title-size-1040,42px);--adea-ctaband-title-maxw:620px}
}
@media(max-width:960px){
	.adea-ctaband{min-height:var(--adea-ctaband-minh-960,260px)}
	.adea-ctaband-inner{min-height:var(--adea-ctaband-minh-960,260px);--adea-ctaband-pad:34px 20px}
	.adea-ctaband-copy{--adea-ctaband-cols:1fr;--adea-ctaband-gap:18px}
	.adea-ctaband-copy h2{--adea-ctaband-title-size:var(--adea-ctaband-title-size-960,36px);--adea-ctaband-title-maxw:560px}
	.adea-ctaband-copy p{--adea-ctaband-text-size:15px}
	.adea-ctaband-form{
		--adea-ctaband-form-col:auto;--adea-ctaband-form-row:auto;
		--adea-ctaband-form-justify:stretch;--adea-ctaband-form-w:100%;
		--adea-ctaband-form-minh:60px;
	}
}
@media(max-width:620px){
	/* risale a 290px: qui la form va in colonna e occupa il doppio */
	.adea-ctaband{min-height:var(--adea-ctaband-minh-620,290px)}
	.adea-ctaband-inner{min-height:var(--adea-ctaband-minh-620,290px)}
	.adea-ctaband-copy h2{--adea-ctaband-title-size:var(--adea-ctaband-title-size-620,31px);--adea-ctaband-title-lh:1.03}
	.adea-ctaband-copy p{--adea-ctaband-text-mb:22px}
	.adea-ctaband-form{
		--adea-ctaband-form-dir:column;--adea-ctaband-form-align:stretch;
		--adea-ctaband-form-radius:24px;--adea-ctaband-form-pad:14px;
		--adea-ctaband-input-pad:8px 8px 2px;--adea-ctaband-input-size:16px;
		--adea-ctaband-btn-w:100%;
	}
}

/* ---------- reduced-motion ----------
   L'originale non spegne il sollevamento del bottone qui, e nemmeno noi.
   Resta solo l'entrata, già spenta dal meccanismo condiviso. */