/*
 * Studio Arfia — progetti.css · v0.1.0 · 17/08/2026
 * Archivio /progetti/: barra filtri (chip GET) + griglia card a tacca.
 */

.as-progetti__lede { margin-top: var(--as-sp-5); }

.as-progetti__filtri {
	margin-top: var(--as-sp-7);
	display: grid;
	gap: var(--as-sp-3);
	/* Il frammento #as-filtri atterra qui: aria di rispetto per l'header. */
	scroll-margin-top: calc(var(--as-header-h) + var(--as-sp-4));
}
.as-progetti__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--as-sp-2);
}
.as-progetti__grid { margin-top: var(--as-sp-7); }
.as-progetti__vuoto {
	margin-top: var(--as-sp-8);
	display: grid;
	gap: var(--as-sp-5);
}
.as-progetti__nav { margin-top: var(--as-sp-7); }
.as-progetti__nav .nav-links { display: flex; gap: var(--as-sp-4); }

/* ── IL CANTIERE (v0.24, Rami: «immersione»): /progetti/ col portfolio
   sospeso. Scena notturna a schermo intero: a sinistra titolo, testo e CTA;
   a destra la ruota dei mestieri (solo i nomi dei settori, regola 0). ── */
.as-cantiere { min-height: 100svh; display: flex; align-items: center; padding-bottom: var(--as-sp-7); }
.as-cantiere > .as-container { width: 100%; }
.as-cantiere__griglia { display: grid; gap: var(--as-sp-7); }
@media (min-width: 1000px) {
	.as-cantiere__griglia { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--as-sp-8); align-items: center; }
}
.as-cantiere__testa { min-width: 0; }
/* v0.38 (29/09, Rami: H1 al massimo 88px; DIREZIONE-MOBILE): il titolo era in
   .as-display-lg, 130px a 1440 e 115 a 1280. Con la copy delle keyword («Portfolio
   di siti web e gestionali, per settore.») andava su quattro righe da 130 e a
   1280×720 la CTA finiva sotto la piega. Taglia sua: l'H1 delle altre pagine
   (display-md: 40px da telefono, fino a 88) e, nelle due colonne del desktop dove
   il titolo ha mezza pagina, un gradino sotto, così tre righe e la CTA stanno
   nello schermo anche a 1280×720. */
.as-cantiere__titolo { margin: 0; font-size: var(--as-type-display-md); }
@media (min-width: 1000px) {
	.as-cantiere__titolo { font-size: clamp(52px, 5vw, 76px); }
}
.as-cantiere__lede { margin-top: var(--as-sp-5); max-width: 38ch; color: var(--as-muted); }
.as-cantiere__cta { margin-top: var(--as-sp-6); }
.as-cantiere__ruota { margin: 0; min-width: 0; }
.as-cantiere__didascalia { margin-top: var(--as-sp-4); color: var(--as-muted); }

/* La RUOTA dei mestieri è in base.css (v0.31: la usa anche la home). */

/* ── Da telefono (v0.38, DIREZIONE-MOBILE) ─────────────────────────────────
   · la scena resta un'apertura piena ma parte dall'alto: titolo 32px sotto la
     barra (regola della prima sezione), niente contenuto centrato in un vuoto;
   · la ruota: le voci ai bordi del cilindro, schiacciate fino a 10px d'altezza,
     sembravano un difetto di stampa. Una sfumatura sopra e sotto le fa sparire
     nel buio: restano leggibili la voce davanti e le due accanto;
   · la didascalia sale a 15px (era un'etichetta da 13 sotto un titolo da 40). */
