/**
 * Il fondo dell'articolo e il gancio a metà — Ultima Pagina
 *
 * Tre pezzi, tre pesi diversi, ed è voluto:
 *
 *   .up-gancio   a metà lettura. Due filetti e una domanda in grande, senza
 *                riquadro: chiede una curiosità, non dei soldi, e deve leggersi
 *                come un'interruzione dell'articolo, non come un annuncio
 *                incollato dentro.
 *   .up-fascia   in fondo. Qui si vende davvero, quindi è una fascia piena a
 *                tutta larghezza col prezzo grande: chi è arrivato fin qui ha
 *                letto tutto.
 *   .up-ponte    subito dopo. Deve dire «non è finita» senza sembrare un altro
 *                annuncio, quindi è l'unico dei tre con il bordo tratteggiato
 *                e nessun fondo pieno.
 *
 * I colori arrivano da assets/box-corsi.css, già in coda a Bricks.
 */

/* -------------------------------------------------------------------------
 * Il gancio al test, a metà articolo
 *
 * È la variante «interruzione tipografica» del canvas «Migliorare il riquadro
 * test articolo», turno 2: niente riquadro, due filetti e la domanda in
 * grande. Non ha un contenitore perché non deve sembrare un annuncio incollato
 * dentro l'articolo: è fatto con gli stessi materiali del testo — un filetto,
 * un corpo più grande, il corsivo — e quindi gli appartiene.
 *
 * Il filetto sopra è spesso il doppio di quello sotto (2px contro 1px): apre
 * con decisione e chiude in punta di piedi, così l'occhio sa dove riprende
 * l'articolo.
 *
 * Misure prese dal canvas: 2a per il desktop, 2b per il telefono a 375px. Le
 * due grandezze che scalano — il punto interrogativo e la domanda — passano
 * per clamp() invece che per un salto secco, perché fra i 375px del disegno e
 * i 660 della colonna il testo deve reggere anche nelle vie di mezzo.
 * ---------------------------------------------------------------------- */

