/**
 * Room plan (ml-floor-plan): Figma Home "Signature · Room plan".
 * Desktop: text column (384) beside the plan (792), 24 apart. Tablet: one column, 32 between
 * blocks. Phone: compact plan with badges, the room list, then the photos, 24 between blocks.
 */

.ml-floor-plan {
	--ml-plan-floor: var(--ml-c-paper);
	--ml-plan-ink: var(--ml-c-ink);
	--ml-plan-sand: var(--ml-c-sand);
	--ml-plan-muted: var(--ml-c-muted);
}

.ml-floor-plan__grid {
	display: grid;
	grid-template-columns: minmax(0, 384fr) minmax(0, 792fr);
	grid-template-rows: auto auto auto auto 1fr;
	grid-template-areas:
		"title plan"
		"text plan"
		"photos plan"
		"link plan"
		". plan";
	column-gap: 24px;
	align-items: start;
}

.ml-floor-plan__title {
	grid-area: title;
}

.ml-floor-plan__text {
	grid-area: text;
	margin-top: 24px;
	color: var(--ml-text);
}

.ml-floor-plan__plan {
	grid-area: plan;
	min-width: 0;
}

.ml-floor-plan__photos {
	grid-area: photos;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	margin-top: 24px;
}

.ml-floor-plan__photo .ml-figure__media {
	aspect-ratio: 184 / 280;
}

.ml-floor-plan .ml-floor-plan__photo .ml-figure__caption {
	margin-top: 8px;
}

.ml-floor-plan__link {
	grid-area: link;
	margin-top: 22px;
}

/* ------------------------------------------------------------------ */
/* Plan drawing                                                       */
/* ------------------------------------------------------------------ */

.ml-floor-plan__svg,
.ml-floor-plan__street {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.ml-floor-plan__svg--phone {
	display: none;
}

.ml-floor-plan__street {
	margin-top: 12px;
}

.ml-floor-plan__room {
	fill: var(--ml-plan-floor);
	stroke: var(--ml-plan-ink);
	stroke-width: 1.5;
}

.ml-floor-plan__walls rect,
.ml-floor-plan__seats circle,
.ml-floor-plan__path {
	fill: var(--ml-plan-ink);
}

.ml-floor-plan__gap {
	fill: var(--ml-plan-floor);
}

.ml-floor-plan__tables rect {
	fill: none;
	stroke: var(--ml-plan-ink);
	stroke-width: 1;
}

.ml-floor-plan__counter {
	fill: var(--ml-plan-sand);
	stroke: var(--ml-plan-ink);
	stroke-width: 1;
}

.ml-floor-plan__road {
	fill: var(--ml-plan-sand);
}

.ml-floor-plan__label {
	fill: var(--ml-plan-ink);
	font-family: var(--ml-sans);
	font-size: 12px;
	font-weight: 500;
}

.ml-floor-plan__entrance,
.ml-floor-plan__street-name {
	fill: var(--ml-plan-muted);
	font-family: var(--ml-sans);
	font-size: 11px;
	font-weight: 400;
}

.ml-floor-plan__street-name {
	font-size: 12px;
}

.ml-floor-plan__badge circle {
	fill: var(--ml-plan-floor);
	stroke: var(--ml-plan-ink);
	stroke-width: 1;
}

.ml-floor-plan__badge text {
	fill: var(--ml-plan-ink);
	font-family: var(--ml-sans);
	font-size: 12px;
}

/* ------------------------------------------------------------------ */
/* Room list: phone only, kept for screen readers elsewhere            */
/* ------------------------------------------------------------------ */

.ml-floor-plan__areas {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.ml-floor-plan__area {
	padding-top: 8px;
	border-top: 1px solid var(--ml-plan-ink);
}

.ml-floor-plan__area + .ml-floor-plan__area {
	margin-top: 20px;
}

.ml-floor-plan__area-name {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--ml-heading);
	font-family: var(--ml-serif);
	font-size: var(--ml-fs-h3);
	line-height: 24px;
}

.ml-floor-plan__badge-num {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border: 1px solid var(--ml-plan-ink);
	border-radius: 50%;
	color: var(--ml-plan-ink);
	font-family: var(--ml-sans);
	font-size: 12px;
	line-height: 1;
}

.ml-floor-plan__area-meta {
	margin-top: 8px;
	color: var(--ml-muted);
}

/* ------------------------------------------------------------------ */
/* Tablet (834): one column, plan full width, no street band          */
/* ------------------------------------------------------------------ */

@media (max-width: 1024px) {
	.ml-floor-plan__grid {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: none;
		grid-template-areas:
			"title"
			"text"
			"plan"
			"photos"
			"link";
	}

	.ml-floor-plan__text,
	.ml-floor-plan__plan,
	.ml-floor-plan__photos {
		margin-top: 32px;
	}

	.ml-floor-plan__link {
		margin-top: 30px;
	}

	.ml-floor-plan__street {
		display: none;
	}

	.ml-floor-plan__photo .ml-figure__media {
		aspect-ratio: 377 / 300;
	}
}

/* ------------------------------------------------------------------ */
/* Phone (390): compact plan, room list, 24 between blocks            */
/* ------------------------------------------------------------------ */

@media (max-width: 767px) {
	.ml-floor-plan {
		--ml-section-pad: 32px;
	}

	.ml-floor-plan__grid {
		grid-template-areas:
			"title"
			"text"
			"plan"
			"areas"
			"photos"
			"link";
	}

	.ml-floor-plan .ml-floor-plan__title {
		font-size: var(--ml-fs-h2);
		line-height: var(--ml-lh-h2);
	}

	.ml-floor-plan__text {
		font-size: var(--ml-fs-body);
		line-height: var(--ml-lh-body);
	}

	.ml-floor-plan__text,
	.ml-floor-plan__plan,
	.ml-floor-plan__areas,
	.ml-floor-plan__photos {
		margin-top: 24px;
	}

	.ml-floor-plan__link {
		margin-top: 22px;
	}

	.ml-floor-plan__svg--wide {
		display: none;
	}

	.ml-floor-plan__svg--phone {
		display: block;
	}

	.ml-floor-plan__areas {
		grid-area: areas;
		position: static;
		width: auto;
		height: auto;
		overflow: visible;
		clip-path: none;
		white-space: normal;
	}

	.ml-floor-plan__photo .ml-figure__media {
		aspect-ratio: 167 / 260;
	}
}