/* AMEIr Testimonianze – post-it */

@font-face {
	font-family: "Ameir Caveat";
	src: url("../fonts/caveat-latin.woff2") format("woff2");
	font-weight: 400 700;
	font-display: swap;
}

.ameir-t-rotatore,
.ameir-t-bacheca,
.ameir-t-form-box {
	--ameir-t-accento: #639e1c;
	--ameir-t-accento-scuro: #4d830b;
	--ameir-t-inchiostro: #2f3140;
	--ameir-t-ombra: 0 1px 1px rgba(0, 0, 0, .06), 0 12px 20px -8px rgba(0, 0, 0, .28);
}

.ameir-t--giallo  { --ameir-t-carta: #fff4a3; }
.ameir-t--rosa    { --ameir-t-carta: #ffd1e1; }
.ameir-t--azzurro { --ameir-t-carta: #cfe8ff; }
.ameir-t--verde   { --ameir-t-carta: #d6f0c2; }
.ameir-t--arancio { --ameir-t-carta: #ffdcb0; }
.ameir-t--lilla   { --ameir-t-carta: #e4d7ff; }

/* ---------- Post-it ---------- */

.ameir-t-postit {
	position: relative;
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 2.6rem 1.8rem 1.6rem;
	background: var(--ameir-t-carta, #fff4a3);
	/* leggera sfumatura in basso, come la carta che si solleva */
	background-image: linear-gradient(180deg, rgba(255, 255, 255, .25) 0%, rgba(255, 255, 255, 0) 30%, rgba(0, 0, 0, .035) 100%);
	color: var(--ameir-t-inchiostro);
	box-shadow: var(--ameir-t-ombra);
	transform: rotate(var(--ameir-t-tilt, -1.5deg));
	text-align: left;
}

/* nastro adesivo */
.ameir-t-postit::before {
	content: "";
	position: absolute;
	top: -12px;
	left: 50%;
	width: 96px;
	height: 26px;
	margin-left: -48px;
	background: rgba(255, 255, 255, .55);
	border-left: 1px dashed rgba(0, 0, 0, .06);
	border-right: 1px dashed rgba(0, 0, 0, .06);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
	transform: rotate(-3deg);
}

.ameir-t-postit .ameir-t-testo {
	flex: 1;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font-family: "Ameir Caveat", "Segoe Print", "Bradley Hand", cursive;
	font-size: 1.6rem;
	font-style: normal;
	font-weight: 500;
	line-height: 1.25;
	color: inherit;
}

.ameir-t-postit .ameir-t-testo::before {
	content: "\201C";
	display: block;
	height: .55em;
	margin-bottom: .1em;
	font-family: Georgia, serif;
	font-size: 3rem;
	line-height: 1;
	color: rgba(0, 0, 0, .18);
}

.ameir-t-postit .ameir-t-testo p {
	margin: 0 0 .5em;
}

.ameir-t-postit .ameir-t-testo p:last-child {
	margin-bottom: 0;
}

.ameir-t-autore {
	margin-top: 1.2rem;
	padding-top: .8rem;
	border-top: 1px solid rgba(0, 0, 0, .1);
	font-size: .95rem;
	line-height: 1.35;
}

.ameir-t-nome {
	display: block;
	font-weight: 700;
}

.ameir-t-dettaglio {
	display: block;
	opacity: .72;
	font-size: .88rem;
}

/* ---------- Rotatore (home) ---------- */

.ameir-t-rotatore {
	/* --ameir-t-col-d/t/m: post-it affiancati su desktop, tablet, telefono (impostati dallo shortcode) */
	--ameir-t-colonne: var(--ameir-t-col-d, 3);
	max-width: min(1400px, calc(var(--ameir-t-colonne) * 370px + 100px));
	margin: 0 auto;
	text-align: center;
}

.ameir-t-griglia {
	display: grid;
	grid-template-columns: repeat(var(--ameir-t-colonne), minmax(0, 1fr));
	gap: 2.6rem 2.8rem;
	padding: 1.8rem 1rem 0;
}

/* pile in eccesso rispetto alle colonne del dispositivo */
.ameir-t-rotatore[data-d="1"] .ameir-t-pila:nth-child(n+2),
.ameir-t-rotatore[data-d="2"] .ameir-t-pila:nth-child(n+3),
.ameir-t-rotatore[data-d="3"] .ameir-t-pila:nth-child(n+4),
.ameir-t-rotatore[data-d="4"] .ameir-t-pila:nth-child(n+5),
.ameir-t-rotatore[data-d="5"] .ameir-t-pila:nth-child(n+6) {
	display: none;
}

.ameir-t-pila {
	display: grid;
	position: relative;
}

/* foglietti sottostanti, per dare l'idea del blocchetto */
.ameir-t-pila--multipla::before,
.ameir-t-pila--multipla::after {
	content: "";
	grid-area: 1 / 1;
	box-shadow: var(--ameir-t-ombra);
}

.ameir-t-pila--multipla::before { background: #cfe8ff; transform: rotate(3.5deg) translate(8px, 5px); }
.ameir-t-pila--multipla::after  { background: #ffd1e1; transform: rotate(-3deg) translate(-7px, 7px); }
.ameir-t-pila--multipla:nth-child(3n+2)::before { background: #d6f0c2; }
.ameir-t-pila--multipla:nth-child(3n+2)::after  { background: #fff4a3; }
.ameir-t-pila--multipla:nth-child(3n)::before   { background: #ffdcb0; }
.ameir-t-pila--multipla:nth-child(3n)::after    { background: #e4d7ff; }

.ameir-t-pila .ameir-t-postit {
	grid-area: 1 / 1;
	z-index: 1;
	min-height: 340px;
	padding: 3rem 2.2rem 1.8rem;
}

.ameir-t-pila .ameir-t-postit .ameir-t-testo {
	font-size: 1.85rem;
}

.ameir-t-rotatore[data-d="1"] .ameir-t-pila .ameir-t-postit .ameir-t-testo {
	font-size: 2rem;
}

.ameir-t-rotatore[data-d="5"] .ameir-t-pila .ameir-t-postit .ameir-t-testo,
.ameir-t-rotatore[data-d="6"] .ameir-t-pila .ameir-t-postit .ameir-t-testo {
	font-size: 1.5rem;
}

.ameir-t-pila .ameir-t-autore {
	font-size: 1rem;
}

.ameir-t-pila--multipla .ameir-t-postit {
	opacity: 0;
	visibility: hidden;
	transform: rotate(-7deg) translate(-12px, 14px) scale(.96);
	transition: opacity .45s ease, transform .6s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .6s;
}

.ameir-t-pila--multipla .ameir-t-postit.is-attivo {
	z-index: 2;
	opacity: 1;
	visibility: visible;
	transform: rotate(var(--ameir-t-tilt, -1.5deg));
	transition-delay: .12s, .12s, 0s;
}

/* il foglietto che "si stacca" */
.ameir-t-pila--multipla .ameir-t-postit.is-uscente {
	z-index: 3;
	visibility: visible;
	opacity: 0;
	transform: rotate(14deg) translate(70px, -40px);
	transition: opacity .5s ease, transform .6s cubic-bezier(.5, 0, .75, 0), visibility 0s linear .6s;
}

.ameir-t-controlli {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .6rem;
	margin-top: 2.2rem;
}

.ameir-t-rotatore .ameir-t-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 1.5px solid var(--ameir-t-accento);
	border-radius: 999px;
	background: transparent;
	color: var(--ameir-t-accento-scuro);
	font-size: .95rem;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: background-color .2s, color .2s;
}

.ameir-t-rotatore .ameir-t-btn--testo {
	width: auto;
	padding: 0 1.2rem 0 1rem;
}

.ameir-t-rotatore .ameir-t-btn:hover,
.ameir-t-rotatore .ameir-t-btn:focus-visible {
	background: var(--ameir-t-accento);
	color: #fff;
}

.ameir-t-rotatore .ameir-t-btn:focus-visible {
	outline: 2px solid var(--ameir-t-accento-scuro);
	outline-offset: 2px;
}

.ameir-t-btn svg {
	width: 18px;
	height: 18px;
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ameir-t-btn .ameir-t-ico-avvia {
	fill: currentColor;
	stroke-width: 1.5;
}

.ameir-t-btn .ameir-t-ico-avvia,
.ameir-t-btn[aria-pressed="true"] .ameir-t-ico-pausa {
	display: none;
}

.ameir-t-btn[aria-pressed="true"] .ameir-t-ico-avvia {
	display: block;
}

.ameir-t-link {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .4rem 1.6rem;
	margin: 1.2rem 0 0;
	font-weight: 600;
}

/* tablet (stessi breakpoint di Elementor) */
@media (max-width: 1024px) {
	.ameir-t-rotatore {
		--ameir-t-colonne: var(--ameir-t-col-t, 2);
	}

	.ameir-t-rotatore[data-t] .ameir-t-pila:nth-child(n) {
		display: grid;
	}

	.ameir-t-rotatore[data-t="1"] .ameir-t-pila:nth-child(n+2),
	.ameir-t-rotatore[data-t="2"] .ameir-t-pila:nth-child(n+3),
	.ameir-t-rotatore[data-t="3"] .ameir-t-pila:nth-child(n+4),
	.ameir-t-rotatore[data-t="4"] .ameir-t-pila:nth-child(n+5),
	.ameir-t-rotatore[data-t="5"] .ameir-t-pila:nth-child(n+6) {
		display: none;
	}

	.ameir-t-griglia {
		gap: 2.2rem 2rem;
	}
}

/* telefono */
@media (max-width: 767px) {
	.ameir-t-rotatore {
		--ameir-t-colonne: var(--ameir-t-col-m, 1);
	}

	.ameir-t-rotatore[data-m] .ameir-t-pila:nth-child(n) {
		display: grid;
	}

	.ameir-t-rotatore[data-m="1"] .ameir-t-pila:nth-child(n+2),
	.ameir-t-rotatore[data-m="2"] .ameir-t-pila:nth-child(n+3),
	.ameir-t-rotatore[data-m="3"] .ameir-t-pila:nth-child(n+4),
	.ameir-t-rotatore[data-m="4"] .ameir-t-pila:nth-child(n+5),
	.ameir-t-rotatore[data-m="5"] .ameir-t-pila:nth-child(n+6) {
		display: none;
	}

	.ameir-t-griglia {
		gap: 1.6rem 1.2rem;
		padding: 1.4rem .5rem 0;
	}

	.ameir-t-pila .ameir-t-postit {
		min-height: 280px;
		padding: 2.6rem 1.6rem 1.5rem;
	}

	.ameir-t-pila .ameir-t-postit .ameir-t-testo,
	.ameir-t-rotatore[data-d] .ameir-t-pila .ameir-t-postit .ameir-t-testo {
		font-size: 1.6rem;
	}

	.ameir-t-rotatore[data-m="2"] .ameir-t-pila .ameir-t-postit .ameir-t-testo,
	.ameir-t-rotatore[data-m="3"] .ameir-t-pila .ameir-t-postit .ameir-t-testo {
		font-size: 1.3rem;
	}

	.ameir-t-rotatore[data-m="2"] .ameir-t-pila .ameir-t-postit,
	.ameir-t-rotatore[data-m="3"] .ameir-t-pila .ameir-t-postit {
		min-height: 220px;
		padding: 2.2rem 1rem 1.1rem;
	}
}

/* ---------- Bacheca (pagina testimonianze) ---------- */

.ameir-t-bacheca {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 2.6rem 2rem;
	padding: 1.5rem .5rem;
	align-items: start;
}

.ameir-t-bacheca .ameir-t-postit {
	transition: transform .25s ease, box-shadow .25s ease;
}

.ameir-t-bacheca .ameir-t-postit:hover {
	transform: rotate(0deg) scale(1.02);
	box-shadow: 0 1px 1px rgba(0, 0, 0, .06), 0 18px 28px -10px rgba(0, 0, 0, .32);
}

.ameir-t-bacheca .ameir-t-testo {
	font-size: 1.5rem;
}

.ameir-t-paginazione {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .4rem;
	margin: 1.5rem 0;
}

.ameir-t-paginazione .page-numbers {
	padding: .35rem .75rem;
	border-radius: 4px;
}

.ameir-t-paginazione .page-numbers.current {
	background: #639e1c;
	color: #fff;
}

.ameir-t-vuoto {
	text-align: center;
	opacity: .8;
}

/* ---------- Modulo ---------- */

.ameir-t-form-box {
	max-width: 640px;
	margin: 2rem auto;
	scroll-margin-top: 120px;
}

.ameir-t-form-titolo {
	margin-bottom: 1rem;
}

.ameir-t-campo {
	margin: 0 0 1.2rem;
}

.ameir-t-campo > label,
.ameir-t-campo > legend {
	display: block;
	margin-bottom: .35rem;
	font-weight: 600;
}

.ameir-t-form input[type="text"],
.ameir-t-form input[type="email"],
.ameir-t-form textarea {
	width: 100%;
	box-sizing: border-box;
}

.ameir-t-campo small,
.ameir-t-nota {
	display: block;
	margin-top: .3rem;
	font-size: .85rem;
	opacity: .75;
}

.ameir-t-form .ameir-t-colori {
	min-width: 0;
	margin: 0 0 1.2rem;
	padding: 0;
	border: 0;
}

.ameir-t-form .ameir-t-colori legend {
	padding: 0;
}

.ameir-t-colori-lista {
	display: flex;
	flex-wrap: wrap;
	gap: .7rem;
	padding: .3rem .2rem;
}

.ameir-t-form .ameir-t-colore {
	display: block;
	position: relative;
	margin: 0;
	cursor: pointer;
}

.ameir-t-colore input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.ameir-t-colore-campione {
	display: block;
	width: 38px;
	height: 38px;
	background: var(--ameir-t-carta);
	box-shadow: 0 2px 5px rgba(0, 0, 0, .18);
	transform: rotate(-3deg);
	transition: transform .15s;
}

.ameir-t-colore:nth-of-type(even) .ameir-t-colore-campione {
	transform: rotate(3deg);
}

.ameir-t-colore input:checked + .ameir-t-colore-campione {
	transform: rotate(0) scale(1.12);
	outline: 3px solid var(--ameir-t-accento);
	outline-offset: 2px;
}

.ameir-t-colore input:focus-visible + .ameir-t-colore-campione {
	outline: 3px solid var(--ameir-t-accento-scuro);
	outline-offset: 2px;
}

.ameir-t-consenso label {
	display: flex;
	gap: .6rem;
	align-items: flex-start;
	font-weight: 400;
}

.ameir-t-consenso input {
	margin-top: .3rem;
	flex: none;
}

.ameir-t-trappola {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.ameir-t-messaggio {
	margin-bottom: 1.4rem;
	padding: 1rem 1.2rem;
	border-left: 4px solid;
}

.ameir-t-messaggio--ok {
	background: #eef7e4;
	border-color: #639e1c;
}

.ameir-t-messaggio--errore {
	background: #fdecec;
	border-color: #c62828;
}

.ameir-t-messaggio p,
.ameir-t-messaggio ul {
	margin: 0;
}

.ameir-t-messaggio ul {
	margin-top: .4rem;
	padding-left: 1.2rem;
}

/* ---------- Responsive e accessibilità ---------- */

@media (max-width: 544px) {
	.ameir-t-postit {
		padding: 2.2rem 1.3rem 1.3rem;
	}

	.ameir-t-postit .ameir-t-testo,
	.ameir-t-bacheca .ameir-t-testo {
		font-size: 1.4rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ameir-t-pila--multipla .ameir-t-postit,
	.ameir-t-pila--multipla .ameir-t-postit.is-attivo,
	.ameir-t-pila--multipla .ameir-t-postit.is-uscente,
	.ameir-t-bacheca .ameir-t-postit {
		transition: opacity .2s linear, visibility 0s linear .2s;
		transform: rotate(var(--ameir-t-tilt, -1.5deg));
	}
}