/*
 * Componenti editoriali delle pagine (CLAUDE.md §5–6).
 * Solo ciò che il Customizer di Blocksy non gestisce: niente ombre, gradienti, icone.
 * Il ritmo lo danno i filetti da 1px e lo spazio bianco.
 */

/* Eyebrow: Plex Sans 13px, maiuscolo, spaziato, ardesia */
.pm-eyebrow {
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--pm-slate);
	margin-bottom: 1rem;
}

/* Etichette dati: date, numero episodio */
.pm-mono {
	font-family: var(--pm-font-mono);
	font-size: 13px;
	color: var(--pm-slate);
}

/* Sezioni della home separate da un filetto */
.pm-section {
	border-top: 1px solid var(--pm-rule);
	padding-block: clamp(2.5rem, 6vw, 5rem);
}

.pm-section > .wp-block-heading:first-child,
.pm-section > .pm-eyebrow:first-child {
	margin-top: 0;
}

/* Testo a misura di lettura */
.pm-measure {
	max-width: 68ch;
}

/* Hero */
.pm-hero {
	padding-block: clamp(2rem, 6vw, 5rem);
	gap: clamp(2rem, 5vw, 4rem);
}

.pm-hero h1 {
	margin-top: 0;
}

.pm-lead {
	font-size: 1.15em;
	max-width: 52ch;
}

.pm-proof {
	color: var(--pm-slate);
	font-size: 15px;
	border-top: 1px solid var(--pm-rule);
	padding-top: 1rem;
	max-width: 60ch;
}

.pm-text-link a {
	color: var(--pm-terra-text);
	font-weight: 500;
}

/* Ritratto 5:6 e segnaposto per le immagini */
.pm-portrait,
.pm-placeholder {
	aspect-ratio: 5 / 6;
	background: var(--pm-sand);
	width: 100%;
}

.pm-placeholder--wide {
	aspect-ratio: 4 / 3;
}

.pm-portrait img {
	aspect-ratio: 5 / 6;
	object-fit: cover;
	width: 100%;
	height: auto;
}

/* Pilastri numerati 01/02/03 */
.pm-pillars {
	gap: clamp(1.5rem, 4vw, 3rem);
}

.pm-pillar {
	border-top: 1px solid var(--pm-rule);
	padding-top: 1.25rem;
}

.pm-num {
	font-family: var(--pm-font-serif);
	font-size: 1.75rem; /* >= 24px: terra ammesso */
	line-height: 1;
	color: var(--pm-terra);
	margin-bottom: .75rem;
}

/* Prove: lista editoriale in serif, non griglia di loghi */
.pm-editorial-list {
	list-style: none;
	padding-left: 0;
	margin-left: 0;
}

.pm-editorial-list li {
	font-family: var(--pm-font-serif);
	font-size: clamp(1.35rem, 1vw + 1rem, 1.75rem);
	line-height: 1.3;
	padding-block: .85rem;
	border-bottom: 1px solid var(--pm-rule);
}

.pm-editorial-list li:first-child {
	border-top: 1px solid var(--pm-rule);
}

.pm-editorial-list .pm-note {
	display: block;
	font-family: var(--pm-font-sans);
	font-size: 15px;
	color: var(--pm-slate);
	margin-top: .25rem;
}

/* Geografie del Marketing: curve di livello come unico ornamento */
.pm-contours {
	position: relative;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 300' fill='none' stroke='%23B5541C' stroke-width='.8'%3E%3Cpath d='M-20 250c80-40 140-30 210-70s120-110 220-100 140 60 210 40'/%3E%3Cpath d='M-20 270c90-35 150-20 225-60s130-100 225-88 130 55 190 38'/%3E%3Cpath d='M-20 290c95-30 165-12 240-50s140-88 230-76 120 48 170 34'/%3E%3Cpath d='M40 120c30-30 80-40 120-20s40 70-10 80-130-20-110-60z'/%3E%3Cpath d='M60 118c22-20 60-26 88-12s28 48-8 56-96-14-80-44z'/%3E%3Cpath d='M82 117c14-10 36-14 54-6s16 28-6 32-56-8-48-26z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1.5rem;
	background-size: min(360px, 40%) auto;
}

@media (max-width: 781px) {
	.pm-contours {
		background-size: 55% auto;
		background-position: right .5rem;
	}
}

.pm-contours .wp-block-latest-posts__post-title {
	font-family: var(--pm-font-serif);
	font-size: 1.5rem;
	line-height: 1.3;
}

.pm-contours .wp-block-latest-posts {
	padding-left: 0;
}

.pm-contours .wp-block-latest-posts__post-date {
	font-family: var(--pm-font-mono);
	font-size: 13px;
	color: var(--pm-slate);
}

/* Now: l'unico elemento incorniciato della pagina */
.pm-now {
	border: 1px solid var(--pm-rule);
	padding: clamp(1.5rem, 4vw, 2.5rem);
}

