/* =========================================================
   SARA ARCHIVE: archivio + singolo
   --u = 1px sul frame di riferimento (desktop 1440, mobile 428)
   ========================================================= */

.sa-scope {
	--u: calc(clamp(1100px, 100vw, 1920px) / 1440);
	--sa-pad: calc(50 * var(--u));
	--sa-bg: #FCF9F2;
	--sa-red: #CF2200;
	--sa-display: "Boldonse", "Arial Black", sans-serif;
	--sa-serif: "Aujournuit Condensed", "Times New Roman", serif;
	--sa-mono: "JetBrains Mono", ui-monospace, monospace;
	--sa-sans: "Cabinet Grotesk", system-ui, Arial, sans-serif;
	background: var(--sa-bg);
	color: var(--sa-red);
	padding: 0 !important; /* annulla il padding root di Twenty Twenty-Four */
}
/* colore pagina singola: rosso con testo bianco */
.sa-scope.sa-tema-rosso { --sa-bg: #CF2200; --sa-red: #FCF9F2; }

.sa-scope a { color: inherit; text-decoration: none; }

/* ===== ARCHIVIO ===== */
.sa-archive {
	display: grid;
	grid-template-columns: calc(450 * var(--u)) 1fr;
	padding: var(--sa-pad);
}
.sa-side { align-self: start; }

.sa-logo { margin: 0; font: 400 calc(30.53 * var(--u))/1 var(--sa-display); }
.sa-logo strong { font-weight: 400; }
.sa-logo em { font-family: var(--sa-serif); font-style: normal; font-weight: 400; }
/* logo: file SVG (assets/img/logo-sara.svg) usato come maschera, quindi prende il colore della pagina (rosso su crema, crema su rosso) */
.sa-scope .sa-logo { font-size: 0 !important; line-height: 0 !important; }
.sa-scope .sa-logo a { display: block; font-size: 0 !important; }
.sa-scope .sa-logo:not(:has(a))::after, .sa-scope .sa-logo a::after {
	content: ""; display: block; width: calc(290 * var(--u)); max-width: 100%; aspect-ratio: 290 / 38; background: currentColor;
	-webkit-mask: url("../img/logo-sara.svg") no-repeat left center / contain; mask: url("../img/logo-sara.svg") no-repeat left center / contain;
}
.sa-pill { margin: calc(25 * var(--u)) 0 0; }
.sa-pill a {
	display: inline-block;
	border: 1px solid var(--sa-red); border-radius: 999px;
	padding: calc(10 * var(--u)) calc(15 * var(--u));
	font: 400 calc(16 * var(--u))/1.3 var(--sa-mono);
}
.sa-archive .sa-logo em { font-size: 1.735em; } /* sara: 52.96 su 30.53 */
.sa-archive .sa-pill a { width: calc(215 * var(--u)); box-sizing: border-box; text-align: center; }
@media (min-width: 782px) {
	.sa-title a { font-size: .55em; } /* officine: 22 su 40 */
}

/* timeline statica */
.sa-timeline {
	display: flex; flex-direction: column;
	gap: calc(186 * var(--u)); margin-top: calc(165 * var(--u));
	font: 400 calc(16 * var(--u))/1 var(--sa-mono);
}
.sa-timeline span { width: calc(65 * var(--u)); }
.sa-timeline span:nth-child(2) { margin-left: calc(225 * var(--u)); }
.sa-timeline span:nth-child(3) { margin-left: calc(150 * var(--u)); }
.sa-timeline span:nth-child(4) { margin-left: calc(300 * var(--u)); text-align: right; }

/* lista progetti */
.sa-list .wp-block-post-template {
	display: grid; row-gap: calc(50 * var(--u));
	list-style: none; margin: 0; padding: 0;
}
.sa-item { position: relative; display: flex; align-items: stretch; gap: calc(10 * var(--u)); transition: opacity .3s ease; }
.sa-thumb { flex: none; width: calc(140 * var(--u)); height: calc(140 * var(--u)); margin: 0; overflow: hidden; }
.sa-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }

.sa-item .sa-text { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; }

