/* INP Progetti – griglia, card e filtri.
   Colori e font ripresi dal sito attuale. Per cambiarli basta modificare le variabili. */
.inp-progetti {
	--inp-blu: #27266a;
	--inp-testo: #020222;
	--inp-grigio: #666;
	--inp-arancio: #e19d4d;
	--inp-arancio-scuro: #a8661b; /* versione accessibile per testo piccolo */
	--inp-sfondo: #f5f3ee;
	--inp-bianco: #fff;
	--inp-radius: 10px;
	--inp-ombra: 0 24px 48px rgba(2, 2, 34, .07);
	--inp-gap: clamp(20px, 3vw, 40px);
	--inp-font: "Noto Sans", Helvetica, Arial, sans-serif;
	--inp-font-titoli: "Roboto Slab", Georgia, serif;

	font-family: var(--inp-font);
	color: var(--inp-testo);
	width: 100%;
}
.inp-progetti *, .inp-progetti *::before, .inp-progetti *::after { box-sizing: border-box; }
.inp-progetti [hidden] { display: none !important; }

.inp-progetti__titolo {
	font-family: var(--inp-font-titoli);
	font-weight: 500;
	color: var(--inp-blu);
	font-size: clamp(30px, 4vw, 43px);
	line-height: 1.1;
	margin: 0 0 24px;
	padding: 0;
}

