/**
 * Projects Slider (widget Elementor del tema Philantrop) — scritta laterale
 * e testo delle card
 *
 * Il tema la mette a 80px, su due righe per i testi lunghi e tagliata dai
 * bordi della card. Qui è più piccola, su una riga e tutta visibile.
 * La dimensione si può cambiare per dispositivo da Elementor:
 * Stile › Projects Slider Settings › Dimensione scritta laterale.
 */

.philantrop_projects_slider_widget .philantrop_projects_item_subtitle {
	bottom: 25px;
	right: 12px;
	font-size: 48px;
	line-height: 1;
	white-space: nowrap;
}

@media only screen and (max-width: 1024px) {
	.philantrop_projects_slider_widget .philantrop_projects_item_subtitle {
		font-size: 44px;
	}
}

@media only screen and (max-width: 767px) {
	.philantrop_projects_slider_widget .philantrop_projects_item_subtitle {
		font-size: 40px;
	}
}

/* --- Testo della card (titolo, riassunto, link) ---
   Il tema lo tiene spostato sotto il fondo della card (bottom: -140px circa)
   e lo fa salire al passaggio del mouse: a riposo il riassunto resta tagliato
   a metà e sui telefoni, senza hover, non si legge mai tutto. */

/* Spazio a destra per non finire sotto la scritta verticale */
.philantrop_projects_slider_widget .philantrop_causes_slider .philantrop_projects_item_content_container {
	padding-right: 75px;
}

.philantrop_projects_slider_widget .philantrop_causes_slider .philantrop_projects_item_content_container h5 {
	max-width: 100%;
}

/* Mouse: a riposo solo il titolo; riassunto e link compaiono quando il testo sale */
@media (hover: hover) and (min-width: 768px) {
	.philantrop_projects_slider_widget .philantrop_projects_item_excerpt,
	.philantrop_projects_slider_widget .philantrop_projects_item_link {
		opacity: 0;
		transition: opacity .3s;
	}

	.philantrop_projects_slider_widget .philantrop_projects_item_wrapper:hover .philantrop_projects_item_excerpt,
	.philantrop_projects_slider_widget .philantrop_projects_item_wrapper:hover .philantrop_projects_item_link {
		opacity: 1;
	}
}

/* --- Link "Scopri di più" come pulsante ---
   Il tema lo mostra come link sottolineato. Qui diventa la pillola degli
   Icon Box (assets/css/icon-box.css): bordo bianco, freccetta, con il mouse
   riempimento bianco e testo scuro. Bordo fatto con ombra interna, così il
   riempimento arriva al bordo esterno senza linea scura sugli angoli.
   Prefisso del widget: vince sulla "transition: opacity" più sotto, così
   anche colore e spostamento all'hover restano animati. */

.elementor-widget-philantrop_projects_slider .philantrop_projects_slider_widget .philantrop_projects_item_link {
	display: inline-block;
	font-size: 14px;
	line-height: 1.66;
	color: #fff;
	box-shadow: inset 0 0 0 2px #fff;
	border-radius: 50px;
	padding: 20px 35px 17px;
	overflow: hidden;
	position: relative;
	isolation: isolate; /* il riempimento (z-index -1) resta dentro il pulsante */
	transition: .3s;
}

/* Riempimento: stessa forma e animazione del .philantrop_button del tema
   (sostituisce la sottolineatura del tema, che usa lo stesso ::before) */
.elementor-widget-philantrop_projects_slider .philantrop_projects_slider_widget .philantrop_projects_item_link::before {
	content: "";
	width: 200%;
	height: 300%;
	margin-left: -50%;
	border-radius: 50%;
	background: #fff;
	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_projects_slider_widget .philantrop_projects_item_link::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;
}

/* Specificità alta: il tema all'hover porta il ::before (la sua sottolineatura)
   a larghezza 0 e cambia il colore del testo */
.elementor-widget-philantrop_projects_slider .philantrop_projects_slider_widget .philantrop_projects_item_link:hover {
	color: #4A4B54;
	transform: translate3d(0, -5px, 0);
	box-shadow: inset 0 0 0 2px #fff, 0 6px 15px rgba(0, 0, 0, .15);
}

.elementor-widget-philantrop_projects_slider .philantrop_projects_slider_widget .philantrop_projects_item_link:hover::before {
	width: 200%;
	transform: translate3d(0, 0, 0);
}

/* Touch e mobile (niente hover): testo sempre tutto visibile */
@media (hover: none), (max-width: 767px) {
	.philantrop_projects_slider_widget .philantrop_causes_slider .philantrop_projects_item_content_container {
		bottom: 0;
		padding-right: 70px;
		text-shadow: 0 1px 10px rgba(0, 0, 0, .35); /* il testo sale sulla parte della foto meno coperta dalla sfumatura */
	}
}