.sa-item .sa-title { display: flex; align-items: baseline; gap: .15em; font-size: calc(40 * var(--u)); line-height: 1; }
.sa-title > * { margin: 0; font: inherit; line-height: 1; }
.sa-title a { font-family: var(--sa-display); font-weight: 400; }
.sa-title .sa-serif { font-family: var(--sa-serif); font-weight: 400; }
.sa-title a::after { content: ""; position: absolute; inset: 0; } /* tutta la riga cliccabile */

.sa-item .sa-meta {
	display: grid; grid-template-columns: calc(300 * var(--u)) auto;
	font: 400 calc(20 * var(--u))/1 var(--sa-mono); text-transform: uppercase;
}
.sa-meta p { margin: 0; }
.sa-servizi { margin: 0; font: 700 calc(20 * var(--u))/1.25 var(--sa-sans); text-transform: uppercase; }

/* hover: solo dispositivi con mouse */
@media (hover: hover) {
	.sa-list:has(.sa-item:hover) .sa-item:not(:hover),
	.sa-list:has(.sa-item:focus-within) .sa-item:not(:focus-within) { opacity: .3; }
	.sa-item:hover .sa-thumb img,
	.sa-item:focus-within .sa-thumb img { transform: scale(1.06); }
}
.sa-item:focus-within { outline: 1px solid var(--sa-red); outline-offset: calc(12 * var(--u)); }
@media (prefers-reduced-motion: reduce) {
	.sa-item, .sa-thumb img { transition: none !important; transform: none !important; }
}

/* ===== ARCHIVIO: MOBILE (frame 428) ===== */
@media (max-width: 781px) {
	.sa-scope {
		--u: calc(clamp(320px, 100vw, 520px) / 428);
		--sa-pad: calc(20 * var(--u));
	}
	.sa-archive { grid-template-columns: 1fr; padding: calc(60 * var(--u)) var(--sa-pad) calc(20 * var(--u)); }

	/* riordino: logo, pill, lista, timeline */
	.sa-side { display: contents; }
	.sa-logo { order: 1; }
	.sa-pill { order: 2; margin: calc(25 * var(--u)) 0 calc(23 * var(--u)); }
	.sa-list { order: 3; }
	.sa-timeline { order: 4; gap: calc(11 * var(--u)); margin-top: calc(50 * var(--u)); }
	.sa-timeline span:nth-child(2) { margin-left: calc(252 * var(--u)); }
	.sa-timeline span:nth-child(3) { margin-left: calc(103 * var(--u)); }
	.sa-timeline span:nth-child(4) { margin-left: calc(323 * var(--u)); }

	.sa-list .wp-block-post-template { row-gap: calc(25 * var(--u)); }
	.sa-item { gap: calc(10 * var(--u)); }
	.sa-thumb { width: calc(93 * var(--u)); height: calc(93 * var(--u)); }
	.sa-item .sa-title { font-size: calc(28 * var(--u)); }
	.sa-title a { font-size: .5714em; } /* officine: 16 su 28 */
	.sa-item .sa-meta { grid-template-columns: 1fr auto; font-size: calc(16 * var(--u)); }
	.sa-servizi { font-size: calc(12 * var(--u)); line-height: 1.25; }
}

/* =========================================================
   SINGOLO PROGETTO
   ========================================================= */
@media (min-width: 782px) {
	.single-saraarchive { --u: calc(clamp(1100px, 100vw, 1920px) / 1440); --sa-pad: calc(50 * var(--u)); }
}

.ss-page { --ss-r: calc(85 * var(--u)); display: grid; color: var(--sa-red); }
.ss-page > *, .ss-content > * { margin: 0; }
.ss-content { display: contents; }
.ss-logo, .ss-title, .ss-meta, .ss-servizi, .ss-desc, .ss-related, .ss-foot,
.ss-content > :not(.ss-desc) { padding-inline: var(--sa-pad); }
.ss-title, .ss-meta, .ss-servizi, .ss-desc, .ss-logo { padding-right: var(--ss-r); }

