/**
 * Chi siamo — pagina dedicata.
 */

/* Intro hero (cover GSAP scale 2.5x): evita scroll orizzontale e “overflow” navbar al primo paint. */
body.nenne-body--chi-siamo:not(.nenne-hero-cut-done),
body.nenne-body--eventi:not(.nenne-hero-cut-done) {
	overflow-x: clip;
}

@supports not (overflow: clip) {
	body.nenne-body--chi-siamo:not(.nenne-hero-cut-done),
	body.nenne-body--eventi:not(.nenne-hero-cut-done) {
		overflow-x: hidden;
	}
}

/* Transizione morbida hero (bianco) ↔ sezioni chiare (difference). */
body.nenne-body--chi-siamo .nenne-site-header--overlay .nenne-site-header__menu-link,
body.nenne-body--chi-siamo .nenne-site-header--overlay .nenne-site-header__logo-link,
body.nenne-body--chi-siamo .nenne-site-header--overlay .nenne-site-header__logo-text,
body.nenne-body--chi-siamo .nenne-site-header--overlay .nenne-site-header__burger {
	transition:
		color 0.45s ease,
		border-color 0.45s ease,
		opacity 0.45s ease;
}

body.nenne-body--chi-siamo .nenne-site-header--overlay .nenne-site-header__logo-img {
	transition: filter 0.45s ease;
}

/* Navbar bianca sulla hero (senza blend). Menu aperto: X nera (header.css). */
body.nenne-body--chi-siamo:not(.nenne-mobile-nav-open)
	.nenne-site-header--overlay:not(.nenne-site-header--blend)
	.nenne-site-header__menu-link {
	color: #ffffff;
}

body.nenne-body--chi-siamo:not(.nenne-mobile-nav-open)
	.nenne-site-header--overlay:not(.nenne-site-header--blend)
	.nenne-site-header__menu-link.nenne-btn--outline {
	border-color: #ffffff;
	color: #ffffff;
}

body.nenne-body--chi-siamo:not(.nenne-mobile-nav-open)
	.nenne-site-header--overlay:not(.nenne-site-header--blend)
	.nenne-site-header__logo-link,
body.nenne-body--chi-siamo:not(.nenne-mobile-nav-open)
	.nenne-site-header--overlay:not(.nenne-site-header--blend)
	.nenne-site-header__logo-text {
	color: #ffffff;
}

body.nenne-body--chi-siamo:not(.nenne-mobile-nav-open)
	.nenne-site-header--overlay:not(.nenne-site-header--blend)
	.nenne-site-header__burger {
	color: #ffffff;
}

/* Dopo la hero: difference (menu chiuso). X di chiusura: senza blend (header.css). */
body.nenne-body--chi-siamo:not(.nenne-mobile-nav-open)
	.nenne-site-header--overlay.nenne-site-header--blend {
	mix-blend-mode: difference;
}

/* Hero — sticky 100svh + scroll come home (sotto le sezioni contenuto in z-index) */
.nenne-page--chi-siamo .nenne-about-hero.nenne-section,
.nenne-page--eventi .nenne-about-hero.nenne-section {
	padding-block: 0;
	position: sticky;
	top: 0;
	z-index: 1;
	isolation: isolate;
	overflow: hidden;
}

.nenne-page--chi-siamo .nenne-about-hero__inner,
.nenne-page--eventi .nenne-about-hero__inner {
	position: relative;
	background-color: #000;
	height: var(--nenne-viewport-height);
	max-height: var(--nenne-viewport-height);
	min-height: var(--nenne-viewport-height);
	overflow: hidden;
}

.nenne-page--chi-siamo .nenne-about-hero__bg,
.nenne-page--eventi .nenne-about-hero__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	min-height: 100%;
	overflow: hidden;
}

.nenne-about-hero--has-media .nenne-about-hero__bg::after {
	z-index: 1;
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-color: var(--nenne-intro-overlay);
}

