/* Layout strutturale condiviso dai widget "Card Promo"
   (inc/elementor/widgets/promo-card.php) e "Card Categoria"
   (inc/elementor/widgets/category-card.php) — quest'ultimo riusa
   apposta le stesse classi CSS per essere visivamente identico nello
   stile "Compatto", pur essendo un widget PHP separato.
   Colori, spaziature e tipografia sono gestiti dai controlli Elementor (CSS
   generato inline per ogni istanza) — qui restano solo le regole di
   struttura non editabili. */

/* Permette alla card di riempire tutta l'altezza disponibile quando il suo
   Contenitore Elementor ha "Dimensione: Crescere" (flex-grow) attivo — es.
   per far combaciare l'altezza totale di più card affiancate (vedi card
   "Community WhatsApp" accanto alla colonna con le 3 card social compatte,
   o le card categoria accanto alla Gift Card).
   Senza queste due regole l'altezza del Contenitore cresce ma i wrapper
   generati automaticamente da Elementor attorno al widget non la
   propagano fino alla card vera e propria, lasciando spazio vuoto in fondo. */
.elementor-widget-inerdini-promo-card,
.elementor-widget-inerdini-promo-card > .elementor-widget-container,
.elementor-widget-inerdini-category-card,
.elementor-widget-inerdini-category-card > .elementor-widget-container {
	height: 100%;
}

/* Il trucco "altezza combaciante" sopra (height:100% + "Crescere"/"Altezza min"
   impostati nei pannelli Elementor) è pensato SOLO per il layout desktop a righe,
   dove le card sono affiancate. Su tablet e mobile i Contenitori Elementor vanno
   in stack verticale (o comunque a riga singola): qui gli stessi valori fissi
   (specialmente "Altezza min" in px, che non è responsive) restavano applicati
   anche sotto i 1024px, creando dei box enormi con tanto spazio vuoto e larghezze
   diverse tra le card (il "casino" segnalato). Sotto i 1024px annulliamo quindi
   ogni altezza/larghezza fissa ereditata dal desktop e lasciamo che ogni card si
   adatti al proprio contenuto e occupi tutta la larghezza disponibile, in linea
   con le card compatte impilate accanto a lei. */
@media (max-width: 1024px) {
	/* "Crescere" (flex-grow) sul Contenitore è impostato da Elementor tramite una
	   custom property CSS SENZA scoping responsive (--flex-grow:1 vale su tutti i
	   breakpoint). Sotto i 1024px i Contenitori genitori vanno in colonna, quindi
	   quello stesso flex-grow:1 fa crescere la card in verticale fino a riempire
	   tutto lo spazio residuo della colonna: è la causa principale dei box enormi
	   con spazio vuoto. Lo annulliamo qui su ogni Contenitore/wrapper Elementor che
	   contiene una nostra card (a qualunque profondità), assieme ad "Altezza min" e
	   a una eventuale larghezza fissa. */
	:where(.e-con, .e-con-inner):has(.elementor-widget-inerdini-promo-card),
	:where(.e-con, .e-con-inner):has(.elementor-widget-inerdini-category-card) {
		flex-grow: 0 !important;
		width: 100% !important;
		height: auto !important;
		min-height: 0 !important;
	}

	.elementor-widget-inerdini-promo-card,
	.elementor-widget-inerdini-promo-card > .elementor-widget-container,
	.elementor-widget-inerdini-category-card,
	.elementor-widget-inerdini-category-card > .elementor-widget-container {
		height: auto !important;
		min-height: 0 !important;
	}

	.inerdini-promo-card {
		height: auto !important;
		min-height: 0 !important;
	}
}

.inerdini-promo-card {
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 1rem;
}

.inerdini-promo-card__icon {
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	overflow: hidden;
}

/* Foto della Card Categoria (o di Card Promo se in futuro userà un'icona
   immagine): riempie il riquadro e viene ritagliata alla sua forma grazie
   all'overflow:hidden sopra, qualsiasi sia il rapporto d'aspetto originale. */
.inerdini-promo-card__icon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Stile compatto: riga orizzontale (icona a sinistra, titolo + badge a
   destra) invece della colonna centrata dello stile Completo — pensato
   per impilare più card social in colonna con Elementor (Container in
   flex-direction: column). Il raggio dell'icona qui è quadrato/arrotondato
   (non cerchio) tramite il controllo "Raggio bordo icona" della sezione
   di stile "Card compatta". */
.inerdini-promo-card--compact {
	flex-direction: row;
	align-items: center;
	text-align: left;
	gap: 14px;
	text-decoration: none;
}

.inerdini-promo-card--compact .inerdini-promo-card__compact-body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	min-width: 0;
}

.inerdini-promo-card--compact .inerdini-promo-card__title {
	font-size: 16px;
	line-height: 1.25;
}

.inerdini-promo-card__compact-meta {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
}

.inerdini-promo-card__heading {
	display: flex;
	flex-direction: column;
}

.inerdini-promo-card__eyebrow,
.inerdini-promo-card__title,
.inerdini-promo-card__subtitle {
	margin: 0;
}

.inerdini-promo-card__eyebrow {
	font-size: 13px;
	letter-spacing: 1px;
	font-weight: 600;
	margin-bottom: 4px;
}

.inerdini-promo-card__title {
	font-size: 26px;
	font-weight: 700;
	line-height: 1.2;
}

.inerdini-promo-card__subtitle {
	font-size: 14px;
	line-height: 1.6;
}

.inerdini-promo-card__badge {
	border-radius: 20px;
	padding: 6px 14px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.inerdini-promo-card__badge-text {
	font-size: 12px;
	font-weight: 600;
}

.inerdini-promo-card__badge i,
.inerdini-promo-card__badge svg {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	font-size: 18px;
	line-height: 1;
}

.inerdini-promo-card__benefits {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
	margin: 0.5rem 0;
}

.inerdini-promo-card__benefit {
	display: flex;
	align-items: center;
	gap: 10px;
	border-radius: 8px;
	padding: 10px 14px;
	text-align: left;
}

.inerdini-promo-card__benefit i,
.inerdini-promo-card__benefit svg {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	font-size: 18px;
	text-align: center;
}

.inerdini-promo-card__benefit span {
	font-size: 13px;
}

/* Il bottone eredita la classe .elementor-button (vedi razox/assets/css/elementor.css)
   per l'effetto hover a riempimento diagonale identico al resto del sito;
   qui solo il layout interno (icona a destra, larghezza piena, centratura). */
.inerdini-promo-card__cta.elementor-button {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	text-decoration: none;
	margin-top: auto;
	padding: 12px;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
}

.inerdini-promo-card__cta i,
.inerdini-promo-card__cta svg {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	font-size: 16px;
	line-height: 1;
}