/*
 * ON Gagliardetti: cinque gagliardetti appesi ai cordini, un po' storti.
 * Prototipo: scene.css 440-449 (.gag-row, .gag, .patch, .sotto), 486, 649-651, 660, 945.
 * Mobile first: le regole senza media query valgono per il telefono (fila che scorre).
 *
 * Di base (scene.css 649-651) il gagliardetto ricamato è alto come la fila e largo secondo il
 * file: i cordini restano ad altezze diverse come nel prototipo.
 * Con la toppa (.on-gag__obj--toppa) il gagliardetto vuoto (900×1828, 0,4925:1) ha la finestra
 * trasparente: la toppa (testo vero) sta sotto l'immagine e si vede attraverso, nelle
 * proporzioni di scene.css 442-444.
 */

.on-gag {
	--on-gag-titolo: var(--on-ink);
	--on-gag-testo: var(--on-ink-2);
	/* Altezza del gagliardetto: 64vw sul telefono, clamp(260px, 26vw, 400px) sul computer */
	--on-gag-h: 64vw;
	min-width: 0;
}

.on-tone-dark .on-gag,
[data-tone="dark"] .on-gag {
	--on-gag-titolo: var(--on-white);
	--on-gag-testo: var(--on-ink-inv-2);
}

/* Due classi: la lista del kit o del tema non deve rimettere numeri e rientri */
.on-gag .on-gag__fila {
	display: flex;
	gap: 18px;
	margin: 0 calc(-1 * var(--on-gutter));
	padding: 10px var(--on-gutter) 20px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	list-style: none;
	scroll-padding-inline: var(--on-gutter);
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.on-gag .on-gag__fila::-webkit-scrollbar {
	display: none;
}

.on-gag .on-gag__fila:focus-visible {
	outline: 2px solid var(--on-green);
	outline-offset: 2px;
}

.on-gag .on-gag__voce {
	flex: 0 0 48vw;
	margin: 0;
	padding: 0;
	scroll-snap-align: start;
}

.on-gag .on-gag__link {
	display: block;
	color: var(--on-gag-titolo);
	text-decoration: none;
}

.on-gag a.on-gag__link:focus-visible {
	outline: 2px solid var(--on-green);
	outline-offset: 6px;
}

/* Il gagliardetto appeso: ruota attorno al chiodo (in alto al centro), scene.css 442 e 649 */
.on-gag .on-gag__obj {
	position: relative;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	max-width: 100%;
	height: var(--on-gag-h);
	transform: rotate(var(--on-gag-r, 0deg));
	transform-origin: 50% 2%;
	filter: drop-shadow(0 22px 18px color-mix(in srgb, var(--on-shade) 25%, transparent));
}

/* scene.css 650 e 945: alto come la fila, largo secondo il file, mai oltre la colonna */
.on-gag .on-gag__telo {
	position: static;
	width: auto;
	max-width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Gagliardetto vuoto con la toppa in testo: proporzioni fisse, la toppa sotto la finestra */
.on-gag .on-gag__obj--toppa {
	display: block;
	width: min(100%, calc(var(--on-gag-h) * .4925));
	height: auto;
	margin-inline: auto;
	aspect-ratio: .4925;
}

.on-gag .on-gag__obj--toppa .on-gag__telo {
	position: absolute;
	inset: 0;
	z-index: 2;
	width: 100%;
	max-width: none;
}

/* La toppa: la finestra del gagliardetto (scene.css 444), testo che scala con la toppa */
.on-gag .on-gag__toppa {
	position: absolute;
	top: 32.39%;
	left: 22.63%;
	z-index: 1;
	display: grid;
	place-content: center;
	width: 54.45%;
	height: 34.54%;
	background: linear-gradient(160deg, var(--on-cream), var(--on-paper-2));
	box-shadow: inset 0 0 12px color-mix(in srgb, var(--on-shade) 18%, transparent);
	text-align: center;
	container-type: inline-size;
}

.on-gag .on-gag__anno {
	color: var(--on-green-ink);
	font-family: var(--on-font-display);
	font-size: 36cqw;
	font-weight: 700;
	letter-spacing: -.01em;
	line-height: .9;
}

.on-gag .on-gag__luogo {
	margin-top: 4cqw;
	color: var(--on-ink);
	font-family: var(--on-font-cond);
	font-size: 13cqw;
	letter-spacing: .06em;
	line-height: 1.1;
	text-transform: uppercase;
	overflow-wrap: anywhere;
}

.on-gag .on-gag__sotto {
	display: block;
	margin-top: 18px;
	color: var(--on-gag-testo);
	font-size: var(--on-fs-small);
	line-height: 1.5;
}

.on-gag .on-gag__titolo {
	display: block;
	margin: 0 0 6px;
	color: var(--on-gag-titolo);
	font-family: var(--on-font-cond);
	font-size: clamp(18px, 1.6vw, 24px);
	font-weight: 400;
	letter-spacing: normal;
	line-height: 1.12;
	text-transform: uppercase;
}

.on-gag .on-gag__testo {
	margin: 0;
	color: inherit;
	font-size: inherit;
	line-height: inherit;
}

@media (min-width: 901px) {
	.on-gag {
		--on-gag-h: clamp(260px, 26vw, 400px);
	}

	.on-gag .on-gag__fila {
		display: grid;
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: clamp(14px, 2vw, 32px);
		align-items: start;
		margin: 0;
		padding: 10px 0 0;
		overflow: visible;
	}
}

/*
 * Movimento (solo con html.on-motion e dopo che il JS si è armato): i gagliardetti partono
 * nascosti e il JS li fa entrare dondolando. Senza JS, con il movimento ridotto o
 * nell'editor sono già appesi.
 */
.on-motion .on-gag.is-armato:not(.is-entrato) .on-gag__obj {
	opacity: 0;
}

.on-motion .on-gag .on-gag__obj {
	will-change: transform;
}