/* =============================================================
   THE WALL — bacheca/blog di Art Squad.
   Caricato solo sulla pagina /the-wall/.

   Derivato da artsquad-the-wall-v2.html. Tre differenze dal prototipo,
   tutte necessarie perché qui non siamo in una pagina isolata:

   1. niente reset globale e niente regole su body: il tema ha già i suoi e
      si sovrascriverebbero a vicenda;
   2. i colori arrivano dai token del tema (--as-*) invece di essere
      ridichiarati, così se un domani cambia il giallo cambia anche qui;
   3. gli scotch usano indirizzi relativi alla radice del sito, così
      funzionano sia online sia sulla copia locale.
   ============================================================= */

.as-wall {
	--red: #d62626;
	--r: 22px;
	--b: 2px solid var(--as-black);
	--sh: 6px 6px 0 var(--as-black);

	/* Gli scotch stanno nel TEMA, non in uploads: sono elementi del disegno,
	   non contenuti caricati da qualcuno. Così viaggiano via FTP col resto,
	   funzionano identici in locale e online, e non dipendono dalla cartella
	   uploads né dal mese in cui furono caricati. Il percorso è relativo a
	   questo foglio di stile. */
	--tape-1: url("../img/scotch-yellow.png");
	--tape-2: url("../img/scotch-red.png");
	--tape-3: url("../img/scotch-blue.png");

	font-size: 15px;
	line-height: 1.6;
	padding: 30px 0 90px;
}
.as-wall .wrap { max-width: 1220px; margin: 0 auto; padding: 0 20px; }
.as-wall h1, .as-wall h2, .as-wall h3, .as-wall h4 { font-family: var(--as-font-display); }
.as-wall *, .as-wall *::before, .as-wall *::after { box-sizing: border-box; }

/* ---------- testata ---------- */
.as-wall .top {
	display: flex; justify-content: space-between; align-items: flex-end;
	gap: 26px; flex-wrap: wrap; margin-bottom: 20px;
}
.as-wall .top h1 { font-size: clamp(40px, 7.5vw, 68px); font-weight: 800; line-height: .92; letter-spacing: -.025em; margin: 0; }
.as-wall .top p { max-width: 36ch; font-size: 14.5px; opacity: .72; margin-top: 10px; }
.as-wall .count {
	font-family: var(--as-font-display); font-weight: 700; font-size: 12px;
	letter-spacing: .08em; text-transform: uppercase; background: var(--as-yellow);
	border: var(--b); border-radius: 999px; padding: 5px 15px; white-space: nowrap;
}
.as-wall hr.rule { height: 4px; background: var(--as-black); border: 0; margin: 0 0 24px; }

/* ---------- filtri ---------- */
.as-wall .filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 30px; padding: 0; list-style: none; }
.as-wall .f {
	font-family: var(--as-font-display); font-weight: 700; font-size: 13.5px;
	background: var(--as-white); border: var(--b); border-radius: 999px;
	padding: 7px 17px; cursor: pointer; box-shadow: 3px 3px 0 var(--as-black);
	transition: transform .1s; color: inherit;
}
.as-wall .f:hover { transform: translate(-1px, -1px); }
.as-wall .f.on { background: var(--as-yellow); }

/* ---------- il muro ---------- */
.as-wall .wall {
	display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px;
	align-items: start;
	/* dense anche su desktop: nel prototipo le misure erano scelte a mano,
	   qui gli articoli arrivano in ordine di pubblicazione e senza questo
	   resterebbero buchi in mezzo al muro. */
	grid-auto-flow: dense;
}
.as-wall .patch { position: relative; border: var(--b); border-radius: var(--r); box-shadow: var(--sh); background: var(--as-white); }
.as-wall .patch.tA { transform: rotate(-.65deg); }
.as-wall .patch.tB { transform: rotate(.55deg); }
.as-wall .patch.tC { transform: rotate(-1.1deg); }
.as-wall .patch[hidden] { display: none; }

.as-wall .tag {
	display: inline-block; font-family: var(--as-font-display); font-weight: 700;
	font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
	border: var(--b); border-radius: 999px; padding: 2px 10px; background: var(--as-white);
}
.as-wall .tag-yellow { background: var(--as-yellow); }
.as-wall .tag-cyan   { background: var(--as-cyan); }
.as-wall .tag-green  { background: var(--as-green); }
.as-wall .tag-purple { background: var(--as-purple); }
.as-wall .tag-white  { background: var(--as-white); color: var(--as-black); border-color: var(--as-cream); }

.as-wall .thumb { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; border-bottom: var(--b); border-radius: 20px 20px 0 0; }
.as-wall .body { padding: 20px; }
.as-wall .body h3 { font-size: 21px; font-weight: 800; line-height: 1.14; margin: 10px 0 7px; }
.as-wall .body h3 a { color: inherit; text-decoration: none; }
.as-wall .body h3 a:hover { text-decoration: underline; text-decoration-color: var(--as-yellow); text-decoration-thickness: 2px; }
.as-wall .body p { font-size: 13.8px; line-height: 1.55; opacity: .82; margin: 0; }
.as-wall .meta { display: flex; gap: 9px; font-size: 11.5px; font-weight: 600; opacity: .5; margin-top: 13px; }

