/* Pagina Redazione — impaginazione del template EDDY nei colori e nei caratteri di Numero Zero.
   Senza JavaScript resta l'elenco semplice (noscript) e lo slider si scorre a mano. */

/* la scheda aperta vive fuori da .nz-roster (figlia di body): le misure valgono per entrambe */
.nz-roster, .nz-ov {
	--gutter: 12px;
	--col-left: calc(max(0px, (100vw - var(--measure) - 2 * var(--margin)) / 2) + var(--margin));
	--cards-visible: 3.123; /* tre schede intere, la quarta tagliata dallo schermo */
	--card-ratio: 515 / 676;
	--fs-name: clamp(1.25rem, 1rem + 0.9vw, 1.875rem);
	--fs-row: clamp(2.5rem, 0.6rem + 6vw, 7rem);
	--fs-ov-name: clamp(3.5rem, 1rem + 8.4vw, 11rem);
	--dash: linear-gradient(to right, var(--ink) 0 55%, transparent 55% 100%);
}
.nz-roster {
	margin-top: 48px;
	max-width: none !important;
}
.nz-text > .nz-roster { max-width: none; }

.nz-roster [data-reveal="text"] { visibility: hidden; }
.nz-roster .is-split { visibility: visible; }
html:not(.nz-roster-on) .nz-roster [data-reveal="text"] { visibility: visible; }

/* righe divise da SplitText: spazio per ascendenti e discendenti con interlinea stretta */
.nz-roster .is-split:not([data-single-line]), .nz-ov .is-split:not([data-single-line]) { display: grid; align-content: start; }
.nz-line-mask { padding: 0.08em 0.1em 0.12em; margin: -0.08em -0.1em -0.12em; }

/* immagini: la maschera è il contenitore, l'interno porta il sollevamento */
.nz-rimg { position: relative; display: block; overflow: hidden; border-radius: var(--r-img); background: var(--ink); }
.nz-rimg__inner { position: absolute; inset: 0; background: var(--ink); } /* lo sfondo sta qui: il movimento crea un nuovo contesto e la stampa a due colori si mescola con questo */
.nz-rimg img { width: 100%; height: 100%; object-fit: cover; }
/* gli avatar restano a colori: niente stampa a due inchiostri qui */

/* ---------- numeri ---------- */
.nz-roster__stats { list-style: none; margin: 0 0 clamp(56px, 8vw, 120px); padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px var(--gutter); font-weight: 600; color: var(--muted); }
.nz-roster__num { display: block; font-size: var(--step-head); font-weight: 800; letter-spacing: -0.05em; line-height: 0.9; color: var(--ink-strong); margin-bottom: 6px; }

/* ---------- slider: da bordo a bordo, le schede partono dal margine del testo ---------- */
.nz-roster__slider {
	--card-w: calc((100vw - var(--col-left)) / var(--cards-visible));
	width: 100vw;
	margin-left: calc(50% - 50vw);
}
.nz-slider__track { display: flex; overflow: hidden; user-select: none; -webkit-user-select: none; touch-action: pan-y; }
html:not(.nz-roster-on) .nz-slider__track { overflow-x: auto; scroll-snap-type: x mandatory; }
.nz-slide { position: relative; left: var(--col-left); flex-shrink: 0; width: var(--card-w); padding-right: var(--gutter); scroll-snap-align: start; }
html:not(.nz-roster-on) .nz-slide { left: 0; }
html:not(.nz-roster-on) .nz-slide:first-child { margin-left: var(--col-left); }

