/* ==========================================================================
   Accesso area riservata — Figma 232-312 (1728)
   ========================================================================== */

.accesso-hero { position: relative; overflow: hidden; color: #fff; z-index: 1; }
.accesso-hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: 0; }
.accesso-hero__bg--mobile { display: none; }
/* Figma "Rectangle 26": sfumatura dal nero al bianco in moltiplica, cioe' scurisce
   in alto e lascia intatta l'immagine piu' in basso */
.accesso-hero__topgrad {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1;
	/* i passaggi intermedi servono perche' il browser sfuma il colore gia'
	   moltiplicato per l'opacita', mentre Figma tiene le due cose separate */
	background: linear-gradient(180deg, rgba(0, 0, 0, 1.000) 0%, rgba(13, 13, 13, 0.950) 5%, rgba(26, 26, 26, 0.900) 10%, rgba(38, 38, 38, 0.850) 15%, rgba(51, 51, 51, 0.800) 20%, rgba(64, 64, 64, 0.750) 25%, rgba(76, 76, 76, 0.700) 30%, rgba(89, 89, 89, 0.650) 35%, rgba(102, 102, 102, 0.600) 40%, rgba(115, 115, 115, 0.550) 45%, rgba(128, 128, 128, 0.500) 50%, rgba(140, 140, 140, 0.450) 55%, rgba(153, 153, 153, 0.400) 60%, rgba(166, 166, 166, 0.350) 65%, rgba(178, 178, 178, 0.300) 70%, rgba(191, 191, 191, 0.250) 75%, rgba(204, 204, 204, 0.200) 80%, rgba(217, 217, 217, 0.150) 85%, rgba(230, 230, 230, 0.100) 90%, rgba(242, 242, 242, 0.050) 95%, rgba(255, 255, 255, 0.000) 100%) !important;
	mix-blend-mode: multiply;
}
.accesso-hero__grid { position: relative; z-index: 2; }

