/* IAO Iniziative Future - derivato da Collateral Events */
.iao-iniziative-future { width: 100%; }

@keyframes typewriter {
	from { width: 0; }
	to { width: 100%; }
}

.iao-slider--iniziative-future .iao-slider__track { display: flex; gap: 16px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding-right: var(--iao-peek-size, 0px); padding-bottom: 12px; }
.iao-slider--iniziative-future .iao-slider__track::-webkit-scrollbar { display:none; }
.iao-slider--iniziative-future .iao-slider__dots { display:flex; justify-content:center; gap:8px; margin-top:12px; }
.iao-slider--iniziative-future .iao-slider__dot { width:8px; height:8px; border-radius:50%; background: rgba(0,0,0,.3); cursor:pointer; transition: background .2s ease, width .2s ease; border:0; padding:0; appearance:none; }
.iao-slider--iniziative-future .iao-slider__dot.is-active { background:#000; width:24px; border-radius:12px; }
.iao-slider--iniziative-future .iao-slider__dot:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.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; --description-animation: fade_slide; --description-speed: 0.4s; }

.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)); }

.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%;
	max-width: 100%;
}

.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; }

.iao-coll-card:hover .iao-coll-card__description {
	opacity: 1;
	transform: translateY(0);
}

.iao-coll-card:focus-within .iao-coll-card__description {
	opacity: 1;
	transform: translateY(0);
}

.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);
}

.iao-coll-card--anim-typewriter .iao-coll-card__description {
	opacity: 0;
	overflow: hidden;
	transition: opacity 0.3s ease;
}
.iao-coll-card--anim-typewriter:hover .iao-coll-card__description {
	opacity: 1 !important;
}

.iao-coll-card--anim-typewriter .iao-coll-card__description div {
	display: inline-block !important;
	opacity: 1 !important;
	visibility: visible !important;
}

.iao-coll-card::before {
	display: none;
}

.iao-coll-card__content::before {
	content: "";
	position: absolute;
	top: -12px;
	left: -6px;
	right: -6px;
	bottom: -6px;
	border: var(--card-border-width, 1px) solid var(--card-border-color, transparent);
	border-radius: 6px;
	transform: scaleY(0);
	transform-origin: top;
	transition: transform var(--border-speed, .35s) ease, border-color .2s ease;
	pointer-events: none;
}
.iao-coll-card:hover .iao-coll-card__content::before {
	border-color: var(--card-border-color, #c00);
	transform: scaleY(1);
}

.iao-coll-card:focus-within .iao-coll-card__content::before {
	border-color: var(--card-border-color, #c00);
	transform: scaleY(1);
}

.iao-coll-card:focus-within .iao-coll-card__title {
	transform: translateY(calc(-1 * var(--title-lift, 2px))) scale(var(--title-scale, 1));
}

@media (prefers-reduced-motion: reduce) {
	.iao-slider--iniziative-future .iao-slider__track {
		scroll-behavior: auto;
	}

	.iao-coll-card,
	.iao-coll-card__title,
	.iao-coll-card__description,
	.iao-coll-card__sep-fill,
	.iao-coll-card__content::before,
	.iao-slider--iniziative-future .iao-slider__dot {
		transition: none !important;
	}
}

@media (hover: none), (pointer: coarse) {
	.iao-coll-card__description {
		opacity: 1;
		transform: none;
	}
}
