/**
 * L'articolo
 *
 * Parte del tema Squagliasole Solleone. Caricato da inc/assets.php.
 *
 * Dall'alto: la striscia dei dati, il titolo a tutta larghezza, poi due
 * colonne - la foto su fondo blu a sinistra, il testo a destra - e in fondo
 * i tag, il pannello Instagram e gli articoli vicini. La frase in grande
 * (blocco Citazione in evidenza, o paragrafo evidenziato) esce dalla colonna
 * del testo e attraversa la pagina come una fascia blu.
 *
 * Il testo e' fatto di blocchi salvati nell'articolo: Verso, Citazione in
 * evidenza, Separatore, Paragrafo con lo stile Crediti. Qui si vestono; non
 * si indovina niente.
 */

.sq-articolo {
	container-type: inline-size;
	--sq-col-foto: clamp(18rem, 37.5cqi, 30rem);
	--sq-pad-testo: clamp(1.25rem, 4.4cqi, 3.5rem);
}

/* --- la striscia dei dati -------------------------------------------- */
.sq-articolo__dati {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: stretch;
	gap: 0;
	margin: 0;
	padding: 0;
	border-block-end: var(--sq-filo) solid var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--mono);
	font-size: clamp(0.8rem, 1.3cqi, 1.05rem);
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.sq-articolo__dati > * {
	padding: 0.85rem var(--sq-bordo);
	border-inline-end: var(--sq-filo) solid var(--wp--preset--color--contrast);
	text-decoration: none;
}

.sq-articolo__dati > *:last-child {
	border-inline-end: 0;
}

.sq-articolo__dati .sq-dati__numero {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.sq-articolo__dati .sq-dati__cinema {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--bianco);
}

/* --- il titolo -------------------------------------------------------- */
.sq-articolo__titolo {
	margin: 0;
	padding: 1.5rem var(--sq-bordo) 1.9rem;
	border-block-end: var(--sq-filo) solid var(--wp--preset--color--contrast);
	font-size: clamp(2.8rem, 11.8cqi, 9.5rem);
	line-height: 0.84;
	letter-spacing: -0.04em;
	overflow-wrap: anywhere;
	text-wrap: balance;
}

/* --- le due colonne ----------------------------------------------------- */
.sq-articolo__corpo {
	display: grid;
	grid-template-columns: var(--sq-col-foto) minmax(0, 1fr);
	align-items: start;
	position: relative;
}

/*
 * Il filetto verticale corre per tutta l'altezza del corpo, anche sotto la
 * foto dove la colonna di sinistra e' vuota: nel mock e' la riga che tiene
 * insieme la pagina. E' disegnato qui e non sulla foto, che e' alta solo
 * quanto la foto.
 */
.sq-articolo__corpo::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 var(--sq-col-foto);
	border-inline-start: var(--sq-filo) solid var(--wp--preset--color--contrast);
	pointer-events: none;
}

.sq-articolo__foto {
	background: var(--wp--preset--color--accent);
	padding: 2.5rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	--sq-tetto: var(--sq-hero-media);
}

/*
 * La figura di WordPress e' un blocco largo quanto la colonna, e l'immagine
 * dentro si appoggia a sinistra: nella colonna blu restavano 40 pixel a
 * sinistra e 83 a destra. Qui si centra l'immagine, non la figura.
 */
.sq-articolo__foto .wp-block-post-featured-image {
	margin: 0;
	display: flex;
	justify-content: center;
	width: 100%;
}

.sq-figura {
	margin: 0;
	align-self: flex-start;
	font-family: var(--wp--preset--font-family--mono);
	font-size: clamp(0.7rem, 1cqi, 0.85rem);
	text-transform: uppercase;
	color: var(--wp--preset--color--bianco);
}

.sq-figura a {
	color: inherit;
}

/* Una pagina senza immagine: niente colonna blu vuota. */
.sq-articolo__corpo:not(:has(.sq-articolo__foto img)) {
	grid-template-columns: minmax(0, 1fr);
}

.sq-articolo__corpo:not(:has(.sq-articolo__foto img)) .sq-articolo__foto,
.sq-articolo__corpo:not(:has(.sq-articolo__foto img))::before {
	display: none;
}

/* --- il testo ------------------------------------------------------------- */
.sq-articolo__testo {
	padding: 3rem var(--sq-pad-testo) 3.2rem;
	font-family: var(--wp--preset--font-family--text);
	font-size: clamp(1.15rem, 1.8cqi, 1.5rem);
	line-height: 1.5;
	min-width: 0;
}

.sq-articolo__testo > * {
	margin-block: 0;
}

