/**
 * Componente: articolo singolo — corpo e navigazione fra contenuti.
 *
 * Caricato su is_singular('post') e is_singular('project') (inc/enqueue.php):
 * la navigazione fra contenuti è la stessa nei due modelli.
 *
 * Ogni valore viene dai computed style della produzione in docs/baseline/
 * (Melinda attivo), non dai sorgenti del tema legacy.
 */

/* -------------------------------------------------------------------------- */
/*  Articolo singolo                                                          */
/*                                                                            */
/*  L'apertura non è un `core/cover` con la featured ma il blocco             */
/*  `skuola/page-title` (F6): l'immagine della barra sta nei meta             */
/*  `_skuola_title_*`, su 64 articoli è diversa dalla featured e quindici la  */
/*  vogliono `contain`, che una copertina non sa esprimere. Stato ad altezza  */
/*  piena, sfondo fisso e data stanno in assets/css/layout.css; qui resta il  */
/*  corpo dell'articolo, misurato in docs/baseline/components/post-*.json.    */
/* -------------------------------------------------------------------------- */

/* Colonna del testo: dieci dodicesimi della riga, centrati — non è la `.skuola-col` delle pagine,
   quindi ha i suoi quattro gradini. */
.skuola-post-col {
	max-width: 1095px;
	margin-left: auto;
	margin-right: auto;
}

/* I due padding restano separati come in produzione (`.main-cnts-w` 60/120, `.post-single-w` 45):
   sommarli darebbe la stessa altezza ma renderebbe la sonda `main-cnts-w` incomparabile. */
.skuola-post-corpo {
	padding-top: 45px;
	padding-bottom: 45px;
}

/* I 45px stanno qui e non nel modello: inline vincerebbero sulla media query che sotto i 768 li
   azzera. */

/* Filetto e 60px di respiro, più i 60 di `margin-top` della barra: 120px misurati fra la fine del
   testo e la navigazione. Il #e6e6e6 di Melinda è normalizzato su `faded`. */
.skuola-post-content {
	font-size: var(--wp--preset--font-size--30);
	line-height: 25.2px;
	--wp--style--block-gap: 14px;
	padding-bottom: 60px;
	border-bottom: 1px solid var(--wp--preset--color--faded);
}

.skuola-post-content > * + * {
	margin-block-start: 14px;
}

/* Non agli embed: in Melinda i 14px sono una regola sui soli `p`, non su tutti i figli. Su un
   `<iframe>` fra due paragrafi valgono i 14.4px che restavano su `gli-strafalcioni-…`. */
.skuola-post-content > iframe {
	margin-block-start: 0;
}

.skuola-post-content p {
	margin: 14px 0;
}

.skuola-post-content strong,
.skuola-post-content b {
	color: var(--wp--preset--color--heading);
	font-weight: 700;
}

.skuola-post-content a {
	font-weight: 700;
}

.skuola-post-content h5 {
	font-size: var(--wp--preset--font-size--70);
	line-height: 28.8px;
	letter-spacing: -0.48px;
	margin: 0 0 14px;
}

/* Il corpo è HTML dell'editor classico: `<img>` con width/height fissi e `<video>` con la
   larghezza del file. Senza, a 375 il video di `tgcom24-mediaset-2026` alza la pagina di ~2000px. */
/* Gli shortcode `[video]` stanno in un `<div class="wp-video">` con la larghezza **inline**: un
   `max-width` sull'elemento non basta, il suo 100% è quello del wrapper. */
.skuola-post-content .wp-video,
.skuola-post-content .mejs-container {
	max-width: 100%;
}

.skuola-post-content img,
.skuola-post-content video {
	display: block;
	max-width: 100%;
	height: auto;
}

/* Gli `<iframe>` degli oEmbed **tengono la loro altezza**: con `height: auto` un player Spreaker
   da 200px cade ai 150 di default. E restano **inline**: `display: block` toglie al paragrafo lo
   spazio della riga di testo, 7.7px costanti ai quattro viewport. */
.skuola-post-content iframe,
.skuola-post-content embed,
.skuola-post-content object {
	max-width: 100%;
}

