/*
 * OnTheWall — utility del tema.
 *
 * Sostituiscono gli attributi style="" presenti nella preview, così che
 * nessuno stile venga scritto inline nel markup. Accodato dopo main.css.
 */

/* Densità della trama halftone. */
.halftone-14 {
	background-size: 14px 14px;
}

/* Ritardi in sequenza dell'animazione spray-in. */
.spray-delay-120 {
	animation-delay: 120ms;
}

.spray-delay-360 {
	animation-delay: 360ms;
}

.spray-delay-520 {
	animation-delay: 520ms;
}

/* Fonde il fondo bianco del logo (issue #5) con lo sfondo della pagina. */
.mix-blend-multiply {
	mix-blend-mode: multiply;
}

/*
 * Logo Misfit Toy: il JPEG ha ampi margini bianchi. L'immagine si ingrandisce
 * e il riquadro taglia i margini, così l'ingranaggio riempie lo spazio.
 */
.logo-crop {
	overflow: hidden;
}

.logo-crop img {
	width: 130%;
	max-width: none;
	margin: -15%;
}

/* Hero: 1,35× il logo precedente, il massimo perché l'ingranaggio resti nella colonna. */
.logo-crop--hero img {
	width: 135%;
	margin: 0 -17.5%;
}

/*
 * Hero sui telefoni (sotto md, 48rem): logo a destra del titolo.
 * La colonna del testo diventa "contents", così titolo, paragrafo e CTA entrano
 * nella griglia: riga 1 titolo + logo, poi paragrafo e CTA a larghezza piena.
 * La seconda colonna è 1fr, così il paragrafo che la attraversa non allarga quella del titolo.
 */
@media (width < 48rem) {
	#about > .grid {
		grid-template-columns: max-content minmax(0, 1fr);
		align-items: center;
		row-gap: 0;
	}

	#about > .grid > :first-child {
		display: contents;
	}

	#about > .grid > :first-child > :not(h1) {
		grid-column: 1 / -1;
	}

	/* Stesso margine superiore dell'h1 (mt-6): i due centri coincidono. */
	#about > .grid > :last-child {
		grid-row: 1;
		grid-column: 2;
		margin-top: 1.5rem;
	}

	/* Circa il 42% del contenitore, ridotto se lo spazio a destra del titolo non basta. */
	.logo-crop--hero {
		width: min(100%, (100vw - 2.5rem) * 0.42);
	}

	/* Riquadro quadrato: in riga col titolo i margini bianchi sopra e sotto non servono. */
	.logo-crop--hero img {
		width: 130%;
		margin: -15%;
	}
}

/* Riga tecnica + prezzo delle card: stessa baseline; se non c'è spazio il prezzo va sotto, a destra. */
.card-meta-row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	column-gap: 0.5rem;
}

/*
 * Finestra dell'opera: popover HTML nativo (si apre e si chiude senza JS).
 * Le foto scorrono con lo scroll-snap; frecce = link alle ancore delle foto.
 */
.lightbox-trigger {
	display: block;
	width: 100%;
	padding: 0;
	/* Ancora la striscia SOLD e la taglia al bordo della foto. */
	position: relative;
	overflow: hidden;
	cursor: zoom-in;
}

/*
 * Opere vendute: striscia wheatpaste incollata di traverso sull'opera.
 * Riprende due stilemi già usati nel sito, il bordo strappato di .torn e la
 * trama a puntini di .halftone.
 *
 * Due livelli: il contenitore è la tela scolorita, visibile appena, che fa da
 * traccia; dentro, .sold-tape-roll è la tela piena che si srotola da sinistra
 * passando sulla card. Servono separati perché un'opacity sul contenitore
 * limiterebbe anche il figlio.
 * Su touch resta allo stato di riposo, ma l'etichetta di prezzo scrive "SOLD".
 */
.sold-tape {
	position: absolute;
	top: 50%;
	left: 50%;
	/* Più larga della foto: la striscia la attraversa ed esce dai bordi. */
	width: 150%;
	/* Tela ancora arrotolata: stesso rosso del tema, molto diluito. */
	background-color: color-mix(in oklab, var(--primary) 38%, transparent);
	background-image: radial-gradient(rgb(0 0 0 / 0.14) 1.5px, transparent 1.5px);
	background-size: 7px 7px;
	/* Carta strappata sopra e sotto. */
	clip-path: polygon(
		0 14%, 9% 4%, 19% 13%, 31% 2%, 44% 12%, 57% 3%, 69% 13%, 81% 4%, 92% 12%, 100% 5%,
		100% 87%, 90% 97%, 78% 88%, 66% 98%, 53% 89%, 40% 99%, 28% 88%, 16% 97%, 6% 90%, 0 96%
	);
	transform: translate(-50%, -50%) rotate(-8deg);
	pointer-events: none;
}

