/* =========================================================
 *    Hero Mobile  override per rispecchiare il mockup Figma
 *    (immagine full-width in alto, blocco testo sotto su fondo
 *    viola scuro, paragrafo descrittivo visibile, bottone bianco)
 *    ========================================================= */
@media (max-width: 991.98px) {
	.it-hero-wrapper.hero-splitted {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		min-height: 0;
	}

	.it-hero-wrapper.hero-splitted>.container,
	.it-hero-wrapper.hero-splitted>.container>.row {
		max-width: 100%;
		width: 100%;
		padding: 0;
		margin: 0;
		--bs-gutter-x: 0;
	}

	.it-hero-wrapper.hero-splitted .row>[class*="col-"] {
		padding-left: 0;
		padding-right: 0;
		width: 100%;
		flex: 0 0 100%;
		max-width: 100%;
	}

	/* Ordine: immagine sopra, testo sotto */
	.it-hero-wrapper.hero-splitted .row>[class*="col-"]:has(.img-responsive-wrapper) {
		order: 1;
	}

	.it-hero-wrapper.hero-splitted .row>[class*="col-"]:has(.it-hero-text-wrapper) {
		order: 2;
	}

	/* Immagine: posizionamento normale, full-width */
	.it-hero-wrapper.hero-splitted .img-responsive-wrapper {
		position: relative;
		width: 100%;
		height: auto;
		padding: 0;
	}

	.it-hero-wrapper.hero-splitted .img-responsive-wrapper .img-responsive {
		position: relative;
		padding-bottom: 62%;
		height: 0;
		width: 100%;
	}

	.it-hero-wrapper.hero-splitted .img-responsive-wrapper .img-wrapper {
		position: absolute;
		inset: 0;
	}

	.it-hero-wrapper.hero-splitted .img-responsive-wrapper img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}

	/* Blocco testo sotto l'immagine */
	.it-hero-wrapper.hero-splitted .it-hero-text-wrapper {
		padding: 2rem 1.5rem 2.5rem;
	}


}


/* -----------------------------------------------------------
 * Fix: immagine dell'hero che sfora oltre la viewport
 * -----------------------------------------------------------
 * Bootstrap Italia posiziona .img-responsive-wrapper in absolute
 * con inset negativo (right: -Npx), facendo "spillare" l'immagine
 * oltre il lato destro della viewport. Conteniamo l'overflow sul
 * wrapper dell'hero.
 *
 * Usiamo `overflow-x: clip` (non `hidden`) per evitare di creare
 * un contesto di scroll: questo e' piu' compatibile con
 * l'accessibilita' (WCAG 2.4.7 Focus Visible, 2.4.11 Focus Not
 * Obscured), poiche' non interferisce con lo scroll al focus
 * degli elementi interattivi.
 * --------------------------------------------------------- */
.it-hero-wrapper {
	overflow-x: clip;
}

/* Fallback per browser molto datati che non supportano `clip` */
@supports not (overflow-x: clip) {
	.it-hero-wrapper {
		overflow-x: hidden;
	}
}

/* helper */
/* font size 18px */
@media screen and (min-width: 992px) {
	.text-lg {
		font-size: 1.125rem;
		line-height: 1.75rem;
	}
}


/* ============================================================
   Mobile header brand — BIT non stila .it-brand-wrapper fuori
   da .it-header-center-wrapper; replica gli stili strutturali
   per il brand nel pannello mobile (.navbar-collapsable).
   I colori restano #fff: il pannello mobile ha sfondo scuro
   anche con la classe theme-light-desk (solo desktop è chiaro).
   ============================================================ */
@media (max-width: 991.98px) {
	.navbar-collapsable .menu-wrapper .it-brand-wrapper a {
			display: flex;
			align-items: center;
			text-decoration: none;
			color: var(--color-carbon-20);
		}

		.navbar-collapsable .menu-wrapper .it-brand-wrapper a .icon {
			fill: #fff;
			width: 48px;
			height: 48px;
			margin-right: 8px;
			flex-shrink: 0;
		}

		.navbar-collapsable .menu-wrapper .it-brand-wrapper .it-brand-text {
			padding-right: 24px;
		}

		.navbar-collapsable .menu-wrapper .it-brand-wrapper a .it-brand-title {
			font-size: 1.25rem;
			margin-bottom: 0;
			font-weight: 600;
			letter-spacing: unset;
			line-height: 1.1;
		}

		.navbar .navbar-collapsable .navbar-nav li>button.nav-link.show {
			border-left: 4px solid var(--color-border-accent);
			border-left-color: var(--color-border-accent);
			color: var(--color-text-accent) !important;
		}

		.it-header-navbar-wrapper.theme-light-desk .navbar .navbar-collapsable .navbar-nav li.megamenu>button.nav-link svg {
			fill: var(--color-text-accent) !important;
		}

		.navbar .navbar-collapsable .navbar-nav li>button.nav-link span {
			color: var(--color-text-accent);
		}
}

/* Overlay panel rich variant (titolo + descrizione + freccia). */
.museo-overlay-rich-wrapper {
	display: block;
}

.museo-overlay-rich-wrapper .img-fluid {
	min-height: 320px;
	object-fit: cover;
}

.museo-overlay-rich-panel {
	max-height: none;
	padding: 20px 24px;
	background-color: rgba(0, 0, 0, 0.72);
	font-weight: 400;
}

.museo-overlay-rich-link {
	display: block;
	color: #fff;
	text-decoration: none;
}

.museo-overlay-rich-head {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 8px;
}

.museo-overlay-rich-title {
	font-size: 2rem;
	line-height: 1.1;
	font-weight: 700;
	color: #fff;
}

.museo-overlay-rich-head .icon {
	fill: #fff;
	flex-shrink: 0;
}

.museo-overlay-rich-description {
	font-size: 1rem;
	line-height: 1.45;
	color: #fff;
}

@media (max-width: 767.98px) {
	.museo-overlay-rich-title {
		font-size: 1.5rem;
	}

	.museo-overlay-rich-description {
		font-size: 0.9375rem;
	}
}