/* IAO Collateral Events - MODIFICATO CON DESCRIZIONE E BORDO PARZIALE */
.iao-collateral-events { width: 100%; }

/* Keyframes per animazione Typewriter */
@keyframes typewriter {
	from { width: 0; }
	to { width: 100%; }
}

.iao-slider--collateral .iao-slider__track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; }
.iao-slider--collateral .iao-slider__track::-webkit-scrollbar { display:none; }
.iao-slider--collateral .iao-slider__dots { display:flex; justify-content:center; gap:8px; margin-top:12px; }
.iao-slider--collateral .iao-slider__dot { width:8px; height:8px; border-radius:50%; background: rgba(0,0,0,.3); }
.iao-slider--collateral .iao-slider__dot.is-active { background:#000; width:24px; border-radius:12px; }

.iao-coll-card { position: relative; background: #fff; color:#111; border: none; border-radius: 6px; padding: 20px; min-height: var(--card-height, 180px); scroll-snap-align: start; transition: background .3s ease, color .3s ease; width: var(--card-width, auto); display:flex; flex-direction:column; /* Variabili per animazioni descrizione */ --description-animation: fade_slide; --description-speed: 0.4s; }

/* Card typewriter - rimuove min-height per permettere altezza dinamica */
.iao-coll-card--anim-typewriter { 
	min-height: unset !important; 
	height: auto;
}

.iao-coll-card__top { flex: 0 0 auto; }
.iao-coll-card__content { flex: 1 1 auto; display: flex; flex-direction: column; position: relative; }
.iao-coll-card__middle { flex: 1 1 auto; display:flex; flex-direction: column; align-items:flex-start; }
.iao-coll-card__bottom { flex: 0 0 auto; margin-top: auto; display:flex; flex-direction:column; gap:8px; }

.iao-coll-card__type-wrap { display:block; margin-bottom: 8px; }
.iao-coll-card__type { font-weight: 600; opacity: .9; font-size: inherit; line-height: inherit; display:block; margin-bottom: 8px; }
.iao-coll-card__sep { position:relative; width:100%; height: var(--sep-height, 2px); background: var(--sep-color, #ddd); overflow:hidden; }
.iao-coll-card__sep-fill { position:absolute; top:0; left:0; bottom:0; width:0%; background: var(--sep-fill, #c00); transition: width var(--sep-speed, .4s) ease, background-color .2s ease; }
.iao-coll-card:hover .iao-coll-card__sep-fill { width:100%; background-color: var(--sep-fill-hover, var(--sep-fill, #c00)); }

.iao-coll-card__title { margin: 10px 0 12px 0; font-weight: 800; line-height: 1.2; transition: transform var(--title-speed, .35s) ease, color .3s ease; will-change: transform; font-size: inherit; transform-origin: center; }
.iao-coll-card:hover .iao-coll-card__title { transform: translateY(calc(-1 * var(--title-lift, 2px))) scale(var(--title-scale, 1)); }

/* Descrizione - inizialmente nascosta, sotto il titolo */
.iao-coll-card__description { 
	margin: 8px 0 12px 0; 
	opacity: 0; 
	transform: translateY(10px); 
	transition: opacity var(--description-speed, 0.4s) ease, transform var(--description-speed, 0.4s) ease, color .3s ease; 
	font-size: inherit; 
	line-height: inherit; 
	width: 100%; /* Occupa quasi tutta la larghezza */
	max-width: 100%; /* Assicura che non superi la larghezza della card */
}

.iao-coll-card__date { margin: 0 0 10px 0; opacity: .9; font-size: inherit; line-height: inherit; }

.iao-coll-card__link-row { display:flex; align-items:center; gap: 8px; }
.iao-coll-card__link { color: #c00; text-decoration: none; font-weight: 600; font-size: inherit; line-height: inherit; }
.iao-coll-card__link:hover { text-decoration: underline; }
.iao-coll-card__shape { display:inline-block; }

/* Animazioni hover per la descrizione - DEFAULT */
.iao-coll-card:hover .iao-coll-card__description {
	opacity: 1;
	transform: translateY(0);
}

/* Animazioni specifiche per tipo - usando classi CSS */
.iao-coll-card--anim-fade-slide .iao-coll-card__description {
	transform: translateY(10px);
}
.iao-coll-card--anim-fade-slide:hover .iao-coll-card__description {
	transform: translateY(0);
}

.iao-coll-card--anim-fade-scale .iao-coll-card__description {
	transform: scale(0.8);
}
.iao-coll-card--anim-fade-scale:hover .iao-coll-card__description {
	transform: scale(1);
}

.iao-coll-card--anim-slide-up .iao-coll-card__description {
	transform: translateY(20px);
}
.iao-coll-card--anim-slide-up:hover .iao-coll-card__description {
	transform: translateY(0);
}

.iao-coll-card--anim-fade-rotate .iao-coll-card__description {
	transform: rotate(-2deg) scale(0.9);
}
.iao-coll-card--anim-fade-rotate:hover .iao-coll-card__description {
	transform: rotate(0deg) scale(1);
}

/* Animazione Typewriter - supporta più righe */
.iao-coll-card--anim-typewriter .iao-coll-card__description {
	opacity: 0;
	overflow: hidden;
	transition: opacity 0.3s ease;
	/* L'altezza è gestita da JavaScript per rispettare il parametro Card */
}
.iao-coll-card--anim-typewriter:hover .iao-coll-card__description {
	opacity: 1 !important; /* Forza la visibilità */
	/* L'altezza è gestita da JavaScript */
}

/* Assicura che la descrizione typewriter sia sempre visibile */
.iao-coll-card--anim-typewriter .iao-coll-card__description div {
	display: inline-block !important;
	opacity: 1 !important;
	visibility: visible !important;
}

/* Animazione bordo card: DISABILITATO - usiamo il bordo della sezione __middle */
.iao-coll-card::before { 
	display: none; /* Disabilita il bordo principale */
}

/* Bordo parziale che parte dal divisore e include tutto il contenuto */

.iao-coll-card__content::before {
	content: "";
	position: absolute;
	/* Estendi il bordo oltre il contenuto con valori negativi */
	top: -12px; /* Estende il bordo di 12px sopra per sovrapporsi completamente al divisore */
	left: -6px; /* Estende il bordo di 6px a sinistra */
	right: -6px; /* Estende il bordo di 6px a destra */
	bottom: -6px; /* Estende il bordo di 6px in basso */
	border: var(--card-border-width, 1px) solid var(--card-border-color, transparent);
	border-radius: 6px; /* Tutti gli angoli arrotondati */
	transform: scaleY(0);
	transform-origin: top;
	transition: transform var(--border-speed, .35s) ease, border-color .2s ease;
	pointer-events: none;
	/* Bordo completo incluso il lato superiore che si sovrappone al divisore */
}
.iao-coll-card:hover .iao-coll-card__content::before {
	border-color: var(--card-border-color, #c00);
	transform: scaleY(1);
}