.nz-card { display: block; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.nz-roster-on .nz-card { cursor: grab; }
.nz-roster-on .nz-slider__track:active .nz-card { cursor: grabbing; }
.nz-card__media { aspect-ratio: var(--card-ratio); width: 100%; }
.nz-card__media img { position: absolute; top: 0; left: -10%; width: 120%; max-width: none; height: 100%; will-change: transform; -webkit-user-drag: none; pointer-events: none; }
.nz-card__name { display: block; margin-top: 16px; font-size: var(--fs-name); font-weight: 800; letter-spacing: -0.035em; line-height: 1.03; color: var(--ink-strong); }
.nz-card__meta { display: block; margin-top: 4px; font-size: var(--step-small); font-weight: 600; color: var(--muted); }
.nz-card:focus-visible { outline-offset: -3px; border-radius: var(--r-img); }
.nz-card.is-flipping .nz-card__media { visibility: hidden; }
.nz-roster__hint { margin: 20px 0 0 var(--col-left); font-size: var(--step-small); color: var(--muted); }

/* ---------- tabella per pratica ---------- */
.nz-roster__table { position: relative; margin-top: clamp(96px, 12vw, 200px); }
.nz-roster__table > .nz-head { max-width: none; }
.nz-dash { height: 1.5px; background-image: var(--dash); background-size: 14px 100%; background-repeat: repeat-x; }
.nz-practice { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; min-height: clamp(96px, 9vw, 156px); }
.nz-practice > .nz-dash { grid-column: 1 / -1; }
.nz-practice__head { grid-column: 1 / 9; display: flex; align-items: flex-end; gap: clamp(8px, 1vw, 18px); padding-top: 6px; min-width: 0; }
.nz-practice__num { flex-shrink: 0; font-size: var(--fs-name); font-weight: 700; line-height: 1.03; padding-bottom: 0.3em; font-variant-numeric: tabular-nums; color: var(--muted); }
.nz-practice__title { min-width: 0; font-size: var(--fs-row); line-height: 0.86; letter-spacing: -0.055em; color: var(--ink); overflow-wrap: anywhere; }
.nz-practice__names { grid-column: 9 / 13; position: relative; z-index: 2; margin: 0; padding-top: 14px; font-size: var(--fs-name); font-weight: 800; letter-spacing: -0.035em; line-height: 1.1; color: var(--ink-strong); }
.nz-practice__name { position: relative; cursor: pointer; transition: opacity 200ms ease; }
.nz-practice__name::after { content: ""; position: absolute; inset: -0.22em -0.18em; }
.nz-practice__name:focus-visible { outline: 3px solid var(--ink-strong); outline-offset: 2px; border-radius: 4px; }
.nz-practice__sep { transition: opacity 200ms ease; }
.nz-practices.is-dimmed .nz-practice__name, .nz-practices.is-dimmed .nz-practice__sep { opacity: var(--dim, 0.3); }
.nz-practices.is-dimmed .nz-practice__name.is-active { opacity: 1; }

/* posizionata dal JS: centrata sulla punta del mouse, ogni volta con un'angolazione diversa */
.nz-practices__hover { position: absolute; z-index: 1; top: 0; left: 0; width: clamp(180px, 18vw, 320px); aspect-ratio: 320 / 437; pointer-events: none; visibility: hidden; }
.nz-practices__hover.is-on { visibility: visible; }
.nz-practices__hover.is-flipping { visibility: hidden; }
.nz-hover-layer { position: absolute; inset: 0; overflow: hidden; border-radius: var(--r-img); background: var(--ink); }
.nz-hover-layer__inner { position: absolute; inset: 0; background: var(--ink); }
.nz-hover-layer img { width: 100%; height: 100%; object-fit: cover; }
@media (hover: none), (pointer: coarse) { .nz-practices__hover { display: none; } }

/* ---------- scheda a schermo intero ---------- */
.nz-ov {
	--ov-inset: 12px;
	position: fixed; inset: 0; z-index: 300;
	color: var(--ink);
}
.nz-ov[hidden] { display: none; }
.nz-ov:focus { outline: none; }
.nz-ov__bg { position: absolute; inset: 0; background: var(--bg); }
.nz-ov__scroll { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.nz-ov__inner { position: relative; display: grid; grid-template-columns: 1fr 1fr; min-height: 100%; }
.nz-ov__content {
	position: relative; z-index: 2; /* un nome lungo passa sopra l'immagine invece che sotto */
	display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: var(--gutter, 12px); align-content: start;
	padding: clamp(72px, 9vw, 140px) 6px clamp(96px, 8vw, 140px) var(--margin);
}
.nz-ov-tags { grid-column: 1 / 5; list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; font-size: var(--step-small); font-weight: 700; }
.nz-ov-tags li { border: 1.5px solid currentColor; border-radius: var(--r-pill); padding: 4px 12px; white-space: nowrap; }
.nz-ov-tags li.is-split { display: block; }
.nz-ov-name { grid-column: 1 / -1; margin-top: clamp(32px, 4vw, 56px); font-size: var(--fs-ov-name); line-height: 0.85; letter-spacing: -0.06em; color: var(--ink-strong); }
.nz-ov-name__line { display: block; }
.nz-ov-name__line + .nz-ov-name__line { padding-left: calc(100% / 6); }
.nz-ov-bio { grid-column: 2 / 6; margin-top: clamp(32px, 3.5vw, 52px); font-size: var(--step-lead); line-height: 1.3; color: var(--ink); }
.nz-ov-bio p { margin: 0 0 0.8em; }
.nz-ov-section { grid-column: 2 / 6; margin-top: clamp(32px, 4vw, 64px); }
.nz-ov-section__label { margin: 0 0 14px; font-size: var(--step-small); font-weight: 700; letter-spacing: 0; color: var(--muted); }
.nz-ov-list { list-style: none; margin: 0; padding: 0; display: grid; row-gap: 8px; font-size: var(--fs-name); font-weight: 800; letter-spacing: -0.035em; line-height: 1.1; }
.nz-ov-row { display: flex; align-items: baseline; gap: 14px; }
.nz-ov-row > :first-child, .nz-ov-row > :last-child { flex-shrink: 0; }
.nz-ov-row > :last-child { text-align: right; max-width: 70%; flex-shrink: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nz-ov-row a { color: var(--ink-strong); text-decoration: none; }
.nz-ov-row a:hover { text-decoration: underline; }
.nz-ov-row__leader { flex: 1 1 auto; min-width: 1.5rem; height: 1.5px; align-self: baseline; background-image: var(--dash); background-size: 12px 100%; background-repeat: repeat-x; }

.nz-ov__media { position: relative; z-index: 1; padding: var(--ov-inset) var(--ov-inset) var(--ov-inset) 0; }
.nz-ov__frame { position: sticky; top: var(--ov-inset); margin: 0; height: calc(100vh - 2 * var(--ov-inset)); height: calc(100dvh - 2 * var(--ov-inset)); }
.nz-ov__img { width: 100%; height: 100%; object-fit: cover; }
.nz-ov.is-flipping .nz-ov__img { visibility: hidden; }
/* mentre la scheda vola anche il fondo rosso del riquadro resta nascosto: lo porta la copia che si muove */
.nz-ov.is-flipping .nz-ov__frame, .nz-ov.is-flipping .nz-ov__frame .nz-rimg__inner { background: transparent; }

.nz-ov__close {
	position: fixed; z-index: 3; top: calc(2 * var(--ov-inset)); right: calc(2 * var(--ov-inset));
	width: 56px; height: 56px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%;
	background: var(--bg); color: var(--ink-strong); cursor: pointer;
}
.nz-ov__close svg { width: 40%; height: 40%; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; transition: transform 600ms var(--ease); }
@media (hover: hover) { .nz-ov__close:hover svg { transform: rotate(90deg); } }
.nz-ov__go { position: fixed; z-index: 3; right: calc(2 * var(--ov-inset)); bottom: calc(2 * var(--ov-inset)); }
.nz-ov__go[hidden] { display: none; }
/* etichetta che rotola: esce in alto, rientra dal basso */
.nz-ov__go-label { position: relative; display: block; overflow: hidden; padding-block: 0.1em; color: transparent; }
.nz-ov__go-label::before, .nz-ov__go-label::after { content: attr(data-label); position: absolute; inset: 0.1em 0 auto; color: var(--accent-ink); transition: transform 600ms var(--ease); }
.nz-ov__go-label::after { transform: translateY(110%); }
@media (hover: hover) {
	.nz-ov__go:hover .nz-ov__go-label::before { transform: translateY(-110%); }
	.nz-ov__go:hover .nz-ov__go-label::after { transform: translateY(0); }
}

.nz-flip-clone { position: fixed; z-index: 310; top: 0; left: 0; overflow: hidden; border-radius: var(--r-img); background: var(--ink); pointer-events: none; will-change: transform, width, height; }
.nz-flip-clone img { position: absolute; max-width: none; object-fit: cover; }

/* ---------- tablet in verticale ---------- */
@media (max-width: 991px) {
	.nz-roster { --cards-visible: 1.85; }
	.nz-roster__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.nz-practice { min-height: 0; padding-bottom: 24px; }
	.nz-practice__head { grid-column: 1 / -1; padding-top: 14px; }
	.nz-practice__names { grid-column: 1 / -1; padding-top: 14px; padding-left: calc(2 * 100% / 12); max-width: 38rem; }

	.nz-ov__inner { grid-template-columns: 1fr; }
	.nz-ov__media { order: -1; padding: var(--ov-inset) var(--ov-inset) 0; }
	.nz-ov__frame { position: relative; top: 0; height: auto; aspect-ratio: 4 / 5; max-height: calc(100svh - 2 * var(--ov-inset)); width: 100%; }
	.nz-ov__content { grid-template-columns: repeat(12, minmax(0, 1fr)); padding: 48px var(--margin) 128px; }
	.nz-ov-tags { grid-column: 1 / -1; }
	.nz-ov-name__line + .nz-ov-name__line { padding-left: calc(2 * 100% / 12); }
	.nz-ov-bio, .nz-ov-section { grid-column: 3 / 12; }
}

@media (max-width: 767px) {
	.nz-roster { --cards-visible: 2.4; }
	.nz-ov__frame { aspect-ratio: 3 / 4; }
	.nz-ov-name { order: -1; margin: 0 0 24px; font-size: clamp(3.5rem, 18vw, 9rem); }
	.nz-ov-bio, .nz-ov-section { grid-column: 1 / -1; }
	.nz-ov-tags { margin-top: 8px; }
	.nz-practices__hover { width: clamp(200px, 30vw, 300px); }
}

/* telefoni in orizzontale: schermo basso, immagine accanto al testo */
@media (max-width: 991px) and (orientation: landscape) and (max-height: 560px) {
	.nz-ov__inner { grid-template-columns: 1fr 1fr; }
	.nz-ov__media { order: 1; padding: var(--ov-inset) var(--ov-inset) var(--ov-inset) 0; }
	.nz-ov__frame { position: sticky; top: var(--ov-inset); aspect-ratio: auto; height: calc(100dvh - 2 * var(--ov-inset)); }
	.nz-ov__content { grid-template-columns: repeat(6, minmax(0, 1fr)); padding: 24px 6px 80px var(--margin); }
	.nz-ov-name { order: 0; font-size: 11vw; }
	.nz-ov-bio, .nz-ov-section { grid-column: 1 / -1; }
}

@media (max-width: 479px) {
	.nz-roster { --cards-visible: 1.22; }
	.nz-practice__names { padding-left: 0; }
	.nz-ov__content { padding: 36px var(--margin) 112px; }
	.nz-ov__go { left: calc(2 * var(--ov-inset)); right: calc(2 * var(--ov-inset)); }
}

@media (prefers-reduced-motion: reduce) {
	.nz-ov__go-label::before, .nz-ov__go-label::after, .nz-ov__close svg { transition: none; }
}