/* Oltre il lavoro: etichette in serif sotto le immagini */
.pm-beyond-label {
	font-family: var(--pm-font-serif);
	font-size: 1.5rem;
	margin-top: .75rem;
}

.pm-beyond-label a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid var(--pm-rule);
}

.pm-beyond-label a:hover,
.pm-beyond-label a:focus-visible {
	border-bottom-color: currentColor;
}

/* Contatti e pagine interne: righe dati con filetto */
.pm-facts {
	list-style: none;
	padding-left: 0;
	margin-left: 0;
}

.pm-facts li {
	padding-block: .6rem;
	border-bottom: 1px solid var(--pm-rule);
}

.pm-facts li:first-child {
	border-top: 1px solid var(--pm-rule);
}

.pm-updated {
	font-family: var(--pm-font-mono);
	font-size: 13px;
	color: var(--pm-slate);
}

/* Selettore lingua nell'header (Blocksy Pro): testo "IT · EN · FR", niente bandiere */
.ct-language-switcher[data-type="inline"] ul.ct-language {
	column-gap: 0;
}

.ct-language-switcher .ct-language li {
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: row;
	align-items: center;
}

.ct-language-switcher .ct-language li + li::before {
	content: "·";
	margin-inline: .45em;
	color: var(--pm-slate);
}

.ct-language-switcher .ct-language a {
	padding: 0;
	margin: 0;
	color: var(--pm-slate);
	font-size: 13px;
	letter-spacing: .08em;
}

.ct-language-switcher .current-lang a {
	color: var(--pm-ink);
	font-weight: 600;
}

/* Allineamento nelle pagine: testo e liste partono dallo stesso bordo sinistro di titoli e sezioni,
 * con la misura di lettura di 68ch. Il layout "constrained" di WordPress li centrerebbe:
 * qui usiamo lo stesso calcolo che Blocksy usa per .alignleft. */
.entry-content > .pm-lead,
.entry-content > .pm-measure,
.entry-content > .pm-text-link,
.entry-content > .pm-facts {
	margin-inline-start: calc((100% - min(var(--theme-block-max-width), var(--theme-container-width-base))) / 2) !important;
	margin-inline-end: auto !important;
}

.pm-section > .pm-lead,
.pm-section > .pm-measure,
.pm-section > .pm-facts {
	margin-inline-start: 0 !important;
	margin-inline-end: auto !important;
}

.pm-facts {
	max-width: 68ch;
}

.pm-now .pm-facts {
	max-width: none;
}

/* Articoli: date in testa e box autore in fondo */
.pm-post-dates {
	margin-bottom: 2rem;
}

.pm-author-box {
	margin-top: 3.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--pm-rule);
}

.pm-author-box p {
	margin: 0 0 .5rem;
}

.pm-author-name {
	font-family: var(--pm-font-serif);
	font-size: 1.5rem;
	font-weight: 500;
}

.pm-author-credentials {
	font-size: 14px;
	color: var(--pm-slate);
}

.pm-author-bio {
	max-width: 68ch;
}

/* Wordmark nell'header e nel footer: punto cartografico a sinistra del nome (CLAUDE.md §6).
 * Cerchio r=8 con tratto 1.5 e punto r=3, in terra; il nome resta testo (Newsreader 500). */
.site-title a {
	display: inline-flex;
	align-items: center;
	gap: .45em;
}

.site-title a::before {
	content: "";
	flex: none;
	width: .62em;
	height: .62em;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='8' fill='none' stroke='%23B5541C' stroke-width='1.5'/%3E%3Ccircle cx='10' cy='10' r='3' fill='%23B5541C'/%3E%3C/svg%3E") center / contain no-repeat;
	transform: translateY(.04em);
}

/* Header sticky ridotto (Blocksy Pro, effetto "shrink"): il titolo del sito è testo,
 * quindi la riduzione automatica del logo non lo tocca. Lo riduciamo in proporzione.
 * Cambia solo dentro la riga sticky, che è fuori dal flusso: nessun CLS.
 * Selettore più specifico di quello che Blocksy genera per il logo (25px). */
.site-title {
	transition: font-size .2s ease;
}

[data-header] .ct-header [data-sticky*="yes"] [data-id="logo"] .site-title {
	--theme-font-size: 20px;
}

@media (max-width: 999.98px) {
	[data-header] .ct-header [data-sticky*="yes"] [data-id="logo"] .site-title {
		--theme-font-size: 19px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.site-title {
		transition: none;
	}
}

/* Hero: grafica a fondo trasparente al posto del ritratto, finché non c'è la foto.
 * Il formato 5:6 è fissato qui (l'SVG non ha attributi width/height nel blocco): nessun CLS. */
.pm-hero-graphic {
	margin: 0;
}

.pm-hero-graphic img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 5 / 6;
}