.skuola-post-content .aligncenter {
	margin-left: auto;
	margin-right: auto;
}

/* Navigazione articolo precedente/successivo */
/* Due classi: il core azzera i margini dei figli diretti di un contenitore con classe di layout. */
/* 120px di stacco, non 60: in Melinda i 60 del corpo e i 60 della barra **non** si fondono, fra i
   due ci sono gli pseudo-elementi `display: table` del clearfix di Bootstrap. */
.skuola-post-col .skuola-post-nav {
	margin-top: 120px;
}

.skuola-post-nav {
	display: flex;
	padding-top: 30px;
	border-top: 1px solid var(--wp--preset--color--faded);
}

.skuola-post-nav .wp-block-post-navigation-link {
	position: relative;
	width: 50%;
}

.skuola-post-nav .post-navigation-link-previous {
	padding: 0 0 0 80px;
}

.skuola-post-nav .post-navigation-link-next {
	padding: 0 80px 0 0;
	text-align: right;
}

.skuola-post-nav a {
	display: block;
	text-decoration: none;
}

/* `margin-bottom: 9px`, non 12: la voce di Melinda misura 41px — 12 di etichetta, 9 di stacco, 20
   di titolo — e la barra 72 (baseline/components/post-tgcom24.json). */
.skuola-post-nav .post-navigation-link__label {
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	color: var(--wp--preset--color--body);
	margin-bottom: 9px;
}

.skuola-post-nav .post-navigation-link__title {
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 20px;
	font-weight: 700;
	line-height: 20px;
	letter-spacing: -0.4px;
	color: var(--wp--preset--color--heading);
}

.skuola-post-nav a:hover .post-navigation-link__title {
	color: var(--wp--preset--color--primary);
}

.skuola-post-nav .wp-block-post-navigation-link::before {
	content: "";
	position: absolute;
	top: 9px;
	width: 24px;
	height: 24px;
	background-color: var(--wp--preset--color--primary);
}

.skuola-post-nav .post-navigation-link-previous::before {
	left: 0;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='19' y1='12' x2='5' y2='12'/%3E%3Cpolyline points='12 19 5 12 12 5'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='19' y1='12' x2='5' y2='12'/%3E%3Cpolyline points='12 19 5 12 12 5'/%3E%3C/svg%3E") no-repeat center / contain;
}

.skuola-post-nav .post-navigation-link-next::before {
	right: 0;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E") no-repeat center / contain;
}

@media (max-width: 1199px) {
	.skuola-post-col {
		max-width: 798.3px;
	}
}

@media (max-width: 991px) {
	.skuola-post-col {
		max-width: 618px;
	}
}

@media (max-width: 767px) {
	/* Sotto i 768 la colonna è quella del contenuto: `col-md-*` non si applica. */
	.skuola-post-col {
		max-width: none;
	}
	/* La navigazione **non** si impila: le due metà restano affiancate con la freccia in cima. In
	   produzione a 375 la voce è alta 66 e la barra 97. */
	.skuola-post-nav .wp-block-post-navigation-link {
		padding: 28px 0 0;
	}
	.skuola-post-nav .post-navigation-link__label {
		margin-bottom: 12px;
	}
	.skuola-post-nav .wp-block-post-navigation-link::before {
		top: 0;
	}
	/* Sotto i 768 `.post-single-w` non ha padding: resta il 60/120 della fascia. */
	.skuola-post-corpo {
		padding-top: 0;
		padding-bottom: 0;
	}
	/* Sotto i 768 il titolo della voce scende a 14/14, come in produzione. */
	.skuola-post-nav .post-navigation-link__title {
		font-size: var(--wp--preset--font-size--30);
		line-height: 14px;
	}
	/* L'`h5` del corpo è il sottotitolo, spesso lungo: a 24px andava su undici righe invece di nove e
	   la pagina cresceva di 122px (era il residuo di `gli-strafalcioni-…` a 375). */
	.skuola-post-content h5 {
		font-size: var(--wp--preset--font-size--50);
		line-height: 21.6px;
		letter-spacing: -0.36px;
	}
}