/* ===========================================================
   responsive.css — Aire Lliure
   Ajustes mobile-first que se cargan DESPUÉS de fullestils.css
   No se toca ningún fichero CSS original: todo lo de aquí
   son añadidos/overrides pensados para pantallas pequeñas.
   =========================================================== */

*, *::before, *::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	overflow-x: hidden;
	background-color: #FFFFFF;
}

img {
	max-width: 100%;
	height: auto;
}

/* -----------------------------------------------------------
   Estructura general: la tabla de 980px fija pasa a ser
   un contenedor fluido con ancho máximo.
   ----------------------------------------------------------- */
#cuerpoCentral {
	width: 100%;
	max-width: 980px;
	margin: 0 auto;
	background-color: #FFFFFF;
	padding: 0 16px 20px;
}

.capçalera {
	text-align: center;
	padding-top: 20px;
}

.logoWrap {
	max-width: 450px;
	width: 100%;
	margin: 0 auto;
}

.tagline {
	font-size: 15px;
	line-height: 1.4;
	padding: 14px 4px 6px;
}

.mailWrap img {
	width: 180px;
	max-width: 60%;
	margin: 10px auto;
}

/* -----------------------------------------------------------
   Galería de fotos: de tabla 3x3 a grid fluido
   ----------------------------------------------------------- */
.galeria {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	padding: 10px 0;
}

.galeria img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 4px;
}

/* -----------------------------------------------------------
   Bloque "compromesos amb el medi ambient"
   ----------------------------------------------------------- */
.ecoBlock {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 10px 4px 20px;
	text-align: left;
}

.ecoBlock img {
	flex: 0 0 auto;
	width: 51px;
	height: 50px;
}

/* -----------------------------------------------------------
   Menú superior (antes iframe apartatsevents.htm)
   ----------------------------------------------------------- */
#topMenuWrap {
	width: 100%;
	background-color: #1B1B1B;
	padding: 6px 0;
}

.topNav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px 22px;
	max-width: 980px;
	margin: 0 auto;
}

.topNav li {
	text-align: center;
	white-space: nowrap;
	padding: 4px 2px;
}

/* -----------------------------------------------------------
   Pie de página (antes iframe bottom.htm)
   ----------------------------------------------------------- */
#bottomMenuWrap {
	width: 100%;
	background-color: #000000;
	padding: 16px 0;
}

.bottomInner {
	max-width: 980px;
	margin: 0 auto;
	padding: 0 16px;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 20px;
}

.footerText {
	flex: 1 1 auto;
	min-width: 0;
}

.footerSocial {
	flex: 0 0 auto;
}

/* -----------------------------------------------------------
   Widget de Facebook (apartats.htm) — el plugin antiguo de
   Facebook fuerza un ancho de 980px en su propio contenido;
   este wrapper evita que rompa el layout pero en pantallas
   pequeñas se podrá desplazar en horizontal. Para que sea
   realmente fluido habría que migrar al Page Plugin moderno
   con data-width="100%".
   ----------------------------------------------------------- */
.fbLikeboxWrap {
	width: 100%;
	max-width: 980px;
	margin: 8px auto 0;
	overflow-x: auto;
}

.fbLikeboxWrap iframe {
	width: 980px;
	max-width: none;
	height: 200px;
}

/* -----------------------------------------------------------
   Separador de gespa
   ----------------------------------------------------------- */
.gespaDivider {
	width: 100%;
	height: 79px;
	background-image: url('../img/gespa1.gif');
	background-color: #FFFFFF;
}

/* -----------------------------------------------------------
   Breakpoints
   ----------------------------------------------------------- */

/* Tablets */
@media (max-width: 760px) {
	.galeria {
		grid-template-columns: repeat(2, 1fr);
		gap: 8px;
	}
	.tagline {
		font-size: 14px;
	}
}

/* Móviles */
@media (max-width: 480px) {
	.galeria {
		grid-template-columns: repeat(2, 1fr);
		gap: 6px;
	}
	.logoWrap {
		max-width: 280px;
		padding-top: 6px;
	}
	.tagline {
		font-size: 13px;
		padding: 10px 6px 4px;
	}
	.mailWrap img {
		width: 140px;
	}
	.ecoBlock {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
	.ecoBlock img {
		margin-bottom: 6px;
	}
	.topNav ul {
		gap: 6px 14px;
	}
	.topNav li {
		font-size: 12px;
	}
	.bottomInner {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 10px;
	}
	.gespaDivider {
		height: 40px;
		background-size: auto 40px;
	}
}

/* Móviles muy pequeños */
@media (max-width: 340px) {
	.galeria {
		grid-template-columns: 1fr;
	}
}