.accesso-card { background: #fff; color: var(--pit-navy); display: flex; flex-direction: column; }
.accesso-card__title {
	font-family: var(--font-heading);
	font-style: italic;
	font-weight: 700;
	text-transform: uppercase;
	text-align: left;
	margin: 0;
}
.accesso-card__error { background: #fdecea; border: 1px solid #d93025; color: #d93025; border-radius: 6px; padding: 10px 14px; font-size: 14px; }
.accesso-form { display: flex; flex-direction: column; }
/* nel Figma il campo ha solo la riga sotto, non il riquadro */
.accesso-field { border: 0; border-bottom: 1px solid #868686; }
.accesso-field input {
	width: 100%;
	height: 100%;
	border: none;
	background: none;
	padding: 0;
	color: var(--pit-navy);
	font-family: var(--font-body);
}
.accesso-field input:focus { outline: none; }
.accesso-field input::placeholder { color: var(--pit-navy); opacity: 1; }

.accesso-form__submit,
.accesso-form__company-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	border-radius: 100px;
	font-family: var(--font-body);
	font-weight: 700;
	text-transform: uppercase;
	text-decoration: none;
	box-sizing: border-box;
}
/* nel Figma il gradiente di questo tasto sta al 30%: resta chiaro, col testo navy */
.accesso-form__company-cta {
	color: var(--pit-navy);
	background: linear-gradient(334deg, rgba(115,28,28,0.3) 0%, rgba(47,12,48,0.3) 55%, rgba(23,23,23,0.3) 100%);
}
/* riga di servizio per chi e' gia' entrato: sta sotto, non sostituisce il modulo */
.accesso-card__note { color: #646970; margin: 0; text-align: center; font-size: 13px; line-height: 1.5; }
.accesso-card__note a { color: #646970; text-decoration: underline; }
.accesso-card__register { text-align: center; color: var(--pit-navy); margin: 0; }
.accesso-card__register a { color: var(--pit-navy); }

/* ==========================================================================
   DESKTOP — base 1728
   ========================================================================== */
@media (min-width: 768px) {
	/* immagine alta 950 col taglio bianco in basso a destra: sotto si vede il
	   footer, che sale di 70 px per infilarsi nel taglio */
	.accesso-hero {
		height: 950px;
		padding: 0;
		clip-path: polygon(0 0, 100% 0, 100% 889px, 889.3px 889px, 812.3px 950px, 0 950px);
	}
	.accesso-hero__topgrad { height: 345px; }
	.accesso-page ~ .site-footer { margin-top: -70px; padding-top: 166px; }

	.accesso-hero__grid { height: 950px; }
	.accesso-hero__text { position: static; }

	.accesso-hero .eyebrow {
		position: absolute;
		left: 33px;
		top: 326px;
		margin: 0;
		font-size: 16px;
		line-height: 21.856px;
		letter-spacing: 2.08px;
		font-weight: 600;
		text-transform: uppercase;
	}
	.accesso-hero__title {
		position: absolute;
		left: 24px;
		top: 348px;
		width: 450px;
		margin: 0;
		font-size: 84px;
		line-height: 89.58px;
	}
	.accesso-hero__subtitle {
		position: absolute;
		left: 23px;
		top: 561px;
		width: 489px;
		max-width: none;
		margin: 0;
		font-size: 24px;
		line-height: 32.784px;
	}

	/* riquadro di accesso: 562x438 a x 920, y 292 */
	.accesso-card {
		position: absolute;
		left: 798px;
		top: 292px;
		width: 562px;
		padding: 32px 40px;
		border-radius: 9.196px;
		gap: 23px;
	}
	.accesso-card__title { font-size: 24.81px; line-height: 25.97px; }
	.accesso-form { gap: 23px; }
	.accesso-field { height: 55px; border-radius: 0; display: flex; align-items: center; }
	.accesso-field input { font-size: 18px; line-height: 24.588px; }
	.accesso-form__submit {
		height: 51px;
		min-height: 0;
		padding: 0;
		font-size: 14px;
		line-height: 19.124px;
		letter-spacing: 1.96px;
	}
	.accesso-form__company-cta {
		height: 50px;
		padding: 0;
		font-size: 14px;
		line-height: 19.124px;
		letter-spacing: 1.96px;
	}
	.accesso-card__register { font-size: 16px; line-height: 21.856px; }
	.accesso-card__note { font-size: 13px; line-height: 1.5; margin-top: -9px; }
}

/* ==========================================================================
   MOBILE — base 440, Figma 232-7551
   ========================================================================== */
@media (max-width: 767px) {
	.accesso-hero__bg { display: none; }
	.accesso-hero__bg--mobile { display: block; }

	/* immagine alta 902 col taglio in basso: sotto si vede il footer, che sale
	   di 37 px per infilarsi nel taglio */
	.accesso-hero {
		height: 902px;
		padding: 0;
		clip-path: polygon(0 0, 100% 0, 100% 865px, 332.8px 865px, 286.4px 902px, 0 902px);
	}
	.accesso-hero__topgrad { height: 183.8px; }
	.accesso-page ~ .site-footer { margin-top: -37px; padding-top: 77px; }

	.accesso-hero__grid { height: 902px; }

	.accesso-hero .eyebrow {
		position: absolute;
		left: 39px;
		top: 271px;
		margin: 0;
		font-size: 12px;
		line-height: 16.392px;
		letter-spacing: 1.56px;
		font-weight: 600;
		text-transform: uppercase;
	}
	.accesso-hero__title {
		position: absolute;
		left: 38.6px;
		top: 293px;
		width: 225px;
		margin: 0;
		font-size: 42px;
		line-height: 45.693px;
	}
	.accesso-hero__subtitle {
		position: absolute;
		left: 38px;
		top: 403px;
		width: 316px;
		max-width: none;
		margin: 0;
		font-size: 16px;
		line-height: 21.856px;
	}

	/* riquadro di accesso: 365,7 di larghezza a x 37,3 e y 485 */
	.accesso-card {
		position: absolute;
		left: 37.3px;
		top: 485px;
		width: 365.7px;
		padding: 20px 26.03px;
		border-radius: 5.983px;
		gap: 14.97px;
	}
	.accesso-card__title { font-size: 16px; line-height: 16.897px; }
	.accesso-form { gap: 14.97px; }
	.accesso-field { height: 35.8px; border-bottom-width: 0.65px; display: flex; align-items: center; }
	.accesso-field input { font-size: 12px; line-height: 16.392px; }
	.accesso-form__submit {
		height: 33.2px;
		min-height: 0;
		padding: 0;
		border-radius: 65.07px;
		font-size: 10px;
		line-height: 13.66px;
		letter-spacing: 1.4px;
	}
	.accesso-form__company-cta {
		height: 32.5px;
		padding: 0;
		border-radius: 65.07px;
		font-size: 10px;
		line-height: 13.66px;
		letter-spacing: 1.4px;
	}
	.accesso-card__register { font-size: 12px; line-height: 16.392px; }
	.accesso-card__note { font-size: 11px; line-height: 1.5; }
}

/* testo di servizio dentro il riquadro (recupero password) */
.accesso-card__testo { color: var(--pit-navy); margin: 0; }
.accesso-card__register--minore a { text-decoration: underline; }
@media (min-width: 768px) {
	.accesso-card__testo { font-size: 18px; line-height: 24.588px; }
	.accesso-card__register--minore { margin-top: -9px; font-size: 14px; }
}
@media (max-width: 767px) {
	.accesso-card__testo { font-size: 13px; line-height: 18px; }
	.accesso-card__register--minore { margin-top: -8px; font-size: 11px; }
}

/* ==========================================================================
   Inglese: "Step into the paddock" e' piu' lungo di "Entra nel paddock"
   ========================================================================== */
@media (min-width: 768px) {
	/* la colonna del titolo era larga 450: in inglese "THE PADDOCK" non ci stava
	   su una riga e il titolo finiva sopra al sottotitolo */
	body.lingua-en .accesso-hero__title { width: 660px; }
}
@media (max-width: 767px) {
	/* stessa cosa sul telefono: la colonna era 225px */
	body.lingua-en .accesso-hero__title { width: 340px; }
}

.accesso-alert { margin-top: 24px; padding-top: 20px; border-top: 1px solid #e0e0e0; }
.accesso-alert__title { margin: 0 0 8px; font-family: var(--font-heading); font-size: 20px; text-align: center; }
.accesso-alert .accesso-card__note { margin: 0 0 12px; }

/* Accettazione delle Condizioni generali di iscrizione per le aziende (11/11/2026) */
.accesso-cond { margin: 4px 0 14px; }
.accesso-cond__intro { margin: 0 0 10px; font-size: 13px; line-height: 1.4; font-weight: 600; }
.accesso-check { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 10px; font-size: 12px; line-height: 1.45; text-align: left; cursor: pointer; }
.accesso-check input { flex: 0 0 auto; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--pit-violet, #8900E3); }
.accesso-check a { text-decoration: underline; }