/*!
 * installacions.css
 *
 * Hub /installacions/ — pattern nou.
 * El grid d'icones és el component diferenciador d'aquest hub respecte
 * a la plantilla d'entorn. La resta de blocs (hero, intro, text+imatge,
 * CTA) reutilitza les classes .er-env-* existents.
 *
 * Decisions:
 *  · Line-art en --tinta (#2A2520), trazo medio (stroke 1.5).
 *  · Hover: icone i label canvien a --funcional (#03693A).
 *  · Sense contenidors, sense fons, sense ombres. Cantonades rectes.
 *  · 4 columnes desktop, 2 mobile.
 *  · Espai generós entre items.
 *
 * Reutilitzable: en el futur el grid pot aparèixer al footer o a la
 * home com a "Tot el que hi ha al càmping". Per això les classes són
 * `.er-icon-grid` (genèriques), no `.er-installacions-grid`.
 */

.er-icon-grid {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0;
}
/* 7 icones en una sola línia (desktop) — strip horitzontal centrat.
   Coincideix amb el tractament d'icones de la home: verd funcional
   per a l'icone, tinta per al label.

   En mobile, flex-wrap permet caure a 2 files quan no caben les 7. */
.er-icon-grid__items {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	gap: 1.5rem clamp(1rem, 3vw, 2rem);
}
@media (min-width: 720px) {
	.er-icon-grid__items {
		flex-wrap: nowrap;
		gap: clamp(1rem, 3vw, 2.5rem);
	}
}

.er-icon-grid__item {
	margin: 0;
	flex: 0 0 auto;
	min-width: 80px;
}
.er-icon-grid__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	text-decoration: none;
	padding: 0.5rem 0;
}
/* Icones com a CSS mask — usen els SVG filled del kit de marca
   (a /wp-content/uploads/). La màscara permet pintar amb el color
   sòlid via background-color sense modificar els fitxers SVG.
   Resultat: silueta filled en verd funcional, hover verd marca.
   Mateix tractament que la web original. */
.er-icon-grid__icon {
	display: inline-block;
	width: 48px;
	height: 48px;
	background-color: #03693A; /* verd funcional */
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	transition: background-color 0.2s ease;
}
/* Modifiers per icona — apunten al kit SVG del client a /uploads/ */
.er-icon-grid__icon--piscina    { -webkit-mask-image: url('/wp-content/uploads/swimming-pool.svg'); mask-image: url('/wp-content/uploads/swimming-pool.svg'); }
.er-icon-grid__icon--restaurant { -webkit-mask-image: url('/wp-content/uploads/cuttlery.svg');      mask-image: url('/wp-content/uploads/cuttlery.svg'); }
.er-icon-grid__icon--spa        { -webkit-mask-image: url('/wp-content/uploads/flower.svg');        mask-image: url('/wp-content/uploads/flower.svg'); }
.er-icon-grid__icon--cinema     { -webkit-mask-image: url('/wp-content/uploads/theater.svg');       mask-image: url('/wp-content/uploads/theater.svg'); }
.er-icon-grid__icon--parc       { -webkit-mask-image: url('/wp-content/uploads/playground.svg');    mask-image: url('/wp-content/uploads/playground.svg'); }
.er-icon-grid__icon--supermercat { -webkit-mask-image: url('/wp-content/uploads/shop-bag.svg');      mask-image: url('/wp-content/uploads/shop-bag.svg'); }
.er-icon-grid__icon--esports    { -webkit-mask-image: url('/wp-content/uploads/basketball-hoop.svg'); mask-image: url('/wp-content/uploads/basketball-hoop.svg'); }
.er-icon-grid__label {
	font-family: 'Jost', sans-serif;
	font-size: 0.92rem;
	font-weight: 400;
	line-height: 1.3;
	text-align: center;
	color: #2A2520; /* tinta fosca */
	max-width: 14ch;
	text-wrap: balance;
	transition: color 0.2s ease;
}
/* Hover lleuger: icone al verd marca, label subratllat verd funcional. */
.er-icon-grid__link:hover .er-icon-grid__icon,
.er-icon-grid__link:focus-visible .er-icon-grid__icon {
	background-color: #3EA534;
}
.er-icon-grid__link:hover .er-icon-grid__label,
.er-icon-grid__link:focus-visible .er-icon-grid__label {
	text-decoration: underline;
	text-decoration-color: #03693A;
	text-underline-offset: 4px;
	text-decoration-thickness: 1px;
}
.er-icon-grid__link:focus-visible {
	outline: 2px solid #3EA534;
	outline-offset: 4px;
}