/* ==========================================================================
   HITPDF Hero — carosello in testata (hero storico + banner Telegram)
   ========================================================================== */

.hith {
	/* --- Token: colori e proporzioni, tutto qui ------------------------- */
	--hith-bg: #9548E0;          /* viola della testata: se in Nimble è un altro hex, cambialo qui */
	--hith-ink: #ffffff;
	--hith-hot: #ff0000;         /* la parola HENTAI del titolo storico */
	--hith-pink: #FF4DB2;        /* scritta TELEGRAM e anello decorativo */
	--hith-dark: #120318;        /* etichetta TELEGRAM e ombra del bottone */
	--hith-cta: #E6007E;         /* bottone «Unisciti al gruppo» */
	--hith-fade: 0.7s;           /* durata della dissolvenza fra le slide */
	--hith-art: clamp(200px, 20vw, 520px);      /* larghezza della ragazza nel hero */
	--hith-badge: clamp(180px, 17vw, 400px);    /* diametro del badge (o del logo) nel banner */
	--hith-pad-x: 4vw;
	--hith-pad-y: 32px;
	--hith-nav-room: 64px;       /* spazio in basso riservato a pallini e pausa */
	--hith-display: 'Agency FB', 'Arial Narrow', Arial, sans-serif;

	position: relative;
	overflow: hidden;
	background: var(--hith-bg);
	color: var(--hith-ink);
	isolation: isolate;
}

/* --------------------------------------------------------------------------
   Bordo a bordo. Sezione, contenitore, riga, colonna e modulo di Nimble
   aggiungono ognuno il proprio padding (i 10px ai lati) e a volte un
   paragrafo intorno allo shortcode. Li azzeriamo con !important, così le
   regole per id che Nimble scrive per ogni sezione non possono vincere.
   :has() limita tutto alla sola sezione che contiene il carosello: le altre
   sezioni della pagina non vengono toccate.
   -------------------------------------------------------------------------- */
.sek-section:has(.hith),
.sek-section:has(.hith) .sek-container,
.sek-section:has(.hith) .sek-container-fluid,
.sek-section:has(.hith) .sek-row,
.sek-section:has(.hith) .sek-column,
.sek-section:has(.hith) .sek-column-inner,
.sek-section:has(.hith) .sek-module,
.sek-section:has(.hith) .sek-module-inner,
.sek-module-inner :has(> .hith) {
	padding: 0 !important;
	margin: 0 !important;
	max-width: none !important;
}

/* WordPress chiude lo shortcode dentro un <p>; il browser, che non accetta un
   <div> dentro un paragrafo, lo spezza e lascia dei <p> vuoti sopra e sotto,
   con i loro margini: due strisce scure. Li togliamo. */
.sek-section:has(.hith) .sek-module-inner p:empty {
	display: none !important;
}

.sek-section:has(.hith) .sek-container,
.sek-section:has(.hith) .sek-container-fluid,
.sek-section:has(.hith) .sek-row,
.sek-section:has(.hith) .sek-column {
	width: 100% !important;
}

/* --------------------------------------------------------------------------
   Le slide stanno tutte nella stessa cella della griglia, una sopra l'altra.
   Il carosello prende l'altezza della più alta: passando da una all'altra la
   pagina sotto non si muove di un pixel.
   -------------------------------------------------------------------------- */
.hith__track {
	display: grid;
}

.hith-slide {
	grid-area: 1 / 1;
	min-width: 0;
	display: flex;
	align-items: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--hith-fade) ease, visibility 0s linear var(--hith-fade);
}

.hith-slide.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity var(--hith-fade) ease, visibility 0s;
}

/* ==========================================================================
   SLIDE 1 — hero storico
   ========================================================================== */
.hith-hero {
	width: 100%;
	box-sizing: border-box;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 4vw;
	padding: var(--hith-pad-y) var(--hith-pad-x) var(--hith-nav-room);
}

.hith-hero__art {
	margin: 0;
	width: var(--hith-art);
}

.hith-hero__art img {
	display: block;
	width: 100%;
	height: auto;
}

.hith-hero__copy {
	text-align: right;
}

.hith .hith-hero__title {
	margin: 0;
	color: var(--hith-ink);
	font-size: clamp(2rem, 3.4vw, 5.6rem);
	font-weight: 700;
	line-height: 1.05;
	text-transform: uppercase;
}

.hith-hero__hot {
	color: var(--hith-hot);
}

.hith .hith-hero__sub {
	margin: 0.7em 0 0;
	color: var(--hith-ink);
	font-size: clamp(1.1rem, 1.35vw, 2.2rem);
	font-weight: 400;
	line-height: 1.3;
	text-transform: none;
}

/* ==========================================================================
   SLIDE 2 — banner Telegram
   ========================================================================== */
.hith-tg {
	width: 100%;
	max-width: 1680px;
	margin: 0 auto;
	box-sizing: border-box;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 4vw;
	padding: var(--hith-pad-y) var(--hith-pad-x) var(--hith-nav-room) calc(var(--hith-pad-x) + 2vw);
}

.hith-tg--solo {
	grid-template-columns: minmax(0, 1fr);
}

.hith-tg__copy > p {
	margin: 0;
}

.hith-tg__eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--hith-ink);
}

.hith-tg__eyebrow svg {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
}

.hith .hith-tg__title {
	margin: 20px 0;
	font-family: var(--hith-display);
	font-size: clamp(2.8rem, 5vw, 6.4rem);
	font-weight: bold;
	line-height: 0.95;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--hith-ink);
}

