/* =============================================================================
   SIMPLEBUILD — vetrina delle app.
   Un file solo: i valori stanno qui, mai sparsi nella pagina.
   ============================================================================= */

:root {
	/* Colori SEMANTICI, non nomi di tinte: cambiare tema significa
	   cambiare questi otto valori, non cercare gli #hex nella pagina. */
	--fondo:          #fbfaf8;
	--fondo-scheda:   #ffffff;
	--inchiostro:     #17161a;
	--inchiostro-2:   #5d5a66;
	--bordo:          #e6e3dd;
	--accento:        #6b3df5;
	--ombra:          0 1px 2px rgb(20 18 30 / .05), 0 8px 24px rgb(20 18 30 / .06);
	--ombra-alta:     0 2px 4px rgb(20 18 30 / .07), 0 18px 44px rgb(20 18 30 / .13);

	--raggio:      18px;
	--raggio-icona: 22%;   /* la curva dell'icona iOS e' proporzionale al lato */
	--larghezza:   1080px;

	/* Griglia a 4: ogni distanza della pagina e' uno di questi valori. */
	--s1: .25rem; --s2: .5rem;  --s3: .75rem; --s4: 1rem;
	--s6: 1.5rem; --s8: 2rem;   --s12: 3rem;  --s16: 4rem;
}

@media (prefers-color-scheme: dark) {
	:root {
		--fondo:        #0e0d11;
		--fondo-scheda: #17161c;
		--inchiostro:   #f2f0f5;
		--inchiostro-2: #a29eae;
		--bordo:        #26242e;
		--accento:      #a78bfa;
		--ombra:        0 1px 2px rgb(0 0 0 / .4);
		--ombra-alta:   0 2px 6px rgb(0 0 0 / .5), 0 18px 44px rgb(0 0 0 / .45);
	}
}

*, *::before, *::after { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--fondo);
	color: var(--inchiostro);
	/* Il font di sistema: su iPhone e Mac e' lo stesso carattere delle app
	   che questa pagina presenta. Nessun font da scaricare, nessun salto
	   di rendering al caricamento. */
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
	             Helvetica, Arial, sans-serif;
	/* rem e non px: se l'utente ingrandisce il testo del browser, la
	   pagina lo segue. Con i px non lo seguirebbe mai. */
	font-size: 1rem;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.contenitore { max-width: var(--larghezza); margin-inline: auto; padding-inline: var(--s6); }

/* --- Intestazione ---------------------------------------------------------- */

.intestazione { padding-block: clamp(var(--s12), 9vw, var(--s16)) var(--s8); }

.marchio {
	display: inline-flex; align-items: baseline; gap: .1em;
	font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem);
	font-weight: 700; letter-spacing: -.02em; margin: 0;
}
.marchio .punto { color: var(--accento); }

.sommario {
	margin: var(--s4) 0 0;
	max-width: 46ch;                 /* oltre le ~70 battute l'occhio perde la riga */
	font-size: clamp(1.06rem, 1rem + .5vw, 1.3rem);
	line-height: 1.45;
	color: var(--inchiostro-2);
	text-wrap: pretty;               /* evita la parola sola sull'ultima riga */
}

.conteggio {
	display: inline-block; margin-top: var(--s6);
	font-size: .82rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
	color: var(--inchiostro-2);
	padding: var(--s1) var(--s3);
	border: 1px solid var(--bordo); border-radius: 100px;
}

/* --- La griglia delle app -------------------------------------------------- */

.griglia {
	list-style: none; margin: 0; padding: 0 0 var(--s16); /* ul: padding-left azzerato di proposito, i pallini non servono */
	display: grid; gap: var(--s4);
	/* auto-fill + minmax: il numero di colonne lo decide lo spazio, non io.
	   E' la ragione per cui la decima app non richiede di toccare il CSS. */
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
}

.scheda { display: flex; }

/* Tutta la scheda e' UN solo link.
   Un secondo link dentro la stessa scheda (per esempio verso l'App Store)
   raddoppierebbe le tappe della navigazione da tastiera e renderebbe
   ambiguo il bersaglio del tocco: allo Store ci porta la pagina dell'app,
   che e' il suo mestiere. Qui il compito e' uno solo. */
.scheda a {
	display: flex; align-items: center; gap: var(--s4);
	width: 100%; padding: var(--s4);
	text-decoration: none; color: inherit;
	background: var(--fondo-scheda);
	border: 1px solid var(--bordo); border-radius: var(--raggio);
	box-shadow: var(--ombra);
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.scheda a:hover, .scheda a:focus-visible {
	transform: translateY(-2px);
	box-shadow: var(--ombra-alta);
	border-color: color-mix(in srgb, var(--accento) 45%, var(--bordo));
}

/* Il contorno di messa a fuoco NON si toglie: e' l'unico modo, per chi
   naviga da tastiera, di sapere dove si trova. */
.scheda a:focus-visible { outline: 2px solid var(--accento); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
	.scheda a { transition: none; }
	.scheda a:hover, .scheda a:focus-visible { transform: none; }
}

.icona {
	flex: 0 0 auto; width: 4.5rem; height: 4.5rem;
	border-radius: var(--raggio-icona);
	background: var(--bordo);        /* si vede questo se l'immagine non arriva */
	box-shadow: inset 0 0 0 1px rgb(0 0 0 / .07);
}

.testi { min-width: 0; }            /* ⚠️ senza, un nome lungo sfonda la griglia */

.nome {
	margin: 0; font-size: 1.06rem; font-weight: 600; letter-spacing: -.01em;
	line-height: 1.25;
	/* I nomi veri arrivano a "YourCollage – Media Generator": deve poter
	   andare a capo, non essere troncato con i puntini. */
	overflow-wrap: anywhere;
}

.riga {
	margin: var(--s1) 0 0; color: var(--inchiostro-2);
	font-size: .92rem; line-height: 1.4; text-wrap: pretty;
}

/* --- Piede ---------------------------------------------------------------- */

.piede {
	border-top: 1px solid var(--bordo);
	padding-block: var(--s8) var(--s12);
	font-size: .88rem; color: var(--inchiostro-2);
	display: flex; flex-wrap: wrap; gap: var(--s2) var(--s6);
	justify-content: space-between;
}
.piede a { color: inherit; text-decoration-color: var(--bordo); text-underline-offset: 3px; }
.piede a:hover { color: var(--inchiostro); text-decoration-color: currentColor; }

/* --- Pagina 404 ------------------------------------------------------------ */

.centrata { min-height: 76vh; display: grid; align-content: center; }
.codice { font-size: .82rem; font-weight: 600; letter-spacing: .1em; color: var(--accento); }
.titolo-404 { font-size: clamp(1.6rem, 1.3rem + 1.6vw, 2.2rem); margin: var(--s2) 0 var(--s3); letter-spacing: -.02em; }
.azione {
	display: inline-block; margin-top: var(--s4);
	padding: var(--s3) var(--s6); border-radius: 100px;
	background: var(--accento); color: #fff; text-decoration: none; font-weight: 600;
}
.azione:focus-visible { outline: 2px solid var(--inchiostro); outline-offset: 3px; }