/* =============================================================================
   RITOCCHI — pezzi che stanno su più pagine
   -----------------------------------------------------------------------------
   Aggiunto il 20 agosto 2026.

   PERCHÉ NON DENTRO xpan-2026.css
   Questi stili toccano l'intestazione, che sta su ogni pagina del sito: il
   posto giusto sarebbe il foglio principale. Ma quel foglio è lungo duemila
   righe e lo usano tutte le pagine: riscriverlo per intero solo per aggiungere
   in fondo trenta regole vuol dire rischiare di riportare indietro qualcosa che
   nel frattempo è cambiato sul server. Questo si carica dal mu-plugin, sta
   sopra al foglio principale, e si spegne cancellando un file.

   Se un domani si fa un giro di pulizia, il contenuto di qui va travasato in
   xpan-2026.css e questo file si cancella.
   ============================================================================= */

/* --------------------------------------------- 1. I pulsanti in testata -- */

/* Prima ce n'era uno solo, «Entra», in fondo alla riga del menu. Accanto a
   «Chi siamo» si leggeva come un'altra voce di navigazione, e di registrarsi
   non si parlava da nessuna parte. Adesso sono due e si distinguono a colpo
   d'occhio: chi torna cerca il filo nero, chi arriva vede il giallo. */

.xpan .header-azioni {
	display: flex;
	align-items: stretch;
	gap: 8px;
	flex: 0 0 auto;
}

.xpan .header-btn {
	display: flex;
	align-items: center;
	padding: 14px 18px;
	font-size: 12px;
	font-weight: 900;
	letter-spacing: .02em;
	line-height: 1;
	white-space: nowrap;
	border: 1px solid #111;
	transition: background .18s, color .18s;
}