@media (max-width: 999px) {
	.as-cantiere__didascalia { font-size: 15px; }
}
@media (max-width: 699px) {
	.as-cantiere { align-items: flex-start; padding-bottom: var(--as-sect); }
	.as-cantiere__griglia { row-gap: var(--as-sp-7); }
	.as-cantiere .as-ruota--viva .as-ruota {
		-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 30%, #000 70%, transparent 100%);
		mask-image: linear-gradient(to bottom, transparent 0, #000 30%, #000 70%, transparent 100%);
	}
}

/* Una CTA sola verso /contatti/: col portfolio sospeso la pagina ha già la sua
   («Conosciamoci» nel cantiere); la banda-invito del footer, 540px più giù, era
   lo stesso bottone verso la stessa pagina. Stessa regola delle pagine elencate
   in base.css (.as-footer__cta); qui perché nasce col cantiere (quando torna il
   portfolio la banda torna da sola). Scopata sul namespace: questo foglio resta
   in pagina dopo un cambio senza ricarica. */
.as-main[data-barba-namespace="progetti"]:has(.as-cantiere) ~ .as-footer .as-footer__cta { display: none; }

/* ══ v0.122 (07/11/2026) · IL PORTFOLIO SU RICHIESTA ══════════════════════════════════════════════════════════════
   Rami: «migliorala nettamente; non si guarda insieme su appuntamento: si richiede». Tre tempi (archive-arfia_project.php):
   l'apertura al buio con la ruota su una luce colorata, «Come ricevi il portfolio» (site/progetti-regia, chiara, stile
   suo), il modulo al buio in un pannello di vetro. Regola 0: solo i NOMI dei settori, nessun lavoro cliente. */

/* ── 1 · L'apertura ── */
.as-pf-apre {
	position: relative;
	z-index: 1;
	isolation: isolate;
	overflow: clip;
	--as-goccia2: 0px;
	/* la pancia in fondo, mentre sale la sezione chiara (motion.js, data-as-contro-goccia) */
	border-radius: 50% 50% 50% 50% / 0 0 var(--as-goccia2) var(--as-goccia2);
}
.as-pf-apre > .as-container { position: relative; z-index: 1; }
/* La luce: tre macchie colorate, ferme e larghe (niente mouse, niente filtri costosi su iPhone), che respirano piano. */
.as-pf-luce { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.as-pf-luce i { position: absolute; display: block; border-radius: 50%; will-change: transform; }
.as-pf-luce .is-1 { width: 62vmax; height: 62vmax; right: -14vmax; top: -10vmax; background: radial-gradient(closest-side, rgba(214, 64, 168, .30), rgba(214, 64, 168, 0)); animation: as-pf-respiro 16s ease-in-out infinite alternate; }
.as-pf-luce .is-2 { width: 52vmax; height: 52vmax; right: 12vmax; bottom: -22vmax; background: radial-gradient(closest-side, rgba(120, 84, 255, .26), rgba(120, 84, 255, 0)); animation: as-pf-respiro 19s ease-in-out -6s infinite alternate-reverse; }
.as-pf-luce .is-3 { width: 40vmax; height: 40vmax; right: -12vmax; bottom: -8vmax; background: radial-gradient(closest-side, rgba(64, 132, 255, .24), rgba(64, 132, 255, 0)); animation: as-pf-respiro 22s ease-in-out -11s infinite alternate; }
@keyframes as-pf-respiro { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-3vmax, 2vmax, 0) scale(1.08); } }
/* La ruota più grande e al centro della sua colonna; la voce davanti prende un alone della stessa luce. */
.as-pf-ruota { position: relative; }
.as-pf-ruota.as-ruota--viva .as-ruota { font-size: clamp(44px, 6vw, 96px); }
.as-pf-ruota.as-ruota--viva .as-ruota__voce { text-shadow: 0 0 calc(var(--as-fronte, 0) * 42px) rgba(232, 96, 196, calc(var(--as-fronte, 0) * .45)); }
.as-pf-apre .as-cantiere__cta { scroll-margin-top: 0; }
@media (max-width: 999px) {
	/* da telefono e tablet la luce sta sotto il testo, dove gira la ruota, e la ruota torna al centro (come in home) */
	.as-pf-luce .is-1 { right: -30vmax; top: 30%; }
	.as-pf-luce .is-2 { right: -10vmax; bottom: -30vmax; }
	.as-pf-luce .is-3 { right: auto; left: -24vmax; bottom: 0; }
	.as-pf-ruota .as-ruota, .as-pf-ruota.as-ruota--viva .as-ruota__voce, .as-pf-ruota .as-ruota__voce { text-align: center; transform-origin: 50% 50%; }
	.as-pf-ruota.as-ruota--viva .as-ruota { font-size: clamp(40px, 11vw, 64px); }
}