.sq-articolo__testo > * + * {
	margin-block-start: 1.3em;
}

.sq-articolo__testo > p + p {
	margin-block-start: 1em;
}

/* Una riga senza punti di rottura non deve uscire dalla colonna. */
.sq-articolo__testo > p {
	overflow-wrap: anywhere;
}

/*
 * I versi: Alegreya corsivo, corpo piu' grande della prosa, con il rientro a
 * capovolto - la prima riga di ogni verso sporge, il seguito rientra. Il
 * blocco Verso e' un <pre>: senza queste righe uscirebbe in monospazio.
 *
 * "each-line" fa valere il rientro a ogni riga dopo un a capo, non solo alla
 * prima del blocco. Dove non e' supportato la dichiarazione cade e resta il
 * padding: la strofa esce rientrata tutta di 1.2em, e si legge lo stesso.
 */
.sq-articolo__testo .wp-block-verse {
	font-family: var(--wp--preset--font-family--text);
	font-style: italic;
	font-weight: 500;
	font-size: clamp(1.35rem, 2.35cqi, 1.9rem);
	line-height: 1.38;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	padding: 0 0 0 1.2em;
	text-indent: -1.2em each-line;
	text-wrap: pretty;
}

.sq-articolo__testo > .wp-block-verse + .wp-block-verse {
	margin-block-start: 1.3em;
}

/*
 * La frase in grande: una fascia blu che attraversa la pagina.
 *
 * Sta dentro la colonna del testo ma esce a sinistra di tutta la colonna
 * della foto e del padding, e a destra del padding: i margini negativi sono
 * esattamente quelle misure, dichiarate una volta come variabili. Sopra il
 * filetto verticale (z-index), che sotto di lei non deve vedersi.
 */
.sq-articolo__testo > .wp-block-pullquote,
.sq-articolo__testo > .sq-risalto {
	position: relative;
	z-index: 1;
	margin-block: 2.6rem;
	margin-inline: calc(-1 * (var(--sq-col-foto) + var(--sq-filo) + var(--sq-pad-testo))) calc(-1 * var(--sq-pad-testo));
	padding: 2.6rem var(--sq-bordo) 2.9rem;
	border-block: var(--sq-filo) solid var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--bianco);
	text-align: start;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	font-style: normal;
	font-size: clamp(2rem, 6.5cqi, 5.2rem);
	line-height: 0.9;
	letter-spacing: -0.03em;
	text-transform: uppercase;
	text-wrap: balance;
	overflow-wrap: anywhere;
}

.sq-articolo__testo .wp-block-pullquote blockquote,
.sq-articolo__testo .wp-block-pullquote p {
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	text-align: inherit;
	color: inherit;
}

