/* =========================================================
   ALICE PUCCI: pagina portfolio + singolo progetto
   --u = 1px sul frame di riferimento (desktop 1440, mobile 428)
   Font: Kepler Std Light (nome e titoli), Geist (etichette), Source Serif 4 (testi).
   ========================================================= */

.ap-scope {
	--u: calc(clamp(1100px, 100vw, 1920px) / 1440);
	--ap-pad: calc(50 * var(--u));
	--ap-bg: #F9F8F4;
	--ap-ink: #1E1E16;
	--ap-serif-cond: "kepler-std", "Kepler Std", "Times New Roman", serif; /* "kepler-std" = nome CSS del progetto Adobe Fonts */
	--ap-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
	--ap-sans: "Geist", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
	background: var(--ap-bg);
	color: var(--ap-ink);
	font-family: var(--ap-sans);
	padding: 0 !important; /* annulla il padding root di Twenty Twenty-Four */
}
.ap-scope a { color: inherit; text-decoration: none; }

/* ===== HERO ===== */
.ap-hero { min-height: calc(810 * var(--u)) !important; padding: calc(50 * var(--u)); color: #F9F8F4; align-items: stretch; }
.ap-hero .wp-block-cover__inner-container { display: flex; flex-direction: column; justify-content: space-between; width: 100%; }
.ap-name { margin: 0; font: 300 calc(107.66 * var(--u))/1 var(--ap-serif-cond); text-transform: uppercase; }
.ap-hello { margin-left: calc(793 * var(--u)); width: calc(547 * var(--u)); }
.ap-hello p, .ap-hello a { margin: 0; color: inherit; font: 400 calc(21 * var(--u))/calc(27.72 * var(--u)) var(--ap-serif); }
.ap-hello .ap-hello-title { margin-bottom: calc(20 * var(--u)) !important; font: 400 calc(24 * var(--u))/1.2 var(--ap-sans); text-transform: uppercase; }

/* ===== INTRO ===== */
.ap-intro {
	display: grid;
	grid-template-columns: calc(630 * var(--u)) calc(660 * var(--u));
	grid-template-areas: "photo meta" "photo bio";
	grid-template-rows: auto 1fr;
	column-gap: calc(50 * var(--u));
	padding: calc(50 * var(--u)) var(--ap-pad) 0;
}
.ap-intro-photo { grid-area: photo; align-self: start; width: 100%; margin: 0; }
.ap-intro-photo img { width: 100%; aspect-ratio: 630 / 568; object-fit: cover; }
.ap-intro-meta { grid-area: meta; display: grid; grid-template-columns: calc(113 * var(--u)) 1fr auto; }
.ap-intro-meta p { margin: 0; font: 300 calc(20 * var(--u)) var(--ap-sans); text-transform: uppercase; }
.ap-intro-bio { grid-area: bio; padding-top: calc(71 * var(--u)); }
.ap-intro-bio p { margin: 0 0 calc(27.72 * var(--u)); font: 400 calc(21 * var(--u))/calc(27.72 * var(--u)) var(--ap-serif); }

/* campi dell'intro: parentesi automatiche, nascosti se vuoti */
.ap-intro-meta p::before { content: "["; }
.ap-intro-meta p::after { content: "]"; }
.ap-intro-meta p:empty { display: none; }
.ap-intro-bio p { white-space: pre-line; }
.ap-intro-photo img:not([src]), .ap-intro-photo img[src=""] { display: none; }

/* ===== PROGETTI ===== */
.ap-projects-title { margin: calc(70 * var(--u)) 0 calc(56 * var(--u)); padding: 0 var(--ap-pad); font: 400 calc(24 * var(--u))/1.2 var(--ap-sans); text-transform: uppercase; }
.ap-grid { padding: 0 var(--ap-pad) var(--ap-pad); }
.ap-grid .wp-block-post-template { gap: calc(50 * var(--u)) calc(20 * var(--u)); }

.ap-item { position: relative; transition: opacity .3s ease; }
.ap-meta { display: grid; grid-template-columns: calc(93 * var(--u)) calc(178 * var(--u)) 1fr; font: 300 calc(20 * var(--u)) var(--ap-sans); text-transform: uppercase; }
.ap-meta p { margin: 0; }
.ap-tipo::before, .ap-cliente::before { content: "["; }
.ap-tipo::after, .ap-cliente::after { content: "]"; }
.ap-cliente { text-align: right; }
.ap-title { margin: calc(10 * var(--u)) 0 calc(10 * var(--u)); font: 300 calc(50 * var(--u))/1.05 var(--ap-serif-cond); }
.ap-title a::after { content: ""; position: absolute; inset: 0; } /* tutta la scheda cliccabile */
.ap-thumb { overflow: hidden; margin: 0; }
.ap-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }

