/**
 * Hero single alojamiento — Figma 6501:21891 (hero text: migas, título, galería).
 *
 * Todo single alojamiento: alto mínimo viewport (como .mwm-hero), contenedor wide centrado.
 * Galería con flex grow como Figma 6501:21903 — crece con el espacio disponible.
 */

/* ── Editor (site editor / patrón sin body.single-alojamiento) ───────────────── */
.editor-styles-wrapper .pattern-hero-alojamiento {
	display: flex;
	flex-direction: column;
	align-items: center;
	box-sizing: border-box;
}

.editor-styles-wrapper .pattern-hero-alojamiento>.wp-block-group {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
	width: min(100%, var(--wp--style--global--content-size, 1296px));
	margin-top: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* ── Front: single alojamiento ───────────────────────────────────────────────── */
body.single-alojamiento .pattern-hero-alojamiento.has-foreground-background-color.has-background {
	--mwm-hero-aloj-offset: 35px;

	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
	min-height: calc(100svh - var(--wp-admin--admin-bar--height, 0px));
	min-height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
	padding-top: calc(var(--mwm-header-height) + var(--mwm-hero-aloj-offset)) !important;
	padding-bottom: var(--wp--preset--spacing--70) !important;
	padding-left: clamp(24px, 5vw, 35px) !important;
	padding-right: clamp(24px, 5vw, 35px) !important;
}

body.single-alojamiento .pattern-hero-alojamiento>.wp-block-group {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
	width: min(100%, var(--wp--style--global--content-size, 1400px));
	flex: 1 1 0;
	min-height: 0;
	margin-top: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

body.single-alojamiento .pattern-hero-alojamiento .villa-gallery.alignwide,
body.single-alojamiento .pattern-hero-alojamiento .villa-gallery.alignfull {
	margin-left: 0 !important;
	margin-right: 0 !important;
	max-width: none !important;
	width: 100%;
}

/*
 * Galería como Figma 6501:21903 (flex-[1_0_0]): ocupa el alto disponible del hero junto a migas+título.
 */
body.single-alojamiento .pattern-hero-alojamiento .villa-gallery {
	flex: 1 1 auto;
	min-height: 0;
	align-self: stretch;
	width: 100%;
}

.pattern-hero-alojamiento .nerjavillas-breadcrumbs,
.pattern-hero-alojamiento .wp-block-post-title {
	flex-shrink: 0;
}

/* Migas: mismo núcleo que inc/blocks/breadcrumbs (gap 6px, py 6px, 16px uppercase secondary).
 * Aquí solo aseguramos separador y ritmo sobre fondo foreground. */
.pattern-hero-alojamiento .nerjavillas-breadcrumbs {
	justify-content: flex-start;
	row-gap: 6px;
	column-gap: 6px;
	padding-top: 6px;
	padding-bottom: 6px;
}

.pattern-hero-alojamiento .nerjavillas-breadcrumbs__separator {
	width: 16px;
	height: 16px;
}

/* Título (Minion 40 / 1.2 / -0.01em, tertiary, ancho lectura ~965px en arte) */
.editor-styles-wrapper .pattern-hero-alojamiento .wp-block-post-title,
.pattern-hero-alojamiento .wp-block-post-title {
	font-family: var(--wp--preset--font-family--heading), serif !important;
	font-size: var(--wp--preset--font-size--heading-2) !important;
	font-weight: 400 !important;
	line-height: 1.2 !important;
	letter-spacing: -0.01em !important;
	max-width: 965px;
	width: 100%;
	box-sizing: border-box;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	margin-left: 0 !important;
	margin-right: auto !important;
	text-align: left !important;
	color: var(--wp--preset--color--tertiary) !important;
}

.pattern-hero-alojamiento .villa-gallery {
	--pattern-hero-gallery-min-height: clamp(320px, 28vh, 560px);
	/* Mismo tope que el bloque por defecto (196); el ancho real = min(esto, geometría, cap móvil). */
	--villa-gallery-sidebar-max: 196px;
	--villa-gallery-sidebar-width: 196px;
	--villa-gallery-thumb-gap: 24px;

	display: grid;
	grid-template-rows: minmax(0, 1fr);
	align-items: stretch;
	width: 100%;
	min-height: var(--pattern-hero-gallery-min-height);
}

.pattern-hero-alojamiento .villa-gallery--multi {
	gap: 24px;
}

.pattern-hero-alojamiento .villa-gallery--single {
	grid-template-columns: 1fr;
	gap: 0;
}

.pattern-hero-alojamiento .villa-gallery__main {
	min-height: 0;
	height: 100%;
	align-self: stretch;
}

.pattern-hero-alojamiento .villa-gallery__thumbs {
	height: 100%;
	min-height: 0;
	align-self: stretch;
	box-sizing: border-box;
}

/* Franja inferior foto principal: pt 106 / px 24 / pb 24 — Figma franja */
.pattern-hero-alojamiento .villa-gallery__overlay {
	align-items: flex-end;
	justify-content: space-between;
	padding-top: 106px;
	padding-right: 24px;
	padding-bottom: 24px;
	padding-left: 24px;
	background: linear-gradient(to top,
			rgba(0, 0, 0, 0.55) 0%,
			rgba(0, 0, 0, 0.22) 42%,
			transparent 100%);
}

/* Contador +N en miniatura: Google Sans 20 / Regular — preset large */
.pattern-hero-alojamiento .villa-gallery__thumb--more .villa-gallery__thumb-count {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 400;
	line-height: 1.25;
	gap: 10px;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

@media (max-width: 782px) {
	body.single-alojamiento .pattern-hero-alojamiento.has-foreground-background-color.has-background {
		--mwm-hero-aloj-offset: 2rem;

		/* Sin 100vh en móvil: el hero solo ocupa migas + título + galería. */
		min-height: auto;
		padding-top: calc(var(--mwm-header-height) + var(--mwm-hero-aloj-offset)) !important;
		padding-bottom: 28px !important;
		padding-left: 24px !important;
		padding-right: 24px !important;
	}

	body.single-alojamiento .pattern-hero-alojamiento > .wp-block-group {
		flex: 0 1 auto;
		min-height: auto;
	}

	.pattern-hero-alojamiento.has-foreground-background-color.has-background {
		padding-top: 56px !important;
		padding-bottom: 28px !important;
		padding-left: 24px !important;
		padding-right: 24px !important;
	}

	.pattern-hero-alojamiento .wp-block-post-title {
		line-height: 1.25 !important;
		max-width: none;
	}

	body.single-alojamiento .pattern-hero-alojamiento .villa-gallery {
		flex: 0 1 auto;
	}

	.pattern-hero-alojamiento .villa-gallery {
		grid-template-rows: auto;
		--villa-gallery-thumb-gap: 12px;
		gap: 12px;
		min-height: 0;
	}

	.pattern-hero-alojamiento .villa-gallery--single {
		gap: 0;
	}

	.pattern-hero-alojamiento .villa-gallery__main {
		aspect-ratio: 4 / 3;
		min-height: 0;
		height: auto;
	}

	.pattern-hero-alojamiento .villa-gallery__thumbs {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		height: auto;
		gap: var(--villa-gallery-thumb-gap, 12px);
	}

	.pattern-hero-alojamiento .villa-gallery__thumb {
		flex: none;
		width: 100%;
		aspect-ratio: 1;
		min-height: 0;
	}

	.pattern-hero-alojamiento .villa-gallery__overlay {
		padding-top: 56px;
		padding-right: 16px;
		padding-bottom: 16px;
		padding-left: 16px;
	}

	.pattern-hero-alojamiento .villa-gallery__thumb--more .villa-gallery__thumb-count {
		font-size: var(--wp--preset--font-size--normal);
		padding: 16px;
	}
}