.as-wall .sp3 { grid-column: span 3; } .as-wall .sp4 { grid-column: span 4; }
.as-wall .sp5 { grid-column: span 5; } .as-wall .sp6 { grid-column: span 6; }
.as-wall .sp7 { grid-column: span 7; } .as-wall .sp8 { grid-column: span 8; }

/* --- lead read --- */
.as-wall .lead { display: grid; grid-template-columns: 1.1fr 1fr; overflow: hidden; }
.as-wall .lead .thumb { aspect-ratio: auto; height: 100%; border-bottom: 0; border-right: var(--b); border-radius: 20px 0 0 20px; }
.as-wall .lead .body { padding: 28px; display: flex; flex-direction: column; justify-content: center; }
.as-wall .lead h3 { font-size: 31px; margin-top: 12px; }

/* --- CLIPPING: carta con lo scotch --- */
.as-wall .clip { background: #fbf6f1; overflow: visible; z-index: 2; }
.as-wall .clip::before {
	content: ''; position: absolute; top: -24px; left: 50%; width: 124px; height: 52px;
	background-position: center; background-size: 100% 100%; background-repeat: no-repeat;
	z-index: 6; pointer-events: none;
}
.as-wall .clip.tape-1::before { background-image: var(--tape-1); transform: translateX(-50%) rotate(-2.5deg); }
.as-wall .clip.tape-2::before { background-image: var(--tape-2); transform: translateX(-62%) rotate(3deg); }
.as-wall .clip.tape-3::before { background-image: var(--tape-3); transform: translateX(-38%) rotate(-5deg); }
.as-wall .clip .body { padding: 22px 20px 20px; }
.as-wall .clip .src { font-size: 10.5px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; opacity: .48; margin-top: 11px; }
.as-wall .clip h4 { font-family: var(--as-font-body); font-size: 16.5px; font-weight: 700; line-height: 1.32; margin: 7px 0 12px; }
.as-wall .clip .take { border-left: 3px solid var(--as-black); padding-left: 13px; font-size: 13.5px; line-height: 1.5; font-style: italic; opacity: .86; }
.as-wall .clip .out {
	display: inline-block; margin-top: 14px; font-size: 12px; font-weight: 700;
	text-decoration: underline; text-decoration-color: var(--as-yellow);
	text-decoration-thickness: 2px; text-underline-offset: 3px; color: var(--as-black);
}

/* --- STILL WET --- */
.as-wall .wet .body { display: flex; gap: 15px; align-items: flex-start; padding: 20px; }
.as-wall .wet .ph { flex: 0 0 62px; width: 62px; height: 62px; border: var(--b); border-radius: 16px; object-fit: cover; }
.as-wall .wet h4 { font-family: var(--as-font-display); font-size: 19px; font-weight: 700; line-height: 1.1; margin: 7px 0 0; }
.as-wall .wet h4 a { color: inherit; text-decoration: none; }
.as-wall .wet .role { font-size: 10.5px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; opacity: .55; margin: 3px 0 8px; }
.as-wall .wet p { font-size: 13.4px; line-height: 1.5; }
.as-wall .wet .when { display: inline-block; margin-top: 10px; font-size: 11px; font-weight: 700; background: var(--as-white); border: var(--b); border-radius: 999px; padding: 2px 10px; }

/* --- EVIDENCE --- */
.as-wall .ev { position: relative; border: var(--b); border-radius: var(--r); overflow: hidden; box-shadow: var(--sh); padding: 0; margin: 0; }
.as-wall .ev img { display: block; width: 100%; object-fit: cover; }
.as-wall .ev.tall img { aspect-ratio: 4/5; }
.as-wall .ev.wide img { aspect-ratio: 3/2; }
.as-wall .ev .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px; background: linear-gradient(transparent, rgba(0, 0, 0, .9)); color: var(--as-cream); margin: 0; }
.as-wall .ev .cap b { font-family: var(--as-font-display); font-size: 17px; font-weight: 700; display: block; }
.as-wall .ev .cap span { font-size: 12.3px; opacity: .82; }
.as-wall .ev .tag { position: absolute; top: 14px; left: 14px; }

/* --- MANIFESTO --- */
.as-wall .mani { background: var(--as-black); color: var(--as-cream); padding: 28px 24px; border: var(--b); border-radius: var(--r); box-shadow: var(--sh); margin: 0; }
.as-wall .mani p { font-family: var(--as-font-display); font-size: 23px; font-weight: 700; line-height: 1.24; margin-top: 15px; }
.as-wall .mani cite { display: block; font-family: var(--as-font-body); font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .48; margin-top: 16px; }

