/*
 * Richiamo a un sito esterno — la riga blu cliccabile con icona, testo e
 * freccia (pagina Linea Apicoltura, verso api-adea.it).
 * Dall'originale index.html r.1564–1573 (CSS: styles.css r.981–996).
 *
 * Markup in templates/extlink.php, controlli in includes/widgets/class-extlink.php.
 * Nessun .js.
 *
 * Cascata MISURATA sull'originale (1440/1024/620/375):
 *
 *                  >620                    ≤620
 *  disposizione    in riga · gap 26        in colonna · gap 18
 *  imbottitura     32 / 36                 26 / 24
 *  titolo          21px                    18.5px
 *
 * ⚠️ Un gradino solo: **620**. La sezione che lo contiene è una `.sect`, quindi
 * porta anche il gradino dei margini laterali a **960** (`!important`, r.338).
 *
 * ⚠️ È un `<a>`: il colore va riaffermato in hover, altrimenti
 * `.elementor-kit-N a` lo tira sul blu del Kit e il testo sparisce sul blu.
 * Stessa famiglia del bottone della mappa nei contatti.
 *
 * Indice: sezione · riga · icona · testi · freccia · breakpoint · reduced-motion
 */

/* ---------- sezione ---------- */
.adea-extlink-sect{
	max-width:var(--adea-extlink-maxw,1240px);margin:0 auto;
	padding:var(--adea-extlink-pt,0px) var(--adea-extlink-pad-x,40px) var(--adea-extlink-pb,76px);
	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 */
}

/* ---------- la riga ----------
   Due classi: `.elementor a` e `.elementor-kit-N a` toccano ombra, colore e
   sottolineatura di ogni collegamento. */
.adea-extlink-sect .adea-extlink{
	display:flex;align-items:center;gap:var(--adea-extlink-gap,26px);
	background:linear-gradient(135deg,var(--adea-blu-chiaro,#0a5bb0),var(--adea-blu,#004F9E));
	border-radius:22px;padding:var(--adea-extlink-pad,32px 36px);
	box-shadow:0 34px 66px -38px rgba(0,79,158,.6);
	color:#fff;text-decoration:none;
	transition:transform .38s var(--adea-ease-spring),box-shadow .38s ease;
}
/* `:focus-visible` in più rispetto all'originale: stessa reazione da tastiera */
.adea-extlink-sect .adea-extlink:hover,
.adea-extlink-sect .adea-extlink:focus-visible{
	transform:translateY(-4px);box-shadow:0 42px 76px -36px rgba(0,79,158,.68);color:#fff;
}

/* ---------- icona ---------- */
.adea-extlink-ico{
	flex:none;width:60px;height:60px;border-radius:17px;
	background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.26);
	display:flex;align-items:center;justify-content:center;
}

/* ---------- testi ---------- */
.adea-extlink-body{flex:1;min-width:0}
.adea-extlink-body strong{
	display:block;font-family:var(--adea-font-titoli,'Poppins',sans-serif);
	font-weight:500;font-size:var(--adea-extlink-title,21px);letter-spacing:-.02em;
	margin-bottom:6px;
}
.adea-extlink-body span{
	display:block;font-size:15.5px;line-height:1.55;color:rgba(255,255,255,.8);
}

/* ---------- freccia ---------- */
.adea-extlink-go{
	flex:none;display:inline-flex;align-items:center;justify-content:center;
	width:46px;height:46px;border-radius:50%;
	background:var(--adea-verde,#42AD59);color:#fff;
	transition:transform .32s var(--adea-ease-spring);
}
.adea-extlink-sect .adea-extlink:hover .adea-extlink-go,
.adea-extlink-sect .adea-extlink:focus-visible .adea-extlink-go{transform:translateX(5px)}

/* ---------- breakpoint originali (misurati) ---------- */
@media(max-width:960px){
	/* il gradino di `.sect`: vale per ogni sezione che nell'originale ha
	   quella classe, anche se il suo blocco CSS non ne parla */
	.adea-extlink-sect{
		padding-left:var(--adea-extlink-pad-x-960,20px);
		padding-right:var(--adea-extlink-pad-x-960,20px);
	}
}
@media(max-width:620px){
	.adea-extlink-sect .adea-extlink{
		flex-direction:column;align-items:flex-start;
		gap:var(--adea-extlink-gap-620,18px);
		padding:var(--adea-extlink-pad-620,26px 24px);
	}
	.adea-extlink-body strong{font-size:var(--adea-extlink-title-620,18.5px)}
}

/* ---------- reduced-motion ----------
   Come l'originale (r.1012): non si alza e la freccia non scivola. */
@media(prefers-reduced-motion:reduce){
	.adea-extlink-sect .adea-extlink:hover,
	.adea-extlink-sect .adea-extlink:focus-visible,
	.adea-extlink-sect .adea-extlink:hover .adea-extlink-go,
	.adea-extlink-sect .adea-extlink:focus-visible .adea-extlink-go{transform:none!important}
}