.ss-logo { font-size: calc(30.53 * var(--u)); padding-top: var(--sa-pad); }
.ss-logo em { font-size: 1.735em; } /* sara: 52.96 su 30.53 */

.ss-cover { overflow: hidden; }
.ss-cover img { width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; }

.ss-title { display: flex; flex-wrap: wrap !important; align-items: baseline; gap: 0 .09em; font-size: calc(70 * var(--u)); line-height: 1; }
.ss-title > * { margin: 0; font: inherit; line-height: 1; }
.ss-title .wp-block-post-title { font-family: var(--sa-display); font-weight: 400; color: inherit; font-size: .6em; } /* officine: 42 su 70 */
.ss-title .ss-serif { font-family: var(--sa-serif); font-weight: 400; }

.ss-meta { display: grid; grid-template-columns: 1fr auto; font: 400 calc(20 * var(--u))/1 var(--sa-mono); text-transform: uppercase; }
.ss-meta p { margin: 0; }
.ss-servizi { font: 700 calc(20 * var(--u))/1.25 var(--sa-sans); text-transform: uppercase; }

.ss-desc { font: 400 calc(16 * var(--u))/1.4 var(--sa-mono); }
.ss-desc p { margin: 0 0 calc(22.4 * var(--u)); }
/* parole evidenziate: Boldonse 13 su 16 */
.ss-desc strong, .sa-b strong { font: 400 .8125em/1 var(--sa-display); letter-spacing: 0; }

.ss-gallery.wp-block-gallery { --wp--style--unstable-gallery-gap: calc(5 * var(--u)); gap: calc(5 * var(--u)); }
.ss-content img { border-radius: calc(30 * var(--u)); }

.ss-related-label { font: 400 calc(16 * var(--u))/1 var(--sa-mono); opacity: .7; margin-bottom: calc(46 * var(--u)) !important; }
.ss-foot .sa-pill { margin: 0; }
.ss-foot .sa-pill a { width: calc(215 * var(--u)); box-sizing: border-box; text-align: center; font-size: calc(16 * var(--u)); }

/* singolo: desktop (frame 1440) */
@media (min-width: 782px) {
	.ss-page { grid-template-columns: calc(650 * var(--u)) 1fr; grid-template-rows: repeat(5, auto) 1fr; } /* l'ultima riga assorbe l'altezza della copertina, così i testi a sinistra restano compatti */
	.ss-logo { grid-column: 1; grid-row: 1; }
	.ss-title { grid-column: 1; grid-row: 2; margin-top: calc(75 * var(--u)); }
	.ss-meta { grid-column: 1; grid-row: 3; margin-top: calc(50 * var(--u)); grid-template-columns: calc(440 * var(--u)) calc(65 * var(--u)); column-gap: calc(10 * var(--u)); }
	.ss-meta p:last-child { text-align: right; }
	.ss-servizi { grid-column: 1; grid-row: 4; margin-top: calc(25 * var(--u)); }
	.ss-desc { grid-column: 1; grid-row: 5; margin-top: calc(50 * var(--u)) !important; }
	.ss-cover { grid-column: 2; grid-row: 1 / 7; width: calc(790 * var(--u)); height: calc(790 * var(--u)); border-radius: 0 0 0 calc(80 * var(--u)); }
	.ss-page .ss-cover { margin: 0; justify-self: end; align-self: start; overflow: hidden; }
	.ss-page .ss-cover, .ss-page .ss-cover img { border-radius: 0 0 0 calc(80 * var(--u)) !important; } /* solo in basso a sinistra, il resto a filo dei bordi */
	.ss-content > :not(.ss-desc) { grid-column: 1 / -1; }

	.ss-related { grid-column: 1 / -1; padding-left: calc(500 * var(--u)); margin-top: calc(100 * var(--u)); }
	.ss-foot { grid-column: 1 / -1; margin-top: calc(100 * var(--u)); padding-bottom: calc(46 * var(--u)); }
	.ss-foot .sa-timeline { margin-top: calc(40 * var(--u)); gap: calc(11 * var(--u)); font-size: calc(16 * var(--u)); }
	.ss-foot .sa-timeline span { width: calc(225 * var(--u)); }
	.ss-foot .sa-timeline span:nth-child(2) { margin-left: calc(871 * var(--u)); }
	.ss-foot .sa-timeline span:nth-child(3) { margin-left: calc(355 * var(--u)); }
	.ss-foot .sa-timeline span:nth-child(4) { margin-left: calc(1115 * var(--u)); text-align: right; }
}