@media (hover: hover) {
	.ap-grid:has(.ap-item:hover) .ap-item:not(:hover) { opacity: .35; }
	.ap-item:hover .ap-thumb img { transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
	.ap-item, .ap-thumb img { transition: none !important; transform: none !important; }
}

/* ===== PAGINA: MOBILE (frame 428) ===== */
@media (max-width: 781px) {
	.ap-scope { --u: calc(clamp(320px, 100vw, 520px) / 428); --ap-pad: calc(20 * var(--u)); }

	.ap-hero { min-height: calc(810 * var(--u)) !important; padding: calc(100 * var(--u)) var(--ap-pad) calc(20 * var(--u)); }
	.ap-name { font-size: calc(46.95 * var(--u)); }
	.ap-hello { margin-left: 0; width: 100%; }
	.ap-hello p, .ap-hello a { font-size: calc(16 * var(--u)); line-height: calc(21.12 * var(--u)); }
	.ap-hello .ap-hello-title { font-size: calc(20 * var(--u)); }

	.ap-intro { grid-template-columns: 1fr; grid-template-areas: "meta" "photo" "bio"; row-gap: calc(25 * var(--u)); padding-top: calc(25 * var(--u)); }
	.ap-intro-meta { display: flex; justify-content: space-between; }
	.ap-intro-meta p { font-size: calc(16 * var(--u)); }
	.ap-intro-photo { width: calc(290 * var(--u)); margin-inline: auto; }
	.ap-intro-photo img { aspect-ratio: 290 / 262; }
	.ap-intro-bio { padding-top: 0; }
	.ap-intro-bio p { font-size: calc(16 * var(--u)); line-height: calc(21.12 * var(--u)); margin-bottom: calc(21.12 * var(--u)); }

	.ap-projects-title { margin: calc(50 * var(--u)) 0 calc(25 * var(--u)); font-size: calc(20 * var(--u)); }
	.ap-grid { padding-bottom: calc(20 * var(--u)); }
	.ap-grid .wp-block-post-template { grid-template-columns: 1fr !important; row-gap: calc(25 * var(--u)); }
	.ap-meta { font-size: calc(16 * var(--u)); grid-template-columns: calc(58 * var(--u)) calc(111 * var(--u)) 1fr; }
	.ap-title { font-size: calc(40 * var(--u)); }
}

/* =========================================================
   SINGOLO PROGETTO
   ========================================================= */
.as-page {
	display: grid; grid-template-columns: calc(665 * var(--u)) calc(660 * var(--u)); column-gap: calc(15 * var(--u));
	padding: calc(50 * var(--u)) var(--ap-pad);
}
.as-page > *, .as-content > * { margin: 0; }
.as-content { display: contents; }
.as-content > * { grid-column: 1 / -1; }

.as-logo { grid-column: 1 / -1; font: 300 calc(50.88 * var(--u))/1.2 var(--ap-serif-cond); text-transform: uppercase; }
.as-title { grid-column: 1; grid-row: 2; align-self: center; margin-top: calc(25 * var(--u)); font: 300 calc(70 * var(--u))/1.2 var(--ap-serif-cond); }
.as-meta {
	grid-column: 2; grid-row: 2; align-self: center; margin-top: calc(25 * var(--u));
	display: grid; grid-template-columns: calc(93 * var(--u)) calc(178 * var(--u)) 1fr;
	font: 300 calc(20 * var(--u))/1 var(--ap-sans); text-transform: uppercase;
}
.as-meta p { margin: 0; }
.as-meta .ap-cliente { text-align: right; }

/* Galleria: foto grande (contenuta nello spazio) + miniature, costruita dallo script dal blocco Galleria */
.ag-gal-ready.wp-block-gallery { display: none !important; }
.ag-gal { grid-column: 1 / -1; margin-top: calc(40 * var(--u)); }
.ag-gal__stage { position: relative; height: calc(681 * var(--u)); }
.ag-gal__main { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .25s; }
.ag-gal__main.is-active { opacity: 1; }
.ag-gal__thumbs { list-style: none; margin: calc(40 * var(--u)) 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: calc(20 * var(--u)); }
.ag-gal__thumbs li { margin: 0; }
.ag-gal__thumb { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; opacity: .35; transition: opacity .2s; }
.ag-gal__thumb img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.ag-gal__thumb.is-active, .ag-gal__thumb:focus-visible { opacity: 1; }
@media (hover: hover) { .ag-gal__thumb:hover { opacity: 1; } }

.as-desc { grid-column: 2; margin: calc(40 * var(--u)) 0 0 !important; white-space: pre-line; font: 400 calc(21 * var(--u))/calc(27.72 * var(--u)) var(--ap-serif); }
.as-desc:empty { display: none; }

.as-related { grid-column: 1 / -1; margin-top: calc(130 * var(--u)); }
.as-related-label { font: 400 calc(24 * var(--u))/1.2 var(--ap-sans); text-transform: uppercase; margin-bottom: calc(50 * var(--u)) !important; }
.as-related .wp-block-post-template { gap: calc(50 * var(--u)) calc(20 * var(--u)); }
.as-related .ap-meta { display: flex; justify-content: space-between; font-size: calc(16 * var(--u)); }
.as-related .ap-title { font-size: calc(40 * var(--u)); }

@media (max-width: 781px) {
	.single-alicepucci { --u: calc(clamp(320px, 100vw, 520px) / 428); --ap-pad: calc(20 * var(--u)); }
	.as-page { grid-template-columns: 1fr; padding-top: calc(101 * var(--u)); }
	.as-logo { font-size: calc(34.9 * var(--u)); }
	.as-meta {
		grid-column: 1; grid-row: auto; margin-top: calc(14 * var(--u)); padding: 0;
		display: flex; justify-content: space-between; font-size: calc(16 * var(--u));
	}
	.as-meta .ap-num { display: none; }
	.as-title { grid-column: 1; grid-row: auto; margin-top: calc(10 * var(--u)); font-size: calc(50 * var(--u)); }
	.ag-gal { margin-top: calc(20 * var(--u)); }
	.ag-gal__stage { height: auto; aspect-ratio: 388 / 486; }
	.ag-gal__thumbs { grid-template-columns: repeat(4, 1fr); gap: calc(5 * var(--u)); margin-top: calc(15 * var(--u)); }
	.as-desc { grid-column: 1; margin-top: calc(30 * var(--u)) !important; font-size: calc(16 * var(--u)); line-height: calc(21.12 * var(--u)); }
	.as-related { margin-top: calc(80 * var(--u)); }
	.as-related-label { font-size: calc(20 * var(--u)); margin-bottom: calc(25 * var(--u)) !important; }
	.as-related .wp-block-post-template { grid-template-columns: repeat(2, 1fr) !important; gap: calc(25 * var(--u)) calc(5 * var(--u)); }
	.as-related .ap-meta { flex-direction: column; justify-content: flex-start; gap: calc(3 * var(--u)); line-height: normal; }
	.as-related .ap-cliente { text-align: left; }
	.as-related .ap-title { font-size: calc(24 * var(--u)); }
}

/* numerazione progressiva [01], [02]… negli elenchi (il testo fisso del template viene nascosto) */
.ap-grid .wp-block-post-template, .ag-related .wp-block-post-template { counter-reset: ap-n; }
.ap-grid .ap-item, .ag-related .ap-item { counter-increment: ap-n; }
.ap-grid .ap-num, .ag-related .ap-num { position: relative; overflow: hidden; white-space: nowrap; text-indent: -9999px; }
.ap-grid .ap-num::before, .ag-related .ap-num::before { content: "[" counter(ap-n, decimal-leading-zero) "]"; position: absolute; left: 0; top: 0; text-indent: 0; }

/* logo di Alice: file SVG (assets/img/logo-alice.svg) usato come maschera, il colore resta quello del testo */
.ap-scope .ap-name { font-size: 0 !important; line-height: 0 !important; width: calc(438 * var(--u)); max-width: 100%; aspect-ratio: 438 / 70; color: var(--ap-bg); background: currentColor;
	-webkit-mask: url("../img/logo-alice.svg") no-repeat left center / contain; mask: url("../img/logo-alice.svg") no-repeat left center / contain; }
.ap-scope .as-logo, .ap-scope .as-logo a { font-size: 0 !important; line-height: 0 !important; display: block; color: var(--ap-ink); }
.ap-scope .as-logo a::after { content: ""; display: block; width: calc(207 * var(--u)); max-width: 100%; aspect-ratio: 438 / 70; background: currentColor;
	-webkit-mask: url("../img/logo-alice.svg") no-repeat left center / contain; mask: url("../img/logo-alice.svg") no-repeat left center / contain; }
@media (max-width: 781px) {
	.ap-scope .ap-name { width: calc(191 * var(--u)); }
	.ap-scope .as-logo a::after { width: calc(142 * var(--u)); }
}

/* il logo resta a sinistra anche se il tema centra i blocchi con larghezza fissa (layout "constrained") */
.ap-scope .ap-name { margin: 0 auto 0 0 !important; align-self: flex-start; justify-self: start; }
.ap-scope .as-logo { margin-left: 0 !important; margin-right: auto !important; max-width: none !important; justify-self: start; text-align: left; }

/* above the fold: la foto in cima occupa sempre tutta l'altezza dello schermo (desktop, tablet e mobile) */
.ap-scope .ap-hero { min-height: 100vh !important; min-height: 100svh !important; }