.sold-tape-roll {
	display: block;
	padding: 0.45em 0;
	text-align: center;
	background-color: var(--primary);
	/* Retino di stampa, come la trama halftone del resto del sito. */
	background-image: radial-gradient(rgb(0 0 0 / 0.22) 1.5px, transparent 1.5px);
	background-size: 7px 7px;
	color: var(--primary-foreground);
	font-size: clamp(1.1rem, 3.2vw, 2rem);
	letter-spacing: 0.28em;
	/* Compensa lo spazio che il tracking aggiunge dopo l'ultima lettera. */
	text-indent: 0.28em;
	/* Arrotolata a sinistra: inset() si anima ovunque, a differenza di mask-size. */
	clip-path: inset(0 100% 0 0);
	/*
	 * Curva più regolare della solita del sito: il rotolo parte, prende
	 * velocità e si ferma. Con la cubic-bezier(.32,.72,0,1) l'80% della corsa
	 * si consumava nei primi 150ms e sembrava uno scatto, non uno srotolamento.
	 */
	transition: clip-path 0.55s cubic-bezier(0.45, 0.05, 0.2, 1);
}

.tilt-hover:hover .sold-tape-roll,
.tilt-hover:focus-within .sold-tape-roll {
	clip-path: inset(0 0 0 0);
}

.lightbox-trigger:focus-visible,
.lightbox-close:focus-visible,
.lightbox-track:focus-visible,
.lightbox-nav a:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: 2px;
}

.lightbox {
	/* Il reset di main.css azzera il margin:auto con cui il browser centra i popover. */
	margin: auto;
	width: min(72rem, 100vw - 2rem);
	max-height: calc(100dvh - 2rem);
	padding: 1rem;
	border: 2px solid var(--foreground);
	background: var(--card);
	color: var(--card-foreground);
}

.lightbox:popover-open {
	display: grid;
	gap: 1rem;
	align-items: start;
}

.lightbox::backdrop {
	background: color-mix(in oklab, var(--foreground) 85%, transparent);
}

/* La pagina sotto non scorre mentre la finestra è aperta. */
body:has(.lightbox:popover-open) {
	overflow: hidden;
}

.lightbox-close {
	justify-self: end;
	padding: 0.25rem 0;
	cursor: pointer;
}

.lightbox-close:hover,
.lightbox-nav a:hover {
	color: var(--primary);
}

.lightbox-track {
	display: flex;
	/* Lo spazio nasconde il pixel della foto vicina che gli arrotondamenti dello scroll lasciano sporgere. */
	gap: 1rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	/* Niente scroll-behavior: smooth: dentro il popover blocca il salto alle ancore delle frecce. */
	overscroll-behavior-x: contain;
	/* Si scorre con swipe, frecce o tastiera: la barra sarebbe solo rumore. */
	scrollbar-width: none;
}

.lightbox-track::-webkit-scrollbar {
	display: none;
}

.lightbox-slide {
	flex: 0 0 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	margin: 0;
	scroll-snap-align: center;
}

/*
 * Riquadro della foto ad altezza fissa (la foto ci sta dentro intera): così la barra
 * delle frecce sotto resta nello stesso punto qualunque sia la proporzione della foto.
 * Sui telefoni il riquadro è circa quadrato, sugli schermi grandi alto al massimo il 70%.
 */
.lightbox-slide img {
	width: 100%;
	height: min(70dvh, 100vw - 4rem);
	object-fit: contain;
}

/* Tre colonne fisse: freccia, contatore, freccia. */
.lightbox-nav {
	display: grid;
	grid-template-columns: 2.5rem 4.5rem 2.5rem;
	align-items: center;
	justify-items: center;
}

.lightbox-nav a {
	font-size: 1.25rem;
	text-decoration: none;
}

/* Da 48rem: foto a sinistra, dettagli a destra; il pulsante Chiudi resta sopra entrambi. */
@media (width >= 48rem) {
	.lightbox:popover-open {
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	}

	.lightbox-close {
		grid-column: 1 / -1;
	}

	.lightbox-details {
		padding-top: 1rem;
	}
}