/**
 * Stackpress
 *
 * Non c'è un solo colore fisso qui dentro. I default sono currentColor e
 * transparent, quindi il feed prende i colori dal tema che lo ospita e continua
 * a funzionare anche sui temi che cambiano fondo sezione per sezione.
 * Per personalizzarlo si ridefiniscono le variabili --sp-* su .stackpress.
 *
 * Due accorgimenti tengono in piedi tutto questo, e vanno spiegati perché
 * sembrano prolissità:
 *
 * 1. I default NON sono dichiarati su .stackpress ma scritti come secondo
 *    argomento di var(): "var(--sp-accent, currentColor)". Se fossero
 *    dichiarazioni normali competerebbero con quelle del tema a pari
 *    specificità, e vincerebbe l'ultimo foglio caricato: siccome questo di
 *    solito è il nostro, il tema perderebbe e non si potrebbe personalizzare
 *    niente. Con il fallback di var() non c'è nessuna gara: se qualcuno
 *    definisce la variabile vale la sua, ovunque stia il suo foglio.
 *
 * 2. Ogni regola di componente è scritta come ".stackpress .stackpress__x" e
 *    non come ".stackpress__x". I temi stilano la propria area di contenuto
 *    con selettori tipo ".entry-content a" o ".entry-content h3", che valgono
 *    (0,1,1) e batterebbero una classe sola. Con due classi il plugin vale
 *    (0,2,0) e resta padrone del proprio markup, senza ricorrere a !important.
 *
 * Variabili disponibili, con il loro default:
 *   --sp-text currentColor · --sp-accent currentColor · --sp-surface transparent
 *   --sp-border-color currentColor · --sp-border-width 0px · --sp-radius 0px
 *   --sp-pad 0rem · --sp-gap 2rem · --sp-columns 3 · --sp-cover-ratio 3/2
 *   --sp-line-opacity .22 · --sp-muted-opacity .65
 *   --sp-font-title inherit · --sp-font-body inherit
 *   --sp-title-size clamp(1.05rem,1.6vw,1.35rem) · --sp-body-size .98rem
 */

.stackpress {
	color: var(--sp-text, currentColor);
	font-family: var(--sp-font-body, inherit);
}

.stackpress *,
.stackpress *::before,
.stackpress *::after {
	box-sizing: border-box;
}

/* Variante pronta: [substack_feed class="stackpress--boxed"] */
.stackpress--boxed {
	--sp-border-width: 1px;
	--sp-radius: 14px;
	--sp-pad: 1.25rem;
}

/* ---------------------------------------------------------------- griglia */

.stackpress .stackpress__grid {
	display: grid;
	grid-template-columns: repeat(var(--sp-columns, 3), minmax(0, 1fr));
	gap: var(--sp-gap, 2rem);
}

/* Le regole qui sotto possono solo abbassare il numero di colonne, mai alzarlo.
   Attenzione: .stackpress--cols-N sta sulla radice, non è un discendente. */
@media (max-width: 1024px) {

	.stackpress--cols-3 .stackpress__grid,
	.stackpress--cols-4 .stackpress__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {

	.stackpress .stackpress__grid {
		grid-template-columns: 1fr;
	}
}

/* ------------------------------------------------------------------- card */

.stackpress .stackpress__card {
	display: flex;
	min-width: 0;
}

.stackpress .stackpress__cardlink {
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
	width: 100%;
	padding: var(--sp-pad, 0rem);
	color: inherit;
	text-decoration: none;
	background: var(--sp-surface, transparent);
	border: var(--sp-border-width, 0px) solid var(--sp-border-color, currentColor);
	border-radius: var(--sp-radius, 0px);
	/* Niente overflow:hidden qui. Lo zoom della copertina lo contiene già
	   .stackpress__cover, e ritagliare anche il link significa tagliare il
	   primo glifo di ogni riga di testo che parte sul bordo: in un carattere
	   con la lettera leggermente sporgente a sinistra si vede. */
}

.stackpress .stackpress__cover {
	margin: 0;
	overflow: hidden;
	/* Raggio interno più stretto di quello della card, ma mai negativo:
	   un calc() negativo renderebbe invalida tutta la dichiarazione. */
	border-radius: max(0px, calc(var(--sp-radius, 0px) - var(--sp-pad, 0rem)));
}

.stackpress .stackpress__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: var(--sp-cover-ratio, 3 / 2);
	object-fit: cover;
	transition: transform 0.5s ease;
}

