/**
 * ===================================================================
 * hero con badge 3D (home.html #intro.intro-badge + js/badge-hero.js)
 *
 * Di base è la hero classica: foto a tutto schermo con il velo scuro e testo
 * centrato (main.css). Su schermi larghi e senza reduced motion js/badge-hero.js
 * aggiunge .has-badge: testo a sinistra sopra la foto, che sfuma verso destra
 * in un fondo neutro su cui pende il badge. Il canvas del badge è trasparente.
 * Tema scuro di default, chiaro con [data-theme="light"].
 * -------------------------------------------------------------------
 */

/* ---------------------------------------------------------------- base: hero classica */

#intro.intro-badge {
	background: #111111;
}

/* foto + velo nello stesso livello, così la sfumatura (mask) li fa sparire insieme */
.intro-badge-photo {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(rgba(17, 17, 17, 0.85), rgba(17, 17, 17, 0.85)),
		url(../images/profile-pic_LT.webp) no-repeat center top / cover;
}
[data-theme="light"] .intro-badge-photo {
	background:
		linear-gradient(rgba(17, 17, 17, 0.6), rgba(17, 17, 17, 0.6)),
		url(../images/Foto_tumminello_colore.webp) no-repeat center top / cover;
}

.intro-badge-glow,
.intro-badge-stage,
#badge-3d {
	display: none;
}

/* il contenuto sta sopra la foto */
.intro-badge-grid {
	position: relative;
	display: table;
	width: 100%;
	height: 100%;
}

/* ---------------------------------------------------------------- testo + badge */

@media (min-width: 769px) and (prefers-reduced-motion: no-preference) {

	#intro.intro-badge.has-badge {
		display: block;
		position: relative;
		height: 100vh;
		min-height: 680px;
		overflow: hidden;
	}

	/* la foto occupa la parte sinistra e si dissolve verso il badge */
	.has-badge .intro-badge-photo {
		right: 30%;
		background-position: center top;
		-webkit-mask-image: linear-gradient(to right, #000 0%, #000 45%, transparent 100%);
		mask-image: linear-gradient(to right, #000 0%, #000 45%, transparent 100%);
	}

	/* luce morbida dietro il badge, nel giallo del sito */
	.has-badge .intro-badge-glow {
		display: block;
		position: absolute;
		inset: 0;
		pointer-events: none;
		background: radial-gradient(32% 50% at 76% 50%, rgba(255, 200, 0, 0.06), transparent 70%);
	}

	.has-badge .intro-badge-grid {
		display: grid;
		grid-template-columns: minmax(0, 1.22fr) minmax(0, 0.78fr);
		align-items: center;
		height: 100%;
		max-width: 1240px;
		margin: 0 auto;
		padding: 0 4rem;
	}

	#intro.has-badge .intro-content {
		display: block;
		text-align: left;
		transform: none;
		padding-top: 6rem; /* spazio per la navbar fissa */
	}

	#intro.has-badge .intro-content h1 {
		margin-left: 0;
		max-width: 760px;
	}

	/* i tre ruoli stanno su una riga: testo più piccolo e separatori più stretti */
	#intro.has-badge .intro-content .intro-position {
		white-space: nowrap;
		font-size: clamp(1.1rem, 1.02vw, 1.45rem);
		letter-spacing: .1rem;
		margin-bottom: 3.6rem;
	}
	#intro.has-badge .intro-content .intro-position span::after {
		padding: 0 6px 0 10px;
	}
	#intro.has-badge .intro-content .intro-position span:first-child::before,
	#intro.has-badge .intro-content .intro-position span:last-child::after {
		content: none;
	}

	/* pulsante e social centrati sotto il nome (--name-w da js/badge-hero.js) */
	#intro.has-badge .intro-actions {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: var(--name-w, auto);
	}
	#intro.has-badge .intro-social {
		position: static;
		width: auto;
		margin-top: 4rem;
		font-size: 2.8rem;
	}
	#intro.has-badge .intro-social li {
		margin: 0 1.6rem;
	}

	/* colonna vuota di riferimento: il laccio pende dal suo centro */
	.has-badge .intro-badge-stage {
		display: block;
		height: 100%;
	}

	/* il canvas copre tutta la hero (sopra foto e testo) ma lascia passare i click:
	   gli eventi del badge li raccoglie #intro */
	.has-badge #badge-3d {
		display: block;
		position: absolute;
		inset: 0;
		z-index: 2;
	}
	.has-badge #badge-3d,
	.has-badge #badge-3d * {
		pointer-events: none;
	}

	/* ------------------------------------------------ tema chiaro: velo chiaro, testo scuro */

	[data-theme="light"] #intro.intro-badge.has-badge {
		background: #f0f0f0;
	}
	[data-theme="light"] .has-badge .intro-badge-photo {
		background:
			linear-gradient(rgba(240, 240, 240, 0.8), rgba(240, 240, 240, 0.8)),
			url(../images/Foto_tumminello_colore.webp) no-repeat center top / cover;
	}
	[data-theme="light"] .has-badge .intro-badge-glow {
		background: radial-gradient(32% 50% at 76% 50%, rgba(255, 200, 0, 0.12), transparent 70%);
	}
	[data-theme="light"] #intro.has-badge .intro-content h1 {
		color: #313131;
		text-shadow: none;
	}
	[data-theme="light"] #intro.has-badge .intro-content h5 {
		color: #c8960a; /* il giallo pieno non si legge su chiaro: stesso tono di .lang-btn.active */
		text-shadow: none;
	}
	[data-theme="light"] #intro.has-badge .intro-content .intro-position {
		color: #4a4a4a;
		text-shadow: none;
	}
	[data-theme="light"] #intro.has-badge .intro-content .intro-position span::after {
		color: rgba(0, 0, 0, 0.25);
	}
	[data-theme="light"] #intro.has-badge .intro-content .button {
		color: #313131 !important;
		border-color: rgba(0, 0, 0, 0.3);
	}
	[data-theme="light"] #intro.has-badge .intro-content .button:hover,
	[data-theme="light"] #intro.has-badge .intro-content .button:focus {
		border-color: #c8960a;
	}
	[data-theme="light"] #intro.has-badge .intro-social li a,
	[data-theme="light"] #intro.has-badge .intro-social li a:visited {
		color: #313131;
	}
	[data-theme="light"] #intro.has-badge .intro-social li a:hover,
	[data-theme="light"] #intro.has-badge .intro-social li a:focus {
		color: #c8960a;
	}
}

@media (min-width: 769px) and (max-width: 1000px) and (prefers-reduced-motion: no-preference) {
	.has-badge .intro-badge-grid {
		grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
		padding: 0 3rem;
	}
}