.sq-articolo__testo .wp-block-pullquote cite {
	display: block;
	margin-block-start: 1.2rem;
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 400;
	font-style: normal;
	font-size: clamp(0.75rem, 1.15cqi, 0.95rem);
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

/* Il corsivo dentro la frase in grande si raddrizza: e' un titolo, non un verso. */
.sq-articolo__testo > .sq-risalto em,
.sq-articolo__testo .wp-block-pullquote em {
	font-style: normal;
}

/*
 * Il segno dell'evidenziatore non si vede: sulla pagina il risalto e' la
 * fascia, non una banda di colore. !important perche' WordPress scrive il
 * colore dell'evidenziatore con una classe che ce l'ha a sua volta.
 */
.sq-articolo mark {
	background: none !important;
	color: inherit !important;
}

/* Poche parole evidenziate dentro un capoverso: sottolineate in blu. */
.sq-articolo__testo p:not(.sq-risalto) mark {
	box-shadow: inset 0 -0.3em 0 color-mix(in srgb, var(--wp--preset--color--accent) 35%, transparent);
}

/* Lo stacco: il blocco Separatore diventa una barra nera piena. */
.sq-articolo__testo .wp-block-separator {
	width: 100%;
	max-width: none;
	height: calc(var(--sq-filo) * 3.5);
	border: 0;
	margin-block: 2.75rem 1.75rem;
	background: var(--wp--preset--color--contrast);
	opacity: 1;
}

/* I crediti: lo stile di blocco "Crediti" sul paragrafo, un'etichetta nera. */
.sq-articolo__testo .is-style-crediti {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0.3em 0.8em;
	padding: 0.55rem 1rem;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 600;
	font-style: normal;
	font-size: clamp(0.9rem, 1.55cqi, 1.25rem);
	line-height: 1.4;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.sq-articolo__testo .is-style-crediti em,
.sq-articolo__testo .is-style-crediti a {
	font-style: normal;
	color: inherit;
}

.sq-articolo__testo figure {
	text-align: start;
}

.sq-articolo__testo img {
	max-width: 100%;
	height: auto;
}

/* --- la coda: tag e Instagram ---------------------------------------------- */
.sq-articolo__coda {
	border-block-start: var(--sq-filo) solid var(--wp--preset--color--contrast);
	padding: 1.4rem var(--sq-bordo) 1.8rem;
}

.sq-articolo__tag {
	margin: 0 0 1.2rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: clamp(0.75rem, 1.15cqi, 0.95rem);
	text-transform: uppercase;
}

.sq-articolo__tag a {
	text-decoration: none;
}

.sq-articolo__tag a:hover {
	text-decoration: underline;
}

.sq-share {
	border: var(--sq-filo) solid var(--wp--preset--color--contrast);
	padding: 1.25rem var(--sq-bordo) 1.5rem;
}

.sq-share__titolo {
	margin: 0 0 1rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: clamp(0.75rem, 1.15cqi, 0.95rem);
	text-transform: uppercase;
}

.sq-share__azioni,
.sq-share__consegna {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.sq-share__consegna {
	margin-block-start: 0.75rem;
}

.sq-share__btn {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	font-size: clamp(0.85rem, 1.3cqi, 1.05rem);
	text-transform: uppercase;
	color: var(--wp--preset--color--base);
	background: var(--wp--preset--color--contrast);
	border: 2px solid var(--wp--preset--color--contrast);
	padding: 0.6rem 1rem;
	cursor: pointer;
}

.sq-share__btn:hover:not(:disabled) {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--bianco);
}

.sq-share__btn:disabled {
	opacity: 0.55;
	cursor: progress;
}

.sq-share__btn--tenue {
	background: none;
	color: var(--wp--preset--color--contrast);
}

.sq-share__esito {
	margin: 0.9rem 0 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: clamp(0.75rem, 1.15cqi, 0.95rem);
	min-height: 1.4em;
}

.sq-share__anteprima {
	margin-block-start: 1.25rem;
	max-width: 22rem;
}

.sq-share__anteprima canvas {
	display: block;
	border: var(--sq-filo) solid var(--wp--preset--color--contrast);
}

/* --- gli articoli vicini ----------------------------------------------------- */
.sq-vicini {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border-block-start: var(--sq-filo) solid var(--wp--preset--color--contrast);
}

.sq-vicini > * {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1.5rem var(--sq-bordo) 1.9rem;
	text-decoration: none;
	min-width: 0;
}

.sq-vicini__prev {
	border-inline-end: var(--sq-filo) solid var(--wp--preset--color--contrast);
}

.sq-vicini__next {
	text-align: end;
	align-items: flex-end;
}

.sq-vicini__etichetta {
	font-family: var(--wp--preset--font-family--mono);
	font-size: clamp(0.75rem, 1.15cqi, 0.95rem);
	text-transform: uppercase;
}

.sq-vicini__titolo {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	font-size: clamp(1.4rem, 3.9cqi, 3.1rem);
	line-height: 0.9;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	overflow-wrap: anywhere;
	text-wrap: balance;
}

.sq-vicini a:hover .sq-vicini__titolo {
	color: var(--wp--preset--color--accent);
}

/* ------------------------------------------------------------------ *
 * Telefono: una colonna. La foto sopra il testo, la fascia blu esce solo
 * del padding, il filetto verticale non c'e', i vicini uno sotto l'altro.
 * ------------------------------------------------------------------ */
@media (max-width: 47.999rem) {
	.sq-articolo__corpo {
		grid-template-columns: minmax(0, 1fr);
	}

	.sq-articolo__corpo::before {
		display: none;
	}

	.sq-articolo__foto {
		padding: 1.5rem;
		border-block-end: var(--sq-filo) solid var(--wp--preset--color--contrast);
	}

	.sq-articolo__testo {
		padding: 1.8rem var(--sq-bordo) 2rem;
	}

	.sq-articolo__testo > .wp-block-pullquote,
	.sq-articolo__testo > .sq-risalto {
		margin-inline: calc(-1 * var(--sq-bordo));
		padding: 1.5rem var(--sq-bordo) 1.75rem;
	}

	.sq-vicini {
		grid-template-columns: minmax(0, 1fr);
	}

	.sq-vicini__prev {
		border-inline-end: 0;
		border-block-end: var(--sq-filo) solid var(--wp--preset--color--contrast);
	}

	.sq-vicini__next {
		text-align: start;
		align-items: flex-start;
	}
}