/**
 * Icon Box (widget Elementor del tema Philantrop) — pulsante "Scopri di più"
 *
 * Il tema lo mostra come link sottolineato (o senza sottolineatura, secondo
 * l'opzione del widget). Qui diventa il pulsante a pillola usato nel resto
 * del sito (.philantrop_button): angoli tondi, freccetta, riempimento al
 * passaggio del mouse. Come gli altri pulsanti: bordo giallo e, con il
 * mouse, riempimento giallo. Testo e freccetta restano del colore scelto da
 * Elementor nel widget (in home: bianco).
 */

/* Bordo disegnato con un'ombra interna invece di "border": il riempimento
   arriva fino al bordo esterno, senza la linea scura che restava tra bordo
   e riempimento sugli angoli tondi. Padding +2px per la stessa misura. */
.philantrop_icon_box_item .philantrop_icon_box_button {
	display: inline-block;
	line-height: 1.66;
	border: 0;
	box-shadow: inset 0 0 0 2px #FCBF00;
	border-radius: 50px;
	padding: 20px 35px 17px;
	overflow: hidden;
	position: relative;
	isolation: isolate; /* il riempimento (z-index -1) resta dentro il pulsante */
	transition: .3s;
}

.philantrop_icon_box_item .philantrop_icon_box_button span {
	position: relative;
}

/* Riempimento: stessa forma e animazione del .philantrop_button del tema
   (sostituisce la sottolineatura del tema, che usa lo stesso ::before) */
.philantrop_icon_box_item .philantrop_icon_box_button::before,
.philantrop_icon_box_item .philantrop_icon_box_button.button_underline_no::before {
	display: block;
	content: "";
	width: 200%;
	height: 300%;
	margin-left: -50%;
	border-radius: 50%;
	background: #FCBF00;
	position: absolute;
	top: -100%;
	bottom: auto;
	left: 0;
	z-index: -1;
	transform: translate3d(0, 68%, 0);
	transition: transform .6s cubic-bezier(.1, 0, .3, 1);
}

/* Freccetta: stessa icona SVG del .philantrop_button, colorata come il testo */
.philantrop_icon_box_item .philantrop_icon_box_button::after {
	content: "";
	display: inline-block;
	width: 9px;
	height: 9px;
	margin-left: 7px;
	position: relative;
	top: -1px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9'%3E%3Cpath d='M7.72029 1.27952L2.60273 1.27947L2.60273 0L8.99994 0.00005L9 6.39733L7.72055 6.39733L7.72029 1.27952Z'/%3E%3Cpath d='M0.90471 9L0 8.09528L8.03093 0.06426L8.93564 0.96898L0.90471 9Z'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9'%3E%3Cpath d='M7.72029 1.27952L2.60273 1.27947L2.60273 0L8.99994 0.00005L9 6.39733L7.72055 6.39733L7.72029 1.27952Z'/%3E%3Cpath d='M0.90471 9L0 8.09528L8.03093 0.06426L8.93564 0.96898L0.90471 9Z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.philantrop_icon_box_item .philantrop_icon_box_button:hover {
	transform: translate3d(0, -5px, 0);
	box-shadow: inset 0 0 0 2px #FCBF00, 0 6px 15px rgba(0, 0, 0, .15);
}

/* width: il tema all'hover porta il ::before (la sua sottolineatura) a 0 */
.elementor-widget-philantrop_icon_box .philantrop_icon_box_item .philantrop_icon_box_button:hover::before {
	width: 200%;
	transform: translate3d(0, 0, 0);
}

/* --- Pulsanti allineati in basso ---
   Con testi di lunghezza diversa i pulsanti finivano ad altezze diverse.
   Il box occupa tutta l'altezza della colonna (solo se è l'unico widget
   della colonna) e il pulsante va in fondo. */

.elementor-widget-wrap > .elementor-widget-philantrop_icon_box:only-child,
.elementor-widget-philantrop_icon_box:only-child > .elementor-widget-container,
.elementor-widget-philantrop_icon_box:only-child .philantrop_icon_box_widget,
.elementor-widget-philantrop_icon_box:only-child .philantrop_icon_box_item {
	height: 100%;
}

.philantrop_icon_box_item .philantrop_icon_box_content_cont {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.philantrop_icon_box_item .philantrop_icon_box_button {
	margin-top: auto;
}