/* singolo: mobile (frame 428) */
@media (max-width: 781px) {
	.ss-page { --ss-r: var(--sa-pad); grid-template-columns: 1fr; }
	.ss-logo { order: 0; padding-top: calc(60 * var(--u)); }
	.ss-cover { margin: calc(24 * var(--u)) var(--sa-pad) 0; border-radius: calc(40 * var(--u)); }
	.ss-title { font-size: calc(70 * var(--u)); margin-top: calc(25 * var(--u)); }
	.ss-meta { font-size: calc(16 * var(--u)); margin-top: calc(25 * var(--u)); }
	.ss-meta p:last-child { text-align: right; }
	.ss-servizi { font-size: calc(12 * var(--u)); margin-top: calc(25 * var(--u)); }
	.ss-desc { font-size: calc(16 * var(--u)); line-height: calc(22 * var(--u)); margin-top: calc(25 * var(--u)); }
	.ss-desc p { margin-bottom: calc(22 * var(--u)); }
	.ss-related { margin-top: calc(80 * var(--u)); }
	.ss-foot { margin-top: calc(50 * var(--u)); padding-bottom: calc(46 * var(--u)); }
	.ss-foot .sa-timeline { margin-top: calc(16 * var(--u)); }
}

/* =========================================================
   BLOCCHI DEL CONTENUTO (pattern "Sara Archive")
   --b = 1px sul frame di riferimento (desktop 1440, mobile 428)
   ========================================================= */
body.single-saraarchive .sa-b {
	--b: calc(clamp(1100px, 100vw, 1920px) / 1440);
	--r: calc(68.38 * var(--b));
	grid-column: 1 / -1;
	padding: calc(75 * var(--b)) calc(50 * var(--b));
	color: var(--sa-red);
	font: 400 calc(16 * var(--b))/1.4 var(--sa-mono);
}
.sa-b { --b: calc(clamp(1100px, 100vw, 1920px) / 1440); --r: calc(68.38 * var(--b)); }
@media (max-width: 781px) { .sa-b { --b: calc(clamp(320px, 100vw, 520px) / 428); --r: calc(40 * var(--b)); } }
.sa-b > *, .sa-b p, .sa-b figure { margin: 0; }
.sa-b img { display: block; width: 100%; height: auto; object-fit: cover; border-radius: var(--r); }
.sa-b .sa-b-title, .sa-b :is(h1, h2, h3, h4, h5, h6) { margin: 0 0 calc(50 * var(--b)); color: inherit; font: 400 calc(42 * var(--b))/1 var(--sa-display); letter-spacing: normal; text-transform: none; }
.sa-b .sa-b-title strong, .sa-b :is(h1, h2, h3, h4, h5, h6) strong { font: inherit; }
.sa-serif-txt { font-family: var(--sa-serif); font-weight: 400; }
.sa-b-title .sa-serif-txt { font-size: 1.6667em; } /* 70 su 42 */

/* colonna di testo centrata (740) */
.sa-b--intro > *, .sa-b--testo > *, .sa-b--vert > p { max-width: calc(740 * var(--b)); margin-inline: auto; }

.sa-b--vert > .sa-b-img { width: calc(590 * var(--b)); max-width: 100%; margin-inline: auto; margin-bottom: calc(50 * var(--b)); }
.sa-b--vert img { aspect-ratio: 4 / 5; }

