/* ─── Reset wrapper GeneratePress ────────────────────────────────────────── */

body.single-post {
	padding-top: 0;
}

body.single-post .site-content {
	padding: 0;
	max-width: 100%;
	width: 100%;
}

.story-main {
	width: 100%;
}

/* ─── Hero ───────────────────────────────────────────────────────────────── */

.story-hero {
	width: 100%;
	overflow: hidden;
}

.story-hero-img {
	width: 100%;
	height: 80vh;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* ─── Titolo ─────────────────────────────────────────────────────────────── */

.story-header {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 80px 240px 24px 24px;
}

.story-title {
	font-family: var(--font-heading);
	font-size: clamp(2rem, 5vw, 3.5rem);
	font-weight: 100;
	color: var(--color-text);
	line-height: 1.1;
	letter-spacing: 0.02em;
	margin: 0;
}

/* ─── Contenuto ──────────────────────────────────────────────────────────── */

.story-content {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 24px 240px 72px 24px;
	line-height: 1.8;
	display: flow-root; /* contiene i float: un'immagine flottata in fondo
	                       al testo non sporge mai sui blocchi successivi */
}

.story-content p {
	margin: 0 0 1.5em;
}

.story-content p > em:only-child {
	font-size: var(--text-xs);
	color: var(--color-text-muted);
}

.story-content h2 { margin-top: 2.5em; font-size: clamp(1.4rem, 3vw, 2rem); }
.story-content h3 { margin-top: 2em;   font-size: clamp(1.1rem, 2.5vw, 1.5rem); }
.story-content h4 { margin-top: 1.5em; }

/* Blocco Immagine */
.story-content .wp-block-image {
	margin: 2.5em 0;
}
.story-content .wp-block-image img {
	border-radius: 0;
	display: block;
	max-width: 100%;
	border: 10px solid var(--color-gateway-bg); /* bordo antracite, tono su tono */
}
.story-content .wp-block-image figcaption {
	color: var(--color-text-muted);
	font-size: 0.85rem;
	margin-top: 8px;
	text-align: center;
}

/* Immagine full-width — esce dal contenitore */
.story-content .wp-block-image.alignfull {
	width: 100vw;
	margin-left: calc(-50vw + 50%);
	max-width: 100vw;
}
.story-content .wp-block-image.alignfull img {
	width: 100%;
	max-height: 70vh;
	object-fit: cover;
}

/* Immagine wide */
.story-content .wp-block-image.alignwide {
	max-width: min(1400px, 100vw);
	margin-left: auto;
	margin-right: auto;
}

/* Immagini nel testo — da sopra i 900px stanno nel flusso, larghe il 70% della
   colonna e centrate. Niente float: la misura della riga resta costante.
   Sotto i 900px valgono le regole della media query, a tutta larghezza.
   Stesso impianto delle schede (css/scheda.css): i due template vanno tenuti
   allineati. */
@media (min-width: 901px) {
	.story-content > .wp-block-image:not(.alignfull):not(.alignwide) {
		float: none;
		width: 70%;
		max-width: 70%;
		margin: 2.6em auto;
	}
}

/* Didascalie accanto all'immagine — immagine a sinistra al 70%, didascalia a
   destra in corsivo, allineata al piede della foto. Solo le immagini nel testo:
   la galleria resta a fasce piene senza didascalia. */
@media (min-width: 901px) {
	.story-content > .wp-block-image:not(.alignfull):not(.alignwide):has(figcaption) {
		display: grid;
		grid-template-columns: 70% 1fr;
		gap: 24px;
		align-items: end;
		width: 100%;
		max-width: 100%;
		margin: 2.6em 0;
	}
	.story-content > .wp-block-image:not(.alignfull):not(.alignwide):has(figcaption) img {
		width: 100%;
		height: auto;
	}
	.story-content > .wp-block-image:not(.alignfull):not(.alignwide) > figcaption {
		font-style: italic;
		text-align: left;
		margin: 0 0 6px;
		line-height: 1.6;
	}
}

/* I blocchi maggiori ripartono sotto le immagini flottanti, mai di fianco */
.story-content h2,
.story-content .wp-block-gallery,
.story-content .wp-block-separator,
.story-content .wp-block-image.alignfull,
.story-content .wp-block-image.alignwide {
	clear: both;
}

/* Galleria */
.story-content .wp-block-gallery {
	margin: 2.5em 0;
	gap: 24px !important;
}
.story-content .wp-block-gallery .wp-block-image {
	margin: 0;
}
.story-content .wp-block-gallery .wp-block-image img {
	border-radius: 0;
	object-fit: cover;
	width: 100%;
	height: 100%;
	border: 10px solid var(--color-gateway-bg); /* bordo antracite, tono su tono */
}

/* Separatore */
.story-content .wp-block-separator {
	border: none;
	border-top: 1px solid var(--color-border);
	max-width: 200px;
	margin: 5em auto 3em;
}

/* Citazione */
.story-content .wp-block-quote {
	border-left: 3px solid var(--color-accent);
	padding-left: 24px;
	margin: 2em 0;
	font-style: italic;
	color: var(--color-text-muted);
}
.story-content .wp-block-quote cite {
	font-size: 0.85rem;
	font-style: normal;
	display: block;
	margin-top: 8px;
}

/* ─── Linguette correlate (fisse, lato destro) ───────────────────────────── */

.story-tabs {
	position: fixed;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 5px;
	z-index: 500;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.4s ease;
}

.story-tabs.is-visible {
	opacity: 1;
	pointer-events: auto;
}

.story-tabs-title {
	display: block;
	width: 200px;
	font-family: var(--font-heading);
	font-size: 1.25rem;
	font-weight: 100;
	color: var(--color-accent);
	padding: 0 16px 8px 16px;
	text-align: left;
}

.story-tab-item {
	display: block;
	width: 200px;
	background: var(--color-gateway-bg);
	color: var(--color-text);
	text-decoration: none;
	font-family: var(--font-body);
	font-size: 0.8rem;
	letter-spacing: 0.04em;
	padding: 10px 16px;
	border-radius: 3px 0 0 3px;
	text-align: left;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: background 0.2s ease, color 0.2s ease;
}

.story-tab-item:hover {
	background: var(--color-surface);
	color: var(--color-accent);
}

/* ─── Responsive ─────────────────────────────────────────────────────────── */

/* Trigger nascosto su desktop */
.story-tabs-trigger {
	display: none;
}

/* ─── Mobile: pull-out dal bordo destro ──────────────────────────────────── */

@media (max-width: 900px) {

	/* Header sempre ridotto su mobile */
	body.single-post #site-header {
		height: 60px;
		background: var(--color-bg);
	}

	body.single-post #site-header .logo-full {
		opacity: 0;
		pointer-events: none;
		position: absolute;
	}

	body.single-post #site-header .logo-symbol {
		opacity: 1;
		position: static;
		pointer-events: auto;
	}

	.story-hero-img {
		height: 60vh;
	}

	.story-header {
		padding: 28px 20px 12px 20px;
	}

	.story-content {
		padding: 20px 20px 48px 20px;
	}

	/* Sotto i 900px il float rende il testo illeggibile: le immagini
	   allineate tornano blocchi a tutta larghezza come le altre */
	.story-content .wp-block-image.alignleft,
	.story-content .wp-block-image.alignright {
		float: none;
		max-width: 100%;
		margin: 2.5em 0;
	}

	/* Container 220px: parzialmente nascosto, mostra 90px di Di più + 30px delle linguette */
	.story-tabs {
		position: fixed;
		right: 0;
		top: 50%;
		width: 220px;
		transform: translateY(-50%) translateX(130px) translateZ(0);
		flex-direction: column;
		align-items: flex-end;
		gap: 5px;
		padding: 0;
		background: none;
		border: none;
		opacity: 1;
		pointer-events: auto;
		z-index: 600;
		transition: transform 0.35s ease;
		will-change: transform;
		backface-visibility: hidden;
		-webkit-backface-visibility: hidden;
	}

	/* Aperto: scivola verso il centro */
	.story-tabs.is-open {
		transform: translateY(-50%) translateX(-10px) translateZ(0);
	}

	/* "Di più": larghezza piena del container → sporge 60px rispetto alle linguette */
	.story-tabs-trigger {
		display: block;
		position: static;
		width: 220px;
		background: var(--color-gateway-bg);
		color: var(--color-accent);
		border: none;
		border-radius: 4px 0 0 4px;
		padding: 10px 14px;
		font-family: var(--font-heading);
		font-size: 1.4rem;
		line-height: 1;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
		text-align: left;
		white-space: nowrap;
		transition: background 0.2s ease;
	}

	@media (hover: hover) {
		.story-tabs-trigger:hover {
			background: var(--color-surface);
		}
	}

	.story-tabs-trigger:focus {
		outline: none;
	}

	.story-tabs-trigger:focus:not(:focus-visible) {
		background: var(--color-gateway-bg);
		color: var(--color-accent);
	}

	/* "Per approfondire" nascosto su mobile */
	.story-tabs-title {
		display: none;
	}

	/* Linguette: 160px → mostrano 30px di spicchio nello stato chiuso */
	.story-tab-item {
		display: block;
		width: 160px;
		max-width: none;
		border-radius: 3px 0 0 3px;
		text-align: left;
		padding: 10px 14px;
	}
}