/* ── 3 · Il modulo ── */
.as-pf-modulo {
	position: relative;
	overflow: clip;
	isolation: isolate;
	scroll-margin-top: 0;
	--as-goccia: 0px;
	/* entra a cupola dalla sezione chiara (motion.js, data-as-goccia) */
	border-radius: 50% 50% 0 0 / var(--as-goccia) var(--as-goccia) 0 0;
	padding-block: clamp(96px, 12vw, 176px) clamp(96px, 11vw, 160px);
}
.as-pf-modulo > .as-container { position: relative; z-index: 1; }
.as-pf-luce.is-giu .is-1 { width: 56vmax; height: 56vmax; left: -16vmax; right: auto; top: auto; bottom: -26vmax; background: radial-gradient(closest-side, rgba(120, 84, 255, .22), rgba(120, 84, 255, 0)); }
.as-pf-luce.is-giu .is-2 { width: 44vmax; height: 44vmax; right: -14vmax; bottom: auto; top: -12vmax; background: radial-gradient(closest-side, rgba(214, 64, 168, .2), rgba(214, 64, 168, 0)); }
.as-pf-modulo__griglia { display: grid; gap: clamp(32px, 4vw, 56px); }
@media (min-width: 1000px) {
	.as-pf-modulo__griglia { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); column-gap: var(--as-sp-8); align-items: center; }
}
.as-pf-modulo__titolo { margin: 0; max-width: 11ch; line-height: 1; letter-spacing: -.03em; }
.as-pf-modulo__titolo em { font-style: normal; color: var(--as-grigio-testo-inv, rgba(255, 255, 255, .55)); }
/* Il pannello di vetro scuro: la firma squircle, un filo di luce sul bordo. */
.as-pf-modulo__pannello {
	position: relative;
	z-index: 2; /* il popup dei settori resta sopra tutto (Safari: Errori 0.52.4 della home) */
	padding: clamp(24px, 3vw, 44px);
	border-radius: calc(28px * var(--as-brm, 1));
	background: linear-gradient(160deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .025));
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 40px 90px -50px rgba(0, 0, 0, .8);
}
@supports (corner-shape: squircle) { .as-pf-modulo__pannello { corner-shape: squircle; } }
/* finché il popup dei settori è aperto la sezione non ritaglia (come in home) */
.as-pf-modulo:has(.as-tendina.is-aperta) { overflow: visible; }

/* Il modulo breve: lo stesso della home (site/richiesta-portfolio); il suo stile in home.css non è caricato qui. */
.as-pf-modulo .as-richiesta { gap: var(--as-sp-5); max-width: none; }
.as-pf-modulo .as-richiesta[hidden] { display: none !important; }
.as-pf-modulo .as-richiesta__domanda { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: var(--as-sp-3); font-size: var(--as-type-body); letter-spacing: 0; color: var(--as-ink); }
.as-pf-modulo .as-richiesta__nota { font-size: var(--as-type-meta); letter-spacing: .04em; color: var(--as-muted); }
.as-pf-modulo .as-richiesta__fondo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--as-sp-4) var(--as-sp-5); }
.as-pf-modulo .as-richiesta__fondo .as-form__consenso { flex: 1 1 220px; }
.as-pf-modulo .as-richiesta__grazie { display: flex; align-items: center; gap: var(--as-sp-4); padding: var(--as-sp-5) 0; }
.as-pf-modulo .as-richiesta__grazie[hidden] { display: none; }
.as-pf-modulo .as-richiesta__spunta { flex: 0 0 auto; width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--as-arancio); }
.as-pf-modulo .as-richiesta__spunta svg { width: 26px; height: 26px; fill: none; stroke: var(--as-carbone); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.as-pf-modulo .as-richiesta__spunta path { stroke-dasharray: 20; stroke-dashoffset: 0; }
.as-pf-modulo .as-richiesta__grazie-testo { margin: 0; font-size: clamp(20px, 1.7vw, 26px); line-height: 1.35; letter-spacing: -.01em; color: var(--as-ink); }

@media (max-width: 699px) {
	.as-pf-modulo { padding-block: 88px 96px; }
	.as-pf-modulo__titolo { font-size: var(--as-type-display-sm); }
	.as-pf-modulo__pannello { padding: 22px 18px; border-radius: calc(22px * var(--as-brm, 1)); }
	.as-pf-modulo .as-richiesta { gap: 20px; }
	.as-pf-modulo .as-richiesta__domanda { margin-bottom: 14px; }
	.as-pf-modulo .as-richiesta__fondo { display: grid; justify-content: stretch; align-items: stretch; gap: 16px; }
	.as-pf-modulo .as-richiesta__fondo .as-form__bottone .as-btn { width: 100%; }
	.as-pf-modulo .as-richiesta .as-form__check { align-items: center; min-height: 44px; font-size: 15px; line-height: 1.4; }
	.as-pf-modulo .as-richiesta .as-form__check input { width: 24px; height: 24px; margin: 0; }
	.as-pf-modulo .as-richiesta .as-form__check .as-link { display: inline-block; padding-block: 12px; margin-block: -12px; }
	/* v0.122.1 (Rami, 07/11, dal telefono: «la finestra si apre in su, dovrebbe aprirsi in basso»): il popup dei settori si apre
	   sotto il bottone, come da computer (la regola di base.css). */
}

/* v0.122.1 (Rami, 07/11, dal telefono): nell'apertura titolo e sottotitolo centrati, e niente «Richiedi il portfolio» (il modulo
   arriva scorrendo). */
@media (max-width: 699px) {
	.as-pf-apre .as-cantiere__testa { text-align: center; }
	.as-pf-apre .as-cantiere__titolo, .as-pf-apre .as-cantiere__lede { margin-inline: auto; }
	.as-pf-apre .as-cantiere__cta { display: none; }
}