.hith-tg__tag {
	display: inline-block;
	padding: 0 0.18em;
	background: var(--hith-dark);
	color: var(--hith-pink);
	transform: rotate(-2deg);
}

.hith .hith-tg__text {
	max-width: 38em;
	margin-bottom: 28px;
	font-size: clamp(1rem, 1.1vw, 1.35rem);
	line-height: 1.45;
	color: var(--hith-ink);
}

.hith .hith-tg__cta {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	min-height: 56px;
	padding: 0 28px;
	border-radius: 999px;
	background: var(--hith-cta);
	color: #ffffff;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-decoration: none;
	transition: filter 0.15s ease;
}

.hith .hith-tg__cta:hover,
.hith .hith-tg__cta:focus {
	color: #ffffff;
	text-decoration: none;
	filter: brightness(1.12);
}

.hith .hith-tg__cta:focus-visible {
	outline: 3px solid #ffffff;
	outline-offset: 4px;
}

.hith-tg__art {
	position: relative;
	width: var(--hith-badge);
	margin-right: 2vw;
}

/* Il badge: cerchio bianco con l'aeroplanino magenta, stessa ombra piena del
   bottone, così i due elementi si parlano. */
.hith-tg__badge {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: #ffffff;
	color: var(--hith-cta);
	box-shadow: 0 clamp(6px, 0.7vw, 12px) 0 var(--hith-dark);
}

.hith-tg__badge svg {
	width: 50%;
	height: 50%;
	/* L'aeroplanino pesa in alto a destra: lo spostiamo un filo per
	   centrarlo a occhio, non col righello. */
	transform: translate(-5%, 5%);
}

/* Il logo caricato da file (HITPDF_HERO_LOGO) al posto del badge. */
.hith-tg__logo {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: auto;
}

.hith-tg__ring {
	position: absolute;
	z-index: 0;
	right: -40%;
	top: -28%;
	width: 130%;
	aspect-ratio: 1;
	border: clamp(14px, 1.6vw, 28px) solid var(--hith-pink);
	border-radius: 50%;
	opacity: 0.35;
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   Il tema e Nimble sottolineano i link con tecniche diverse: text-decoration,
   bordo in basso, ombra interna, sfondo a gradiente o uno pseudo-elemento.
   Qui le spegniamo tutte, ma solo sul bottone del banner Telegram e in ogni
   stato: normale, visitato, hover, focus e cliccato.
   -------------------------------------------------------------------------- */
.hith a.hith-tg__cta,
.hith a.hith-tg__cta:link,
.hith a.hith-tg__cta:visited,
.hith a.hith-tg__cta:hover,
.hith a.hith-tg__cta:focus,
.hith a.hith-tg__cta:active,
.hith a.hith-tg__cta span {
	text-decoration: none !important;
	border-bottom: 0 !important;
	box-shadow: none !important;
	background-image: none !important;
}

.hith a.hith-tg__cta::before,
.hith a.hith-tg__cta::after {
	content: none !important;
	display: none !important;
}

/* ==========================================================================
   PALLINI
   ========================================================================== */
.hith__nav[hidden] {
	display: none;
}

.hith__nav {
	position: absolute;
	z-index: 2;
	left: 50%;
	bottom: 10px;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: 2px;
}

.hith .hith__nav button {
	appearance: none;
	-webkit-appearance: none;
	width: 44px;
	height: 44px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	box-shadow: none;
	color: var(--hith-ink);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.hith .hith__nav button:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: -4px;
}

.hith__dot::before {
	content: '';
	display: block;
	width: 10px;
	height: 10px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.55);
	transition: width 0.25s ease, background-color 0.25s ease;
}

.hith__dot.is-active::before {
	width: 28px;
	background: #ffffff;
}

/* ==========================================================================
   TELEFONO E TABLET STRETTO
   ========================================================================== */
@media (max-width: 767px) {
	.hith {
		--hith-pad-x: 20px;
		--hith-pad-y: 28px;
	}

	.hith-hero {
		grid-template-columns: minmax(0, 1fr);
		justify-items: center;
		gap: 24px;
	}

	.hith-hero__art {
		/* Non troppo grande: la slide Telegram prende la stessa altezza e
		   avrebbe un mare di viola vuoto sopra e sotto. */
		width: min(55vw, 300px);
	}

	.hith-hero__copy {
		text-align: center;
	}

	.hith-tg {
		grid-template-columns: minmax(0, 1fr);
		padding-left: var(--hith-pad-x);
	}

	/* Sul telefono il badge non ci sta accanto al testo: sale sopra, piccolo,
	   e l'anello decorativo sparisce. */
	.hith-tg__art {
		order: -1;
		width: 88px;
		margin: 0 0 20px;
	}

	.hith-tg__ring {
		display: none;
	}
}

/* Telefoni piccoli: bottone a tutta larghezza, più facile da prendere col pollice. */
@media (max-width: 480px) {
	.hith .hith-tg__title {
		font-size: clamp(2.4rem, 12vw, 3.4rem);
	}

	.hith-tg__actions,
	.hith .hith-tg__cta {
		display: flex;
		width: 100%;
		justify-content: center;
		box-sizing: border-box;
	}
}

/* Il carosello si trascina col dito in orizzontale; lo scroll verticale della
   pagina resta al browser. */
.hith__track {
	touch-action: pan-y;
}

/* Chi ha chiesto meno animazioni nel sistema: niente dissolvenza, cambio secco. */
@media (prefers-reduced-motion: reduce) {
	.hith {
		--hith-fade: 0s;
	}

	.hith .hith-tg__cta,
	.hith__dot::before {
		transition: none;
	}
}