/* immagine o video 16:9 con didascalia (testo a sinistra, etichetta a destra) */
.sa-b--orizz img, .sa-b--orizz video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r); }
.sa-b--orizz .wp-block-video { margin: 0; }
.sa-b-label { text-align: right; text-transform: uppercase; font-size: calc(20 * var(--b)); line-height: 1.2; }
@media (min-width: 782px) {
	body.single-saraarchive .sa-b--lato { padding-block: calc(94 * var(--b)); }
	body.single-saraarchive .sa-b--testo { padding-block: calc(151 * var(--b)); }
	body.single-saraarchive .sa-b--vert { padding-block: calc(151 * var(--b)) calc(136 * var(--b)); }
	body.single-saraarchive .sa-b--intro { padding: calc(122 * var(--b)) calc(50 * var(--b)) calc(93 * var(--b)); }
}
@media (min-width: 782px) {
	body.single-saraarchive .sa-b--orizz { padding: calc(87 * var(--b)) calc(125 * var(--b)); }
	.sa-b--orizz { display: grid; grid-template-columns: calc(741 * var(--b)) 1fr; column-gap: calc(85 * var(--b)); row-gap: calc(50 * var(--b)); }
	.sa-b--orizz > .sa-b-img { grid-column: 1 / -1; grid-row: 1; }
	.sa-b--orizz > .sa-b-text { grid-column: 1; grid-row: 2; }
	.sa-b--orizz > .sa-b-label { grid-column: 2; grid-row: 2; }
}

.sa-b--lato.wp-block-columns { display: flex; flex-wrap: nowrap; align-items: center; column-gap: calc(85 * var(--b)); row-gap: 0; margin: 0; }
.sa-b--lato-dx.wp-block-columns { justify-content: flex-end; }
@media (min-width: 782px) {
	.sa-b--lato > .sa-b-lato-img { flex: 0 0 calc(665 * var(--b)) !important; }
	.sa-b--lato > .sa-b-lato-txt { flex: 0 0 calc(515 * var(--b)) !important; max-width: calc(515 * var(--b)); }
}
.sa-b--lato > .wp-block-column { margin: 0; min-width: 0; }
.sa-b--lato img { aspect-ratio: 665 / 440; }
.sa-b-lato-txt > *:last-child { margin-bottom: 0; }
.sa-b--lato:has(+ .sa-b--lato) { padding-bottom: calc(9 * var(--b)) !important; }
.sa-b--lato + .sa-b--lato { padding-top: calc(9 * var(--b)) !important; }

@media (min-width: 782px) { body.single-saraarchive .sa-b--tre { padding-block: calc(151 * var(--b)); } }
.sa-b--tre { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(10 * var(--b)); }
.sa-b--tre img { aspect-ratio: 1; }
.sa-b--due { display: grid; grid-template-columns: repeat(2, 1fr); gap: calc(5 * var(--b)); }
.sa-b--due img { aspect-ratio: 1; }

@media (max-width: 781px) {
	body.single-saraarchive .sa-b {
		--b: calc(clamp(320px, 100vw, 520px) / 428);
		--r: calc(40 * var(--b));
		padding: calc(60 * var(--b)) calc(20 * var(--b));
		line-height: calc(21 * var(--b));
	}
	body.single-saraarchive .sa-b--testo, body.single-saraarchive .sa-b--vert { padding-inline: calc(70 * var(--b)); }
	.sa-b--vert > .sa-b-img { width: 100%; margin-bottom: calc(56 * var(--b)); }
	.sa-b--lato.wp-block-columns { flex-direction: column; flex-wrap: nowrap !important; align-items: stretch; row-gap: calc(55 * var(--b)); }
	.sa-b--lato > .wp-block-column { flex-basis: auto !important; width: 100%; }
	.sa-b--lato > .sa-b-lato-img { order: -1; }
	.sa-b-lato-txt { max-width: none; }
	.sa-b .sa-b-title { margin-bottom: calc(35 * var(--b)); }
	.sa-b--tre { grid-template-columns: 1fr; }
	.sa-b--orizz > .sa-b-img { margin-bottom: calc(31 * var(--b)); }
	.sa-b-label { font-size: calc(16 * var(--b)); margin-bottom: calc(25 * var(--b)) !important; }
	.sa-b--lato:has(+ .sa-b--lato) { padding-bottom: calc(30 * var(--b)) !important; }
	.sa-b--lato + .sa-b--lato { padding-top: calc(30 * var(--b)) !important; }
}