/* ------------------------------ Filtri ------------------------------ */
.inp-filtri {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 32px;
	align-items: center;
	margin: 0 0 var(--inp-gap);
}
.inp-filtri__gruppo {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}
.inp-filtri__label {
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--inp-blu);
	margin-right: 4px;
}
.inp-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 36px;
	padding: 6px 14px;
	border: 1.5px solid var(--inp-blu);
	border-radius: 999px;
	background: var(--inp-bianco);
	color: var(--inp-blu);
	font: 600 13px/1.2 var(--inp-font);
	cursor: pointer;
	transition: background-color .15s, color .15s;
}
.inp-chip:hover { background: #ecebf5; }
.inp-chip:focus-visible { outline: 3px solid var(--inp-arancio); outline-offset: 2px; }
.inp-chip.is-attivo { background: var(--inp-blu); color: var(--inp-bianco); }
.inp-chip.is-attivo .inp-chip__icona { filter: brightness(0) invert(1); }
.inp-chip__icona { width: 18px; height: 18px; object-fit: contain; }
.inp-filtri__conteggio {
	margin: 0;
	padding: 0;
	font-size: 13px;
	color: var(--inp-grigio);
}

/* ------------------------------ Griglia ----------------------------- */
.inp-progetti__griglia,
.inp-progetti .inp-card__aree {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}
.inp-progetti__griglia {
	display: grid;
	/* Massimo 3 colonne; scende a 2 o 1 quando le card sarebbero più strette di 290px. */
	grid-template-columns: repeat(auto-fill, minmax(max(min(100%, 290px), calc((100% - 2 * var(--inp-gap)) / 3)), 1fr));
	gap: var(--inp-gap);
}

/* -------------------------------- Card ------------------------------ */
.inp-card {
	display: flex;
	flex-direction: column;
	background: var(--inp-bianco);
	border-radius: var(--inp-radius);
	box-shadow: var(--inp-ombra);
	overflow: hidden;
	margin: 0 !important;
	padding: 0 !important;
}
.inp-card::before { content: none !important; } /* niente pallino degli elenchi Divi */

.inp-card__media {
	aspect-ratio: 938 / 550;
	background: var(--inp-sfondo);
	overflow: hidden;
}
.inp-card__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.inp-card__segnaposto {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background:
		radial-gradient(circle at 80% 20%, rgba(255, 255, 255, .55) 0 18%, transparent 19%),
		radial-gradient(circle at 15% 85%, rgba(255, 255, 255, .35) 0 22%, transparent 23%),
		var(--inp-segnaposto, #e9e6f3);
}
.inp-card__segnaposto img { width: 34%; max-width: 120px; height: auto; }
.inp-card__segnaposto--cittadinanza-globale { --inp-segnaposto: #e3eef6; }
.inp-card__segnaposto--inclusione { --inp-segnaposto: #e9e6f3; }
.inp-card__segnaposto--orientamento { --inp-segnaposto: #e6ebfa; }
.inp-card__segnaposto--coesione-sociale { --inp-segnaposto: #f6ece0; }

.inp-card__corpo {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 24px 28px 28px;
}

.inp-progetti .inp-card__aree {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 14px !important;
}
.inp-pill {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 10px 3px 7px !important;
	border: 1.5px solid var(--inp-blu);
	border-radius: 999px;
	font: 600 11.5px/1.3 var(--inp-font);
	color: var(--inp-blu);
	white-space: nowrap;
}
.inp-pill::before { content: none !important; }
.inp-pill__icona { width: 14px; height: 14px; object-fit: contain; }

.inp-card__periodo {
	margin: 0 0 6px !important;
	padding: 0 !important;
	font: 500 14px/1.5 var(--inp-font);
	color: var(--inp-arancio-scuro);
}
.inp-card__periodo em { font-style: italic; white-space: nowrap; }

.inp-card__titolo {
	font-family: var(--inp-font-titoli) !important;
	font-weight: 500 !important;
	font-size: 21px !important;
	line-height: 1.3 !important;
	color: var(--inp-blu) !important;
	margin: 0 0 12px !important;
	padding: 0 !important;
}

.inp-card__rete {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0 0 12px !important;
	padding: 0 !important;
	font-size: 13px;
	line-height: 1.5;
	color: var(--inp-grigio);
}
.inp-card__rete strong { color: var(--inp-blu); font-weight: 600; }

.inp-card__testo {
	font-size: 14px;
	line-height: 1.6;
}
.inp-card__testo p { margin: 0 0 12px; padding: 0; }
.inp-card__testo p:last-child { margin-bottom: 0; }
.inp-card__testo strong { font-weight: 700; color: var(--inp-blu); }
.inp-card__testo a { color: var(--inp-blu); text-decoration: underline; text-underline-offset: 2px; }

.inp-card__link {
	margin: auto 0 0 !important;
	padding: 18px 0 0 !important;
}

/* Eventi: card compatte, senza immagine se non c'è */
.inp-progetti--evento { margin-top: calc(var(--inp-gap) * 2); }
.inp-card--compatta .inp-card__corpo { padding: 20px 24px 22px; }
.inp-card--compatta .inp-card__titolo { font-size: 18px !important; }
.inp-card--compatta .inp-card__testo { font-size: 13.5px; }

/* ------------------------------ Bottoni ----------------------------- */
.inp-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 15px 24px 13px;
	border-radius: 37px;
	background: var(--inp-arancio);
	color: #fff !important;
	font: 700 14px/1.4 var(--inp-font);
	text-transform: uppercase;
	text-decoration: none !important;
	transition: background-color .15s, transform .15s;
}
.inp-btn:hover { background: #cf8a38; }
.inp-btn:focus-visible { outline: 3px solid var(--inp-blu); outline-offset: 3px; }
.inp-btn--secondario { background: transparent; color: var(--inp-arancio-scuro) !important; box-shadow: inset 0 0 0 2px var(--inp-arancio); }
.inp-btn--secondario:hover { background: var(--inp-arancio); color: #fff !important; }

.inp-btn--piccolo {
	padding: 0;
	background: none;
	border-radius: 0;
	color: var(--inp-arancio-scuro) !important;
	font-size: 15px;
	text-transform: none;
}
.inp-btn--piccolo::after { content: "→"; transition: transform .15s; }
.inp-btn--piccolo:hover { background: none; color: var(--inp-blu) !important; }
.inp-btn--piccolo:hover::after { transform: translateX(4px); }

.inp-progetti__azioni {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
	margin-top: calc(var(--inp-gap) * 1.2);
}

.inp-progetti__vuoto {
	text-align: center;
	color: var(--inp-grigio);
	padding: 40px 0;
}

.inp-progetti .screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	.inp-progetti * { transition: none !important; }
}