/*
 Theme Name:   Raffaello Child
 Template:     yootheme
 Version:      1.0
*/

/* --- Hero --- */
/* Il sottotitolo ora è un h2 uk-heading-medium: nessun font-size
   custom qui, altrimenti sovrascriverebbe la classe UIkit. */

/* Copertina cliccabile (lightbox): icona lente in overlay,
   nascosta di default, visibile all'hover sull'immagine. */
.rl-evo-single__image-link {
	position: relative;
}

.rl-evo-single__image-zoom {
	width: 56px;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.2s ease;
	pointer-events: none;
}

.rl-evo-single__image-link:hover .rl-evo-single__image-zoom,
.rl-evo-single__image-link:focus .rl-evo-single__image-zoom {
	opacity: 1;
}

/* Chip meta (data / ora / luogo) */
.rl-evo-meta-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border-radius: 500px;
	font-size: 0.875rem;
	line-height: 1;
	background: #f0f0f0;
	color: #555;
}

.rl-evo-meta-chip a {
	color: inherit;
}

.rl-evo-meta-chip--primary {
	background: rgba(4, 91, 169, 0.1);
	color: #045BA9;
}

.rl-evo-meta-chip [uk-icon] {
	flex: 0 0 auto;
}

/* --- Sidebar dettagli --- */
.rl-evo-single__details-icon {
	flex: 0 0 auto;
	margin-top: 2px;
}

/* Lo sticky non deve "saltare" sotto l'header: l'offset è gestito
   dall'attributo uk-sticky nel PHP (offset: 140). Regola quel numero
   sull'altezza reale del tuo header fisso (barra blu + barra menu). */

/* Quando lo sticky è attivo, deve restare SOTTO l'header del tema.
   L'header YooTheme sta tipicamente a z-index ~980/990: teniamo la
   sidebar più bassa così non lo copre mai. */
.rl-evo-single__sticky.uk-sticky-fixed {
	z-index: 100;
}

/* --- Slider relatori --- */
.rl-evo-speakers__nav {
	display: inline-flex;
	gap: 8px;
}

.rl-evo-speaker-card {
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.rl-evo-speaker-card:hover {
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
	transform: translateY(-3px);
}

/* Avatar relatore: dimensione uniforme, crop centrato */
.rl-evo-speaker-card__avatar {
	width: 160px;
	height: 160px;
}

.rl-evo-speaker-card__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* --- Allineamento contenuto card relatore (punto 5) ---
   Forziamo le slide a stirarsi in altezza e la card a essere flex-column
   a piena altezza, così uk-margin-auto-top spinge davvero il "Leggi la bio"
   in fondo, anche quando il nome va su due righe. */
.rl-evo-speakers__slider .uk-slider-items {
	align-items: stretch;
}

.rl-evo-speakers__slider .uk-slider-items > li {
	display: flex;
}

.rl-evo-speaker-card {
	width: 100%;
}

/* --- Peek della card successiva (punto 4) ---
   Da @m in su, lasciamo intravedere un pezzo della card seguente per
   comunicare "scorri". La classe --peek viene aggiunta dal template SOLO
   quando i relatori superano le colonne visibili (>3), così con pochi
   relatori le card restano a piena larghezza senza vuoti. */
@media (min-width: 960px) {
	.rl-evo-speakers__slider.rl-evo-speakers__slider--peek .uk-slider-items > * {
		width: 30%;
	}
}

/* Stato disabilitato frecce slider quando si è al primo/ultimo item */
.rl-evo-speakers__slider .uk-slider-item.uk-invisible {
	display: none;
}

/* --- Box come partecipare --- */
.rl-evo-single__howto p {
	line-height: 1.5;
}