/**
 * Identidad de marca por establecimiento.
 *
 * Los tokens (--mwm-brand, --mwm-brand-fill, --mwm-brand-on, --mwm-brand-ink,
 * --mwm-brand-soft) se declaran en style.css con los valores corporativos y se
 * sobrescriben en la ficha del espacio (body.mwm-espacio-brand) y en cada fila
 * del archivo por tipo. Aquí solo vive lo que no puede resolverse con tokens:
 * el logo monocromo teñido con el color del establecimiento.
 *
 * El logo es un <span> que usa el propio PNG blanco como máscara y lo pinta con
 * el color de marca, así no hace falta subir un logo nuevo por establecimiento.
 */

.mwm-brand-logo {
	position: relative;
	display: block;
	pointer-events: none;
}

/*
 * El hero del espacio posiciona su logo en absoluto (arriba a la derecha): esa
 * regla tiene el mismo peso que la de arriba y esta hoja carga después, así que
 * hay que devolverle el `absolute` explícitamente. El ::after de color sigue
 * funcionando porque un elemento absoluto también sirve de contenedor.
 */
.mwm-brand-logo.mwm-hero-02__logo {
	position: absolute;
}

/* En móvil el hero saca el logo del absoluto: `relative` lo devuelve al flujo
   igual que `static` y además mantiene el contenedor del ::after de color. */
@media (max-width: 639px) {
	.mwm-brand-logo.mwm-hero-02__logo {
		position: relative;
	}
}

@supports (mask-image: url("")) or (-webkit-mask-image: url("")) {
	/*
	 * Dos capas sobre el mismo PNG:
	 *   base  — máscara por ALFA: toda la silueta del logo, pintada con la tinta
	 *           interior (blanco), que es lo que queda visible en los huecos del
	 *           glifo cuando el logo es un hexágono macizo.
	 *   ::after — máscara por LUMINANCIA: solo lo claro del PNG (el cuerpo del
	 *           logo, no el glifo oscuro), pintado con el color del establecimiento.
	 * Resultado: hexágono en color de marca con el glifo calado en blanco, igual
	 * que el logo original de cada hotel. Con logos de trazo (sin relleno) las dos
	 * capas coinciden y el trazo sale directamente en color de marca.
	 */
	.mwm-brand-logo {
		background-color: var(--mwm-brand-logo-ink, #ffffff);
		-webkit-mask-image: var(--mwm-brand-logo-src);
		mask-image: var(--mwm-brand-logo-src);
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
		-webkit-mask-position: center;
		mask-position: center;
		-webkit-mask-size: contain;
		mask-size: contain;
	}

	.mwm-brand-logo::after {
		content: "";
		position: absolute;
		inset: 0;
		background-color: var(--mwm-brand-logo-color, var(--mwm-brand, currentColor));
		-webkit-mask-image: var(--mwm-brand-logo-src);
		mask-image: var(--mwm-brand-logo-src);
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
		-webkit-mask-position: center;
		mask-position: center;
		-webkit-mask-size: contain;
		mask-size: contain;
		-webkit-mask-source-type: luminance;
		-webkit-mask-mode: luminance;
		mask-mode: luminance;
	}
}

/* Sin soporte de máscaras el <span> quedaría como un bloque de color: mejor nada. */
@supports not ((mask-image: url("")) or (-webkit-mask-image: url(""))) {
	.mwm-brand-logo {
		display: none;
	}
}