.up-gancio {
	--up-gancio-accento: var(--up-ottanio, #106F8C);

	display: flex;
	flex-direction: column;
	gap: clamp(16px, 2vw, 20px);
	margin: 34px 0;
	padding: clamp(22px, 3vw, 30px) 0 clamp(24px, 3vw, 32px);
	border-top: 2px solid var(--up-navy, #002740);
	border-bottom: 1px solid rgba(0, 39, 64, .18);
}

/* Il test d'ingresso porta ai corsony, che l'ottanio ce l'hanno. I corsiny no:
   per Grammageddon l'accento resta navy e a distinguerlo è la tipografia. */
.up-gancio--navy {
	--up-gancio-accento: var(--up-navy, #002740);
}

.up-gancio__occhiello {
	margin: 0;
	font-size: clamp(.6875rem, 1.4vw, .75rem);
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--up-gancio-accento);
}

.up-gancio__riga {
	display: flex;
	align-items: flex-start;
	gap: clamp(12px, 1.6vw, 16px);
	margin: 0;
}

.up-gancio__segno {
	flex-shrink: 0;
	font-family: var(--up-serif, Georgia, serif);
	font-weight: 700;
	font-size: clamp(2.75rem, 6vw, 4rem);
	line-height: .78;
	color: var(--up-giallo, #FDC548);
}

.up-gancio__domanda {
	flex: 1;
	padding-top: 2px;
	font-family: var(--up-serif, Georgia, serif);
	font-weight: 500;
	font-style: italic;
	font-size: clamp(1.4375rem, 3.2vw, 1.9375rem);
	line-height: 1.18;
	color: var(--up-navy, #002740);
	text-wrap: pretty;
}

.up-gancio__azione {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px;
	margin: 0;
}

.up-gancio__cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 11px 22px;
	border: 2px solid var(--up-gancio-accento);
	border-radius: 9999px;
	color: var(--up-gancio-accento);
	font-size: 1rem;
	font-weight: 600;
	text-decoration: none;
	transition: background-color 300ms cubic-bezier(.2, .8, .2, 1), color 300ms cubic-bezier(.2, .8, .2, 1);
}

.up-gancio__cta:hover,
.up-gancio__cta:focus-visible {
	background: var(--up-gancio-accento);
	color: #fff;
}

.up-gancio__cta:focus-visible {
	outline: 2px solid var(--up-gancio-accento);
	outline-offset: 3px;
}

.up-gancio__freccia {
	flex-shrink: 0;
}

.up-gancio__nota {
	font-size: .875rem;
	color: rgba(0, 39, 64, .55);
}

/* Sul telefono il bottone prende tutta la riga e la nota gli va sotto,
   centrata: affiancarli su 375px li spezzerebbe male entrambi. */
@media (max-width: 600px) {
	.up-gancio__azione {
		display: block;
	}

	.up-gancio__cta {
		display: flex;
		justify-content: center;
		min-height: 48px;
		padding: 14px 20px;
	}

	.up-gancio__nota {
		display: block;
		margin-top: 10px;
		font-size: .8125rem;
		text-align: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.up-gancio__cta {
		transition: none;
	}
}

/* -------------------------------------------------------------------------
 * La fascia del corso, in fondo
 * ---------------------------------------------------------------------- */

.up-fascia {
	--up-fascia-fondo: var(--up-navy, #002740);
	--up-fascia-testo: #fff;
	--up-fascia-spicco: var(--up-giallo, #FDC548);

	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px 28px;
	margin: 36px 0;
	padding: clamp(20px, 3vw, 28px) clamp(20px, 3vw, 30px);
	border-radius: 20px;
	background: var(--up-fascia-fondo);
	color: var(--up-fascia-testo);
}

.up-fascia--rosso   { --up-fascia-fondo: var(--up-rosso, #960F0F); }
.up-fascia--navy    { --up-fascia-fondo: var(--up-navy, #002740); }
.up-fascia--ottanio { --up-fascia-fondo: var(--up-ottanio, #106F8C); }

/* Sul giallo il bianco non si legge: si ribalta tutto sul navy. */
.up-fascia--giallo {
	--up-fascia-fondo: var(--up-giallo, #FDC548);
	--up-fascia-testo: var(--up-navy, #002740);
	--up-fascia-spicco: var(--up-navy, #002740);
}

.up-fascia__testo {
	flex: 1 1 280px;
	min-width: 0;
}

.up-fascia__linguetta {
	display: inline-block;
	margin: 0 0 8px;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--up-fascia-spicco);
	color: var(--up-fascia-fondo);
	font-size: .625rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.up-fascia__data {
	margin: 0 0 3px;
	font-size: .8125rem;
	font-weight: 700;
	color: var(--up-fascia-spicco);
}

.up-fascia__richiamo {
	margin: 0 0 6px;
	font-family: var(--up-serif, Georgia, serif);
	font-size: clamp(1.25rem, 2.4vw, 1.5rem);
	font-weight: 700;
	line-height: 1.15;
	color: var(--up-fascia-testo);
	text-wrap: balance;
}

.up-fascia__desc {
	margin: 0;
	font-size: .9375rem;
	line-height: 1.55;
	color: var(--up-fascia-testo);
	opacity: .88;
}

.up-fascia__meta {
	margin: 9px 0 0;
	font-size: .75rem;
	line-height: 1.4;
	color: var(--up-fascia-testo);
	opacity: .62;
}

.up-fascia__acquisto {
	flex: 0 0 auto;
	text-align: center;
}

.up-fascia__prezzi {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: center;
	gap: 4px 8px;
	margin: 0;
}

.up-fascia__prezzi-etichetta {
	flex-basis: 100%;
	font-size: .6875rem;
	text-transform: uppercase;
	letter-spacing: .1em;
	opacity: .7;
}

.up-fascia__prezzo {
	font-family: var(--up-serif, Georgia, serif);
	font-size: 2rem;
	font-weight: 700;
	line-height: 1;
	color: var(--up-fascia-spicco);
}

.up-fascia__pieno {
	font-size: .875rem;
	opacity: .55;
}

.up-fascia__promo {
	margin: 4px 0 0;
	font-size: .625rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--up-fascia-testo);
}

.up-fascia__cta {
	display: inline-flex;
	align-items: center;
	margin-top: 12px;
	padding: 0 26px;
	height: 46px;
	border-radius: 999px;
	background: var(--up-fascia-spicco);
	color: var(--up-fascia-fondo);
	font-weight: 700;
	font-size: .9375rem;
	text-decoration: none;
	transition: transform .2s ease;
}

.up-fascia__cta:hover {
	transform: translateY(-2px);
}

.up-fascia__cta:focus-visible {
	outline: 2px solid var(--up-fascia-testo);
	outline-offset: 2px;
}

/* Su schermo stretto il prezzo e il pulsante scendono sotto il testo e si
   allargano: un pulsante a metà larghezza in fondo a una colonna stretta
   sembra un ripensamento. */
@media (max-width: 600px) {
	.up-fascia__acquisto {
		flex-basis: 100%;
		text-align: left;
	}

	.up-fascia__prezzi {
		justify-content: flex-start;
	}

	.up-fascia__cta {
		width: 100%;
		justify-content: center;
	}
}

/* -------------------------------------------------------------------------
 * Il ponte verso i commenti
 * ---------------------------------------------------------------------- */

.up-ponte {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
	margin: 0 0 36px;
	padding: 13px 18px;
	border: 1px dashed rgba(16, 111, 140, .45);
	border-radius: 12px;
	background: rgba(16, 111, 140, .06);
}

.up-ponte__testo {
	margin: 0;
	font-size: .9375rem;
	line-height: 1.45;
}

.up-ponte__cta {
	font-size: .9375rem;
	font-weight: 700;
	color: var(--up-ottanio, #106F8C);
	text-decoration: none;
	white-space: nowrap;
}

.up-ponte__cta:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* -------------------------------------------------------------------------
 * Precedente e successivo
 *
 * Erano due righe nude larghe quanto lo schermo — 1430px — mentre l'articolo
 * che si è appena finito di leggere sta in una colonna molto più stretta: il
 * salto di larghezza è quello che le faceva sembrare fuori posto. Qui
 * diventano due schede rientrate come il testo, con la freccia dalla parte in
 * cui si va.
 *
 * `--up-bordo` è il rientro della colonna del sito, già calcolato in
 * box-corsi.css per le strisce a tutta larghezza.
 * ---------------------------------------------------------------------- */

.brxe-post-navigation {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	padding-inline: var(--up-bordo, 1.5rem);
	margin: 8px 0 40px;
}

.brxe-post-navigation .prev-post,
.brxe-post-navigation .next-post {
	flex: 1 1 260px;
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
	padding: 14px 18px;
	border: 1px solid rgba(0, 39, 64, .14);
	border-radius: 14px;
	text-decoration: none;
	color: inherit;
	background: #fff;
	transition: border-color .2s ease, transform .2s ease;
}

.brxe-post-navigation .prev-post:hover,
.brxe-post-navigation .next-post:hover {
	border-color: var(--up-ottanio, #106F8C);
	transform: translateY(-2px);
}

.brxe-post-navigation .prev-post:focus-visible,
.brxe-post-navigation .next-post:focus-visible {
	outline: 2px solid var(--up-ottanio, #106F8C);
	outline-offset: 2px;
}

/* La scheda del successivo si specchia: freccia a destra, testo allineato a
   destra, così le due puntano verso fuori come le pagine di un libro. */
.brxe-post-navigation .next-post {
	flex-direction: row-reverse;
	text-align: right;
}

.brxe-post-navigation .swiper-button {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--up-crema, #FAF7F2);
	color: var(--up-navy, #002740);
	font-size: .875rem;
}

.brxe-post-navigation .content {
	min-width: 0;
}

.brxe-post-navigation .label {
	display: block;
	margin-bottom: 2px;
	font-size: .625rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: rgba(0, 39, 64, .55);
}

/* Il titolo si ferma a due righe: alcuni sono lunghissimi e da soli
   sbilanciavano l'altezza delle due schede. */
.brxe-post-navigation .title {
	margin: 0;
	font-family: var(--up-serif, Georgia, serif);
	font-size: .9375rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--up-navy, #002740);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.up-gancio,
	.up-fascia__cta,
	.brxe-post-navigation .prev-post,
	.brxe-post-navigation .next-post {
		transition: none;
	}

	.up-fascia__cta:hover,
	.brxe-post-navigation .prev-post:hover,
	.brxe-post-navigation .next-post:hover {
		transform: none;
	}
}