/* «Accedi»: solo il contorno. È per chi sa già dove sta andando. */
.xpan .header-btn-accedi { background: #fff; color: #111; }
.xpan .header-btn-accedi:hover { background: #111; color: #fff; }

/* «Registrati»: pieno di giallo. È l'invito, e deve pesare di più. */
.xpan .header-btn-registrati { background: var(--yellow); color: #111; }
.xpan .header-btn-registrati:hover { background: #111; color: var(--yellow); }

/* Per chi è già dentro: un pulsante solo, nero come prima. */
.xpan .header-btn-area { background: #111; color: #fff; }
.xpan .header-btn-area:hover { background: var(--yellow); color: #111; }

/* Sotto i 1080 px l'intestazione passa al menu del telefono e i pulsanti
   spariscono con lei: la stessa regola che valeva per .profile-button. */
@media (max-width: 1080px) {
	.xpan .site-header .header-azioni { display: none; }
}

/* Nel menu del telefono «Registrati» resta in grassetto e giallo: è una voce
   fra le altre, ma non è una voce come le altre. */
.xpan .mobile-menu div a b { color: inherit; }
.xpan .mobile-menu div a:has(b) { background: var(--yellow); color: #111; }

/* ------------------------------------------- 2. La striscia nel profilo -- */

/* La stessa striscia della home, dentro l'area personale. Lì è a tutta
   larghezza fra due righe nere; qui sta dentro un blocco, quindi le serve il
   filo tutto intorno invece che solo sopra e sotto. */
.xpan .quick-strip-utente {
	border: var(--rule);
	margin-top: 4px;
}
.xpan .quick-strip-utente > a { min-height: 190px; padding: 24px; }
.xpan .quick-strip-utente span { font-size: clamp(19px, 1.5vw, 26px); }

.xpan .utente-blocco-largo { grid-column: 1 / -1; }

@media (max-width: 1080px) {
	.xpan .quick-strip-utente { grid-template-columns: 1fr 1fr; }
	.xpan .quick-strip-utente > a:nth-child(2) { border-right: 0; }
	.xpan .quick-strip-utente > a:nth-child(-n+2) { border-bottom: var(--rule); }
}
@media (max-width: 560px) {
	.xpan .quick-strip-utente { grid-template-columns: 1fr; }
	.xpan .quick-strip-utente > a { border-right: 0; border-bottom: var(--rule); min-height: 130px; }
	.xpan .quick-strip-utente > a:last-child { border-bottom: 0; }
}

/* ------------------------------------------------- 3. La pagina grazie -- */

.xpan .grazie-page { background: #fff; }

.xpan .grazie-passi {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border: var(--rule);
	margin-bottom: 48px;
}
.xpan .grazie-passo {
	padding: 30px;
	border-right: 1px solid #111;
}
.xpan .grazie-passo:last-child { border-right: 0; }

/* Il passo appena fatto è verde e spuntato, quello da fare adesso è giallo e
   pieno: si capisce a che punto si è senza leggere una parola. */
.xpan .grazie-passo.fatto { background: var(--green); color: #fff; }
.xpan .grazie-passo.ora { background: var(--yellow); }

.xpan .grazie-segno {
	width: 34px; height: 34px;
	border: 1px solid currentColor;
	display: flex; align-items: center; justify-content: center;
	font-weight: 900; font-size: 15px;
	margin-bottom: 18px;
}
.xpan .grazie-passo h3 {
	margin: 0 0 8px;
	font-size: clamp(20px, 1.7vw, 26px);
	line-height: 1.1; letter-spacing: -.03em;
}
.xpan .grazie-passo p { margin: 0; font-size: 14.5px; line-height: 1.5; }
.xpan .grazie-passo.fatto p { color: rgba(255,255,255,.85); }

.xpan .grazie-aiuto {
	background: var(--cream);
	border: var(--rule);
	padding: 34px;
	margin-bottom: 40px;
}
.xpan .grazie-aiuto h2 {
	margin: 0 0 18px;
	font-size: clamp(24px, 2.2vw, 34px);
	letter-spacing: -.035em;
}
.xpan .grazie-aiuto ul { margin: 0 0 18px; padding-left: 20px; }
.xpan .grazie-aiuto li { font-size: 15px; line-height: 1.6; margin-bottom: 10px; }
.xpan .grazie-scrivici { margin: 0; font-size: 15px; line-height: 1.6; }
.xpan .grazie-scrivici a { text-decoration: underline; color: var(--purple); font-weight: 700; }

.xpan .grazie-azioni { display: flex; flex-wrap: wrap; gap: 12px; }

@media (max-width: 860px) {
	.xpan .grazie-passi { grid-template-columns: 1fr; }
	.xpan .grazie-passo { border-right: 0; border-bottom: 1px solid #111; }
	.xpan .grazie-passo:last-child { border-bottom: 0; }
	.xpan .grazie-aiuto { padding: 22px 18px; }
	.xpan .grazie-azioni { flex-direction: column; }
	.xpan .grazie-azioni .button { justify-content: space-between; }
}

/* ------------------------------------ 4. Il titolo sopra la copertina -- */

/* IL DIFETTO
   Sulla pagina del podcast, la copertina della card grande usciva dalla sua
   colonna e finiva sotto al titolo. Non sempre: dipendeva dalla larghezza della
   finestra e da quanto era lungo il testo della puntata. Misurato sul sito:

       1890 px  copertina 310 px   (già 20 px di troppo, ma non si vede)
       1512 px  copertina 363 px   3 card sovrapposte
       1260 px  copertina 508 px   6 card sovrapposte
        995 px  copertina 901 px   6 card sovrapposte
        840 px  copertina 1290 px  6 card sovrapposte

   Sotto i 900 px entra in funzione un'altra regola che rimette le colonne una
   sopra l'altra, quindi sul telefono non si vedeva. E chi ha uno schermo largo
   — o la scalatura di Windows bassa — non lo vedeva nemmeno lui. Da qui il
   «ogni tanto» e il «su altri pc».

   LA CAUSA
   In xpan-2026.css la card è una griglia con `align-items: stretch`, e la
   copertina ha `aspect-ratio: 1 / 1` senza una larghezza dichiarata. Lo stretch
   rende l'altezza definita — la copertina è alta quanto tutta la card, cioè
   quanto il testo accanto — e a quel punto il rapporto quadrato calcola la
   LARGHEZZA a partire dall'altezza: testo lungo, card alta, copertina larga
   uguale. Più il testo era lungo, più la copertina sfondava.

   LA CORREZIONE
   Una riga: dichiarare la larghezza. Con larghezza e altezza entrambe definite
   il rapporto d'aspetto non ha più niente da calcolare e la copertina resta
   nella sua colonna da 290 px. Verificato a nove larghezze, da 1890 a 630. */
.xpan .podcast-copertina { width: 100%; }

/* La copertina resta in alto invece che a mezz'altezza: quando il testo è
   lungo la colonna è alta, e l'immagine centrata verticalmente si staccava dal
   titolo che dovrebbe accompagnare. */
.xpan .podcast-copertina img { object-position: center top; }