/* Mapa */
.map-section {
	line-height: 0;
}

.map-section__frame {
	position: relative;
	display: block;
}

.map-section__map {
	height: 450px;
	background-color: var(--color-cream);
}

.map-section__map iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Avís mentre no s'accepten les galetes de Google Maps */
.map-section__placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	height: 100%;
	padding: 24px 16px;
	text-align: center;
	line-height: 1.5;
	color: var(--color-green-950);
}

.map-section__placeholder-icon svg {
	display: block;
	width: 40px;
	height: 40px;
	color: var(--color-green-900);
}

.map-section__placeholder-name {
	margin: 0;
	font-family: var(--font-heading);
	font-size: 22px;
}

.map-section__placeholder-text {
	max-width: 420px;
	margin: 0;
	font-size: 15px;
}

.map-section__placeholder-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-top: 8px;
}

.map-section__placeholder-actions button {
	border: 0;
	cursor: pointer;
}

@media (max-width: 700px) {
	.map-section__map {
		height: 320px;
	}
}

/*
 * Efecte cortina: a les pàgines amb mapa, el footer queda fix a sota i el
 * contingut (que acaba amb el mapa) puja i el destapa en fer scroll.
 * El main va en una capa per sobre del footer; el footer, en una capa normal
 * (no negativa) perquè els seus enllaços es puguin clicar.
 * El lightbox de la galeria es mou al final del body (galeria.js) perquè no
 * quedi atrapat dins la capa del main, per sota de la navbar.
 * Només quan el footer cap sencer a la pantalla.
 */
@media (min-width: 901px) and (min-height: 700px) {
	body:has(.map-section) #main {
		position: relative;
		z-index: 1;
		background-color: var(--color-cream-dark);
		box-shadow: 0 24px 48px rgba(32, 37, 31, 0.45);
	}

	body:has(.map-section) .site-footer {
		position: sticky;
		bottom: 0;
		z-index: 0;
	}
}