.abc-portfolio-filters {
	--abc-active-color: #FF9044;
	--abc-text: #222222;
	--abc-columns: 4;
}

/* ---------- Barra filtri ----------
   Sfondo bianco pieno per "tagliare" il beige della sezione Elementor:
   dietro alla barra resta bianco, il beige si vede solo intorno/sotto
   alla griglia dei progetti. Il padding qui sotto è solo un default: se
   editi il widget in Elementor, pestaña "Estilo" > "Barra Filtri" tenés
   un control "Padding barra filtri" que pisa estos valores sin tocar
   código (útil porque el padding horizontal por defecto de un plugin
   casi nunca coincide exactamente con el margen del resto del contenido
   de la página). */

.abc-filter-bar {
	display: flex;
	flex-direction: column;
	gap: 36px;
	background: #FFFFFF;
	padding: 28px 0;
	margin: 0 0 32px;
}

.abc-filter-group {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px 16px;
}

/* Titulo de cada grupo de filtro (ej. "RICERCA PER ORIZZONTI DI LAVORO").
   Valores por defecto inspirados en el h3 del sitio (brandon-grotesque);
   ajustable sin tocar código desde Elementor > Estilo > "Tipografia
   Titolo Filtro". */
.abc-filter-label {
	display: block;
	font-family: 'brandon-grotesque', sans-serif;
	font-size: 25px;
	font-weight: 200;
	text-transform: uppercase;
	color: #222222;
	flex-basis: 100%;
	margin-bottom: 12px;
}

.abc-filter-buttons {
	display: flex;
	flex-wrap: wrap;
	row-gap: 10px;
	column-gap: 24px;
}

/* Bottoni-testo sottolineati (no box/pill), como el resto de los enlaces
   de categoría del sitio. NO van en mayúscula (solo el título del grupo
   va en mayúscula). Ajustable sin tocar código desde Elementor > Estilo >
   "Tipografia Bottoni Filtro". */
.abc-filter-btn {
	appearance: none;
	cursor: pointer;
	background: none !important;
	border: none !important;
	border-radius: 0 !important;
	margin: 0;
	padding: 2px 0 !important;
	font-family: 'adelle-sans', sans-serif;
	font-size: 19px;
	font-weight: 400;
	line-height: 1.3;
	text-transform: none;
	text-decoration: underline;
	text-underline-offset: 3px;
	color: var(--abc-text) !important;
	transition: color .15s ease;
	white-space: nowrap;
}

/* Active/hover: solo cambia el color del texto, nada más (sin negrita,
   sin subrayado más grueso). */
.abc-filter-btn:hover {
	color: var(--abc-active-color) !important;
}

.abc-filter-btn.is-active {
	color: var(--abc-active-color) !important;
}

/* ---------- "Ricerca per orizzonti di lavoro": bottoni a riquadro ----------
   Solo questo gruppo (data-key="orizzonti") torna al vecchio stile a
   "chip" con bordo, invece del testo sottolineato usato per "Altri
   filtri". Selettore per attributo -> più specifico delle regole sopra,
   quindi le sovrascrive senza toccare "Altri filtri". Colore, tipografia
   e padding sono editabili da Elementor > Estilo > "Bottoni Ricerca per
   Orizzonti", senza toccare codice. */

.abc-filter-group[data-key="orizzonti"] .abc-filter-buttons {
	row-gap: 10px;
	column-gap: 10px;
}

.abc-filter-group[data-key="orizzonti"] .abc-filter-btn {
	background: #FFFFFF !important;
	border: 1px solid #222222 !important;
	border-radius: 0 !important;
	padding: 10px 20px !important;
	font-family: 'adelle-sans', sans-serif;
	font-size: 14px;
	font-weight: 400;
	text-transform: uppercase;
	text-decoration: none !important;
	color: #222222 !important;
}

.abc-filter-group[data-key="orizzonti"] .abc-filter-btn:hover {
	border-color: #FF9044 !important;
	color: #222222 !important;
}

.abc-filter-group[data-key="orizzonti"] .abc-filter-btn.is-active {
	background: #FF9044 !important;
	border-color: #FF9044 !important;
	color: #222222 !important;
}

/* ---------- Fondo risultati + griglia progetti ----------
   El beige queda solo acá (detrás del grid), separado del blanco de la
   barra de filtros. Va de punta a punta de la pantalla (edge-to-edge),
   independientemente de qué tan ancho sea el contenedor de Elementor
   donde vive el widget; el contenido de adentro (grid, mensaje vacío)
   se mantiene centrado y alineado con el resto de la página gracias a
   ".abc-results-inner". Color, padding y ancho máximo del contenido son
   editables desde Elementor > Estilo > "Sfondo Risultati", sin tocar
   código.

   El "body:has(...)" de abajo es la red de seguridad para el bug clásico
   de estas técnicas full-bleed (el 100vw incluye el ancho de la barra de
   scroll vertical, lo que genera un scroll horizontal fantasma de unos
   pocos píxeles si no se corrige). Solo afecta a páginas que tengan este
   widget. */

body:has(.abc-results-bg) {
	overflow-x: hidden;
}

.abc-results-bg {
	background: #F5F3EF;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: 32px 0;
}

.abc-results-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
	box-sizing: border-box;
}

@media (max-width: 600px) {
	.abc-results-inner {
		padding: 0 16px;
	}
}

.abc-portfolio-grid {
	display: grid;
	grid-template-columns: repeat(var(--abc-columns), 1fr);
	gap: 24px;
}

@media (max-width: 1024px) {
	.abc-portfolio-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.abc-portfolio-grid {
		grid-template-columns: 1fr;
	}
	.abc-filter-bar {
		padding: 20px 0;
	}
}

.abc-card {
	display: block;
	text-decoration: none;
	color: inherit;
	border-radius: 6px;
	overflow: hidden;
	background: #fff;
}

.abc-card-media {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.abc-card-media img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: center !important;
	display: block;
}

.abc-card-body {
	padding: 14px 2px 0;
}

.abc-card-meta {
	display: block;
	font-size: 11px;
	font-weight: 400;
	text-transform: uppercase;
	color: #8a8378;
	margin-bottom: 4px;
}

.abc-card-title {
	margin: 0;
	font-size: 17px;
	font-weight: 400;
	line-height: 1.3;
	color: var(--abc-text);
}

.abc-card[hidden] {
	display: none;
}

.abc-empty {
	grid-column: 1 / -1;
	text-align: center;
	color: #8a8378;
	padding: 40px 0;
}

.abc-empty-filtered {
	margin-top: 0;
}