/* --- ISCRIZIONE --- */
.as-wall .sub { background: var(--as-yellow); border: var(--b); border-radius: var(--r); box-shadow: var(--sh); padding: 26px 24px; }
.as-wall .sub h3 { font-size: 24px; font-weight: 800; line-height: 1.14; margin: 0; }
.as-wall .sub p { font-size: 13.8px; margin: 8px 0 16px; }
.as-wall .sub .row { display: flex; gap: 8px; flex-wrap: wrap; }
.as-wall .sub input { flex: 1; min-width: 150px; border: var(--b); border-radius: 999px; padding: 10px 16px; font-family: var(--as-font-body); font-size: 14px; background: var(--as-white); }
.as-wall .sub button { font-family: var(--as-font-display); font-weight: 700; font-size: 14px; background: var(--as-black); color: var(--as-cream); border: var(--b); border-radius: 999px; padding: 10px 20px; cursor: pointer; }

/* --- il muro è vuoto --- */
.as-wall .empty { grid-column: 1 / -1; text-align: center; padding: 60px 20px; font-size: 16px; opacity: .6; }

/* --- tablet: 6 colonne --- */
@media (max-width: 900px) {
	.as-wall .wall { grid-template-columns: repeat(6, 1fr); }
	.as-wall .sp8, .as-wall .sp7 { grid-column: span 6; }
	.as-wall .sp6, .as-wall .sp5, .as-wall .sp4, .as-wall .sp3 { grid-column: span 3; }
	.as-wall .lead { grid-template-columns: 1fr; }
	.as-wall .lead .thumb { aspect-ratio: 16/9; border-right: 0; border-bottom: var(--b); border-radius: 20px 20px 0 0; }
	.as-wall .lead h3 { font-size: 26px; }
}

/* --- mobile: 2 colonne, Reads ed Evidence a tutta larghezza --- */
@media (max-width: 620px) {
	.as-wall { padding: 22px 0 70px; }
	.as-wall .wrap { padding: 0 14px; }
	.as-wall .wall { grid-template-columns: repeat(2, 1fr); gap: 26px 12px; }

	.as-wall .lead, .as-wall .sp5, .as-wall .sp7, .as-wall .ev, .as-wall .sub { grid-column: span 2; }
	.as-wall .wet, .as-wall .clip, .as-wall .mani { grid-column: span 1; }

	.as-wall .top h1 { font-size: 44px; }
	.as-wall .filters { gap: 6px; margin-bottom: 24px; }
	.as-wall .f { font-size: 12.5px; padding: 6px 13px; box-shadow: 2px 2px 0 var(--as-black); }

	.as-wall .patch { box-shadow: 4px 4px 0 var(--as-black); }
	.as-wall .body { padding: 15px; }
	.as-wall .body h3 { font-size: 17px; margin: 8px 0 5px; }
	.as-wall .body p { font-size: 12.8px; }
	.as-wall .lead .body { padding: 20px; }
	.as-wall .lead h3 { font-size: 23px; }

	.as-wall .wet .body { flex-direction: column; gap: 10px; padding: 15px; }
	.as-wall .wet .ph { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 13px; }
	.as-wall .wet h4 { font-size: 16px; margin-top: 4px; }
	.as-wall .wet .role { font-size: 9.5px; margin: 2px 0 6px; }
	.as-wall .wet p { font-size: 12.4px; }
	.as-wall .wet .when { font-size: 10px; margin-top: 8px; }

	.as-wall .clip .body { padding: 16px 14px 15px; }
	.as-wall .clip h4 { font-size: 13.8px; margin: 6px 0 9px; }
	.as-wall .clip .take { font-size: 12.2px; padding-left: 10px; }
	.as-wall .clip .out { font-size: 11px; margin-top: 10px; }
	.as-wall .clip::before { width: 92px; height: 38px; top: -18px; }

	.as-wall .mani { padding: 18px 16px; }
	.as-wall .mani p { font-size: 16.5px; line-height: 1.28; margin-top: 11px; }
	.as-wall .mani cite { font-size: 9.5px; margin-top: 11px; }

	.as-wall .tag { font-size: 9.5px; padding: 2px 8px; }
	.as-wall .ev .cap { padding: 13px; }
	.as-wall .ev .cap b { font-size: 15px; }
	.as-wall .ev .cap span { font-size: 11.5px; }
	.as-wall .sub { padding: 20px 18px; }
	.as-wall .sub h3 { font-size: 20px; }
}

/* --- schermi molto stretti: tutto su una colonna --- */
@media (max-width: 360px) {
	.as-wall .wall { grid-template-columns: 1fr; gap: 24px; }
	.as-wall .lead, .as-wall .sp5, .as-wall .sp7, .as-wall .ev,
	.as-wall .sub, .as-wall .wet, .as-wall .clip, .as-wall .mani { grid-column: span 1; }
	.as-wall .patch.tA, .as-wall .patch.tB, .as-wall .patch.tC { transform: none; }
}

/* --- chi ha chiesto meno movimento --- */
@media (prefers-reduced-motion: reduce) {
	.as-wall .f { transition: none; }
	.as-wall .patch.tA, .as-wall .patch.tB, .as-wall .patch.tC { transform: none; }
}