.stackpress .stackpress__cardlink:hover .stackpress__img {
	transform: scale(1.03);
}

.stackpress .stackpress__body {
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	min-width: 0;
}

.stackpress .stackpress__title {
	margin: 0;
	font-family: var(--sp-font-title, inherit);
	font-size: var(--sp-title-size, clamp(1.05rem, 1.6vw, 1.35rem));
	line-height: 1.2;
	text-wrap: balance;
}

.stackpress .stackpress__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	align-items: baseline;
	margin: 0;
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	opacity: var(--sp-muted-opacity, 0.65);
}

.stackpress .stackpress__excerpt {
	margin: 0;
	font-size: var(--sp-body-size, 0.98rem);
	line-height: 1.55;
	opacity: 0.85;
}

.stackpress .stackpress__cta {
	display: inline-flex;
	gap: 0.45rem;
	align-items: center;
	margin-top: 0.15rem;
	color: var(--sp-accent, currentColor);
	font-size: 0.8rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.stackpress .stackpress__cta::after {
	content: "";
	flex: none;
	width: 1.05em;
	height: 0.62em;
	background: currentColor;
	/* Freccia ritagliata da un blocco pieno: nessun carattere, nessuna immagine,
	   e prende da sola il colore del testo. */
	clip-path: polygon(0 42%, 68% 42%, 68% 8%, 100% 50%, 68% 92%, 68% 58%, 0 58%);
	transition: transform 0.3s ease;
}

.stackpress .stackpress__cardlink:hover .stackpress__cta::after {
	transform: translateX(4px);
}

/* --------------------------------------------------------- elenco compatto */

.stackpress .stackpress__list {
	display: flex;
	flex-direction: column;
}

.stackpress .stackpress__rowlink {
	position: relative;
	display: grid;
	grid-template-columns: minmax(6.5rem, auto) 1fr auto;
	gap: 1.5rem;
	align-items: start;
	padding: 1.15rem 0;
	color: inherit;
	text-decoration: none;
}

/* Riga di separazione con currentColor sfumato: niente colori fissi e niente
   color-mix, così funziona ovunque. */
.stackpress .stackpress__row + .stackpress__row .stackpress__rowlink::before,
.stackpress .stackpress__list .stackpress__row:first-child .stackpress__rowlink::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 1px;
	background: var(--sp-border-color, currentColor);
	opacity: var(--sp-line-opacity, 0.22);
}

.stackpress .stackpress__rowdate {
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	opacity: var(--sp-muted-opacity, 0.65);
	padding-top: 0.2rem;
}

.stackpress .stackpress__rowmain {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	min-width: 0;
}

.stackpress .stackpress__arrow {
	position: relative;
	align-self: center;
	width: 1.4rem;
	height: 1px;
	background: currentColor;
	transition: width 0.3s ease;
}

.stackpress .stackpress__arrow::after {
	content: "";
	position: absolute;
	top: -3px;
	right: 0;
	width: 7px;
	height: 7px;
	border-top: 1px solid currentColor;
	border-right: 1px solid currentColor;
	transform: rotate(45deg);
}

.stackpress .stackpress__rowlink:hover .stackpress__arrow {
	width: 2.2rem;
}

@media (max-width: 640px) {

	.stackpress .stackpress__rowlink {
		grid-template-columns: 1fr auto;
		gap: 0.5rem 1rem;
	}

	.stackpress .stackpress__rowdate {
		grid-column: 1 / -1;
		padding-top: 0;
	}
}

/* -------------------------------------------------------------- in evidenza */

.stackpress .stackpress__featured {
	margin-bottom: var(--sp-gap, 2rem);
}

.stackpress .stackpress__card--wide {
	--sp-cover-ratio: 21 / 9;
	--sp-title-size: clamp(1.6rem, 3.4vw, 2.6rem);
	--sp-body-size: 1.08rem;
}

.stackpress .stackpress__card--wide .stackpress__body {
	max-width: 60ch;
}

@media (max-width: 640px) {

	.stackpress .stackpress__card--wide {
		--sp-cover-ratio: 4 / 3;
	}
}

/* ------------------------------------------------------------------ coda */

.stackpress .stackpress__more {
	margin: var(--sp-gap, 2rem) 0 0;
}

.stackpress .stackpress__morelink {
	display: inline-flex;
	gap: 0.5rem;
	align-items: center;
	color: var(--sp-accent, currentColor);
	font-size: 0.82rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 0.15rem;
}

.stackpress .stackpress__morelink::after {
	content: "";
	flex: none;
	width: 1.05em;
	height: 0.62em;
	background: currentColor;
	/* Freccia ritagliata da un blocco pieno: nessun carattere, nessuna immagine,
	   e prende da sola il colore del testo. */
	clip-path: polygon(0 42%, 68% 42%, 68% 8%, 100% 50%, 68% 92%, 68% 58%, 0 58%);
	transition: transform 0.3s ease;
}

.stackpress .stackpress__morelink:hover::after {
	transform: translateX(4px);
}

.stackpress-notice {
	padding: 0.8rem 1rem;
	border: 1px dashed currentColor;
	border-radius: 4px;
	font-size: 0.88rem;
	opacity: 0.7;
}

/* --------------------------------------------------------------- accessibilità */

.stackpress .stackpress__cardlink:focus-visible,
.stackpress .stackpress__rowlink:focus-visible,
.stackpress .stackpress__morelink:focus-visible {
	outline: 2px solid var(--sp-accent, currentColor);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {

	.stackpress .stackpress__img,
	.stackpress .stackpress__arrow,
	.stackpress .stackpress__cta::after,
	.stackpress .stackpress__morelink::after {
		transition: none;
	}

	.stackpress .stackpress__cardlink:hover .stackpress__img {
		transform: none;
	}
}

/* ============================================================================
   Finestra di lettura (modalità popup e pannello).
   ============================================================================

   Vive dentro un <dialog> attaccato al body, quindi nel top layer: fuori dalla
   portata degli z-index e dei transform del tema. Per la stessa ragione non può
   ereditare i colori come fa l'elenco: sul body di un tema che cambia fondo
   sezione per sezione erediterebbe quello che capita, e serve invece una
   superficie di lettura stabile. I colori sono quindi espliciti, e come tutto il
   resto stanno nel fallback di var() per lasciare l'ultima parola al tema:

     --sp-reader-bg      #ffffff    fondo del foglio
     --sp-reader-text    #16181d    testo
     --sp-reader-accent  ereditato da --sp-accent, poi #16181d
     --sp-reader-width   min(46rem, 100%)
     --sp-reader-radius  14px       solo in modalità popup
*/

.stackpress-reader {
	width: min(var(--sp-reader-width, 46rem), 100%);
	max-width: 100%;
	padding: 0;
	border: 0;
	color: var(--sp-reader-text, #16181d);
	background: var(--sp-reader-bg, #ffffff);
	overscroll-behavior: contain;
}

.stackpress-reader::backdrop {
	background: rgba(10, 10, 12, 0.55);
	backdrop-filter: blur(2px);
}

.stackpress-reader *,
.stackpress-reader *::before,
.stackpress-reader *::after {
	box-sizing: border-box;
}

.stackpress-reader .stackpress-reader__inner {
	position: relative;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: clamp(1.6rem, 4vw, 3.2rem);
	-webkit-overflow-scrolling: touch;
}

/* --- popup centrato --- */

.stackpress-reader--modal {
	margin: auto;
	max-height: min(86vh, 60rem);
	border-radius: var(--sp-reader-radius, 14px);
	overflow: hidden;
}

.stackpress-reader--modal .stackpress-reader__inner {
	max-height: min(86vh, 60rem);
}

/* --- pannello laterale --- */

.stackpress-reader--panel {
	margin: 0 0 0 auto;
	height: 100%;
	max-height: 100%;
	border-radius: 0;
}

.stackpress-reader--panel .stackpress-reader__inner {
	height: 100%;
}

/* --- chiusura --- */

.stackpress-reader .stackpress-reader__close {
	position: sticky;
	top: 0;
	float: right;
	width: 2.4rem;
	height: 2.4rem;
	margin: -0.5rem -0.5rem 0 1rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	cursor: pointer;
	z-index: 2;
}

.stackpress-reader .stackpress-reader__close::before,
.stackpress-reader .stackpress-reader__close::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1.05rem;
	height: 1px;
	background: currentColor;
}

.stackpress-reader .stackpress-reader__close::before {
	transform: translate(-50%, -50%) rotate(45deg);
}

.stackpress-reader .stackpress-reader__close::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

.stackpress-reader .stackpress-reader__close:hover {
	background: rgba(128, 128, 128, 0.16);
}

.stackpress-reader .stackpress-reader__close:focus-visible {
	outline: 2px solid var(--sp-reader-accent, var(--sp-accent, #16181d));
	outline-offset: 2px;
}

/* --- testata --- */

.stackpress-reader .stackpress-reader__meta {
	margin: 0 0 0.6rem;
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	opacity: 0.6;
}

.stackpress-reader .stackpress-reader__title {
	margin: 0 0 1.6rem;
	font-family: var(--sp-font-title, inherit);
	font-size: clamp(1.7rem, 3.4vw, 2.5rem);
	line-height: 1.15;
	text-wrap: balance;
}

/* --- corpo dell'articolo ---
   Il testo arriva da Substack e non passa dagli stili del contenuto del tema,
   perché il dialog sta fuori da quel contenitore: la tipografia va data qui. */

.stackpress-reader .stackpress-reader__content {
	font-size: 1.05rem;
	line-height: 1.68;
	max-width: 62ch;
}

.stackpress-reader .stackpress-reader__content > * + * {
	margin-top: 1.15em;
}

.stackpress-reader .stackpress-reader__content p,
.stackpress-reader .stackpress-reader__content ul,
.stackpress-reader .stackpress-reader__content ol,
.stackpress-reader .stackpress-reader__content blockquote,
.stackpress-reader .stackpress-reader__content figure {
	margin: 0;
}

.stackpress-reader .stackpress-reader__content h1,
.stackpress-reader .stackpress-reader__content h2,
.stackpress-reader .stackpress-reader__content h3,
.stackpress-reader .stackpress-reader__content h4 {
	margin: 2em 0 0;
	font-family: var(--sp-font-title, inherit);
	font-size: 1.25em;
	line-height: 1.25;
}

.stackpress-reader .stackpress-reader__content a {
	color: var(--sp-reader-accent, var(--sp-accent, #16181d));
	text-decoration: underline;
	text-underline-offset: 3px;
}

.stackpress-reader .stackpress-reader__content img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 6px;
}

.stackpress-reader .stackpress-reader__content figure {
	margin: 1.8em 0;
}

.stackpress-reader .stackpress-reader__content figcaption {
	margin-top: 0.6rem;
	font-size: 0.85rem;
	opacity: 0.65;
}

.stackpress-reader .stackpress-reader__content blockquote {
	padding-left: 1.1rem;
	border-left: 2px solid currentColor;
	opacity: 0.85;
}

.stackpress-reader .stackpress-reader__content ul,
.stackpress-reader .stackpress-reader__content ol {
	padding-left: 1.3rem;
}

.stackpress-reader .stackpress-reader__content li + li {
	margin-top: 0.4em;
}

/* --- rimando all'originale --- */

.stackpress-reader .stackpress-reader__origin {
	margin: 2.6rem 0 0;
	padding-top: 1.4rem;
	border-top: 1px solid currentColor;
	border-color: color-mix(in srgb, currentColor 22%, transparent);
}

.stackpress-reader .stackpress-reader__origin a {
	display: inline-flex;
	gap: 0.5rem;
	align-items: center;
	color: var(--sp-reader-accent, var(--sp-accent, #16181d));
	font-size: 0.82rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 0.15rem;
}

.stackpress-reader .stackpress-reader__origin a::after {
	content: "";
	flex: none;
	width: 1.05em;
	height: 0.62em;
	background: currentColor;
	/* Freccia ritagliata da un blocco pieno: nessun carattere, nessuna immagine,
	   e prende da sola il colore del testo. */
	clip-path: polygon(0 42%, 68% 42%, 68% 8%, 100% 50%, 68% 92%, 68% 58%, 0 58%);
	transform: rotate(-45deg);
}

/* --- caricamento --- */

.stackpress-reader.is-loading .stackpress-reader__title {
	opacity: 0.45;
}

/* Il tema può fermare qui il proprio scroll smooth, ma per i temi normali
   basta bloccare quello nativo. */
html.stackpress-reading {
	overflow: hidden;
}

/* --- entrata --- */

@media (prefers-reduced-motion: no-preference) {

	.stackpress-reader--modal[open] {
		animation: stackpress-reader-in 0.28s cubic-bezier(0.22, 1, 0.36, 1);
	}

	.stackpress-reader--panel[open] {
		animation: stackpress-reader-slide 0.32s cubic-bezier(0.22, 1, 0.36, 1);
	}
}

@keyframes stackpress-reader-in {

	from {
		opacity: 0;
		transform: translateY(12px) scale(0.985);
	}
}

@keyframes stackpress-reader-slide {

	from {
		transform: translateX(100%);
	}
}