@media (max-width: 600px) {
	.story-hero-img {
		height: 40vh;
	}
}

/* ─── Lightbox ────────────────────────────────────────────────────────────── */

.story-content .wp-block-image img,
.story-content .wp-block-gallery img {
	cursor: zoom-in;
}

/* ─── Nota sui marchi ─────────────────────────────────────────────────────── */
/* Allineata alla colonna di testo. Tenere identica fra scheda.css e single.css. */

.story-marchi {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 0 240px 64px 24px;
}

.story-marchi p {
	margin: 0;
	padding-top: 24px;
	border-top: 1px solid var(--color-border);
	font-size: var(--text-xs);
	line-height: 1.7;
	color: var(--color-text-muted);
}

@media (max-width: 900px) {
	.story-marchi {
		padding: 0 20px 48px 20px;
	}
}

/* ─── Sigle numeriche nel titolo ──────────────────────────────────────────── */
/* In Raleway Thin a corpo grande la «o» di «1of13» si legge come uno zero.
   Si rimpicciolisce il solo «of»: le cifre restano a piena misura, perche' in
   Raleway l'uno e' gia' minuto di suo. Il markup lo inserisce
   ffg_titolo_con_sigle() nel template.
   Tenere identica fra scheda.css e single.css. */

.story-title .sigla {
	font-size: 0.70em;
}