.nenne-page--chi-siamo .nenne-about-hero__bg::before,
.nenne-page--eventi .nenne-about-hero__bg::before {
	z-index: 2;
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #000;
	opacity: var(--nenne-stage-overlay-opacity, 0);
	pointer-events: none;
}

.nenne-page--chi-siamo .nenne-about-hero__media,
.nenne-page--eventi .nenne-about-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	min-width: 100%;
	min-height: 100%;
	will-change: transform;
}

.nenne-page--chi-siamo .nenne-about-hero__media-slot,
.nenne-page--eventi .nenne-about-hero__media-slot {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	min-width: 100%;
	min-height: 100%;
}

.nenne-page--chi-siamo .nenne-about-hero__media-slot--mobile,
.nenne-page--eventi .nenne-about-hero__media-slot--mobile {
	display: none;
}

.nenne-page--chi-siamo .nenne-about-hero__image,
.nenne-page--eventi .nenne-about-hero__image,
.nenne-page--chi-siamo .nenne-about-hero__video,
.nenne-page--eventi .nenne-about-hero__video {
	display: block;
	width: 100%;
	height: 100%;
	min-width: 100%;
	min-height: 100%;
	object-fit: cover;
	object-position: center;
}

@media (max-width: 767.98px) {
	.nenne-page--chi-siamo .nenne-about-hero--has-mobile-media .nenne-about-hero__media-slot--desktop,
.nenne-page--eventi .nenne-about-hero--has-mobile-media .nenne-about-hero__media-slot--desktop {
		display: none;
	}

	.nenne-page--chi-siamo .nenne-about-hero--has-mobile-media .nenne-about-hero__media-slot--mobile,
.nenne-page--eventi .nenne-about-hero--has-mobile-media .nenne-about-hero__media-slot--mobile {
		display: block;
	}
}

.nenne-page--chi-siamo .nenne-about-hero__cover,
.nenne-page--eventi .nenne-about-hero__cover {
	position: absolute;
	inset: 0;
	z-index: 2;
	background-color: var(--nenne-stage-cover-bg);
	transform-origin: 50% 0;
	pointer-events: none;
	will-change: transform;
	backface-visibility: hidden;
}

body.nenne-body--chi-siamo:not(.nenne-hero-cut-done) .nenne-about-hero__cover,
body.nenne-body--eventi:not(.nenne-hero-cut-done) .nenne-about-hero__cover {
	z-index: 1001;
}

.nenne-main .nenne-page--chi-siamo .nenne-section:not(.nenne-about-hero),
.nenne-page--eventi .nenne-section:not(.nenne-about-hero) {
	position: relative;
	z-index: 2;
}

.nenne-main .nenne-page--chi-siamo .nenne-section:not(.nenne-about-hero):not(.nenne-home-split-1):not(.nenne-home-split-2):not(.nenne-home-cta),
.nenne-page--eventi .nenne-section:not(.nenne-about-hero):not(.nenne-events-carousel):not(.nenne-home-split-1):not(.nenne-home-split-2):not(.nenne-home-cta) {
	background-color: var(--nenne-color-bg);
}


.nenne-page--chi-siamo .nenne-about-hero__content,
.nenne-page--eventi .nenne-about-hero__content {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 3;
	box-sizing: border-box;
	padding-top: 24px;
	padding-right: var(--nenne-layout-gutter);
	padding-bottom: max(60px, calc(24px + env(safe-area-inset-bottom, 0px)));
	padding-left: var(--nenne-layout-gutter);
	text-align: center;
	color: #ffffff;
	pointer-events: none;
}

.nenne-page--chi-siamo .nenne-about-hero__title,
.nenne-page--eventi .nenne-about-hero__title,
.nenne-page--chi-siamo .nenne-about-hero__subtitle,
.nenne-page--eventi .nenne-about-hero__subtitle {
	color: #ffffff;
}

.nenne-page--chi-siamo .nenne-about-hero__title,
.nenne-page--eventi .nenne-about-hero__title {
	margin: 0;
	padding-bottom: 0.08em;
	max-width: 20ch;
}

.nenne-page--chi-siamo .nenne-about-hero__title,
.nenne-page--eventi .nenne-about-hero__title {
	margin-inline: auto;
}

.nenne-page--chi-siamo .nenne-about-hero__subtitle,
.nenne-page--eventi .nenne-about-hero__subtitle {
	margin: var(--nenne-gap-title-text) 0 0;
	padding-bottom: 0.05em;
	max-width: 36rem;
}

.nenne-page--chi-siamo .nenne-about-hero__subtitle,
.nenne-page--eventi .nenne-about-hero__subtitle {
	margin-inline: auto;
}

@media (max-width: 767.98px) {
	.nenne-page--chi-siamo .nenne-about-hero__content,
.nenne-page--eventi .nenne-about-hero__content {
		padding-right: var(--nenne-layout-gutter);
		padding-left: var(--nenne-layout-gutter);
	}
}

@media (prefers-reduced-motion: reduce) {
	.nenne-page--chi-siamo .nenne-about-hero__cover,
.nenne-page--eventi .nenne-about-hero__cover {
		display: none;
	}

	.nenne-page--chi-siamo .nenne-about-hero__media,
.nenne-page--eventi .nenne-about-hero__media {
		will-change: auto;
	}
}

/* Expand — solo media; ingrandimento laterale leggero (90% → 100vw) */
.nenne-about-expand {
	--nenne-expand-width-start: 90%;
	padding-block: 0;
	overflow: hidden;
}

.nenne-about-expand__stage {
	width: 100%;
}

.nenne-about-expand__clip {
	width: var(--nenne-expand-width-start);
	height: var(--nenne-viewport-height);
	max-height: var(--nenne-viewport-height);
	max-width: 100%;
	margin-inline: auto;
	overflow: hidden;
	will-change: width;
}

.nenne-about-expand__asset {
	width: 100%;
	height: 100%;
	position: relative;
}

.nenne-about-expand__media-slot {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.nenne-about-expand__media-slot--mobile {
	display: none;
}

.nenne-about-expand__frame {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	border-radius: 0;
}

.nenne-about-expand--border-radius .nenne-about-expand__clip,
.nenne-about-expand--border-radius .nenne-about-expand__frame {
	border-radius: var(--nenne-split-media-radius);
}

.nenne-about-expand__image,
.nenne-about-expand__video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transform-origin: 50% 50%;
}

.nenne-about-expand__player {
	position: relative;
	width: 100%;
	height: 100%;
	cursor: pointer;
}

.nenne-about-expand__video--controlled {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.nenne-about-expand__player-center {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	color: #ffffff;
	transition: opacity 0.25s ease;
}

.nenne-about-expand__player.is-playing .nenne-about-expand__player-center {
	opacity: 0;
}

.nenne-about-expand__player-icon[hidden] {
	display: none;
}

.nenne-about-expand__player-icon .nenne-video-player__svg {
	display: block;
	filter: drop-shadow(0 2px 8px rgb(0 0 0 / 0.35));
}

.nenne-about-expand__player-btn--mute {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 4;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: rgb(20 20 20 / 0.72);
	color: #ffffff;
	cursor: pointer;
}

@media (max-width: 767.98px) {
	.nenne-about-expand {
		--nenne-expand-width-start: 90%;
	}

	/* Solo se esiste media mobile: nascondi desktop e mostra mobile (come hero). */
	.nenne-about-expand--has-mobile-media .nenne-about-expand__media-slot--desktop {
		display: none;
	}

	.nenne-about-expand--has-mobile-media .nenne-about-expand__media-slot--mobile {
		display: block;
	}
}

@media (prefers-reduced-motion: reduce) {
	.nenne-about-expand__clip {
		width: 100% !important;
		will-change: auto;
	}

	.nenne-about-expand__image,
	.nenne-about-expand__video {
		opacity: 1 !important;
		transform: none !important;
		will-change: auto;
	}
}