/* ===============================
   rooms: 個室・宴会場（cpt:room）
   SP: 縦積みカード / PC: 3カラムグリッド（件数可変・4件目以降は折返し）
   =============================== */

.rooms {
	padding-block: var(--space-2) var(--space-2);
}

.rooms__lead {
	text-align: center;
	font-size: var(--fs-body-sm);
	letter-spacing: 0.1em;
	color: var(--color-text);
}

.rooms__title {
	margin-top: var(--space-1);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-4);
	text-align: center;
	letter-spacing: 0.15em;
}

/* SPのみ左右に罫線+菱形（PCはプレーン） */
.rooms__title::before,
.rooms__title::after {
	content: "";
	flex: none;
	width: var(--space-8);
	height: 1px;
	background: var(--color-accent);
}

.rooms__title span {
	display: inline-flex;
	align-items: center;
	gap: var(--space-4);
}

.rooms__title span::before,
.rooms__title span::after {
	content: "";
	flex: none;
	width: var(--space-2);
	height: var(--space-2);
	border: 1px solid var(--color-accent);
	transform: rotate(45deg);
}

.rooms__grid {
	margin-top: var(--space-1);
	display: grid;
	gap: var(--space-2);
	/* 参考画像のカード左右余白は約30px = gutter-mobile(18) + 12 */
	padding-inline: var(--space-3);
}

.rooms__card {
	height: 100%;
	display: flex;
	flex-direction: column;
	background: var(--color-bg-card);
	border: 1px solid var(--color-border);
}

.rooms__photo {
	width: 100%;
	/* SP参考画像の実測 314×102 ≈ 3:1 の横長 */
	aspect-ratio: 3 / 1;
	object-fit: cover;
}

.rooms__body {
	flex: 1;
	display: flex;
	flex-direction: column;
	/* 左右はモック実測56pxだが、既知のフォントサイズ差により2行を保てる上限の32pxとする */
	padding: var(--space-2) var(--space-7) var(--space-2);
}

.rooms__name {
	text-align: center;
	font-size: var(--fs-h3);
	letter-spacing: 0.1em;
	color: var(--color-text);
}

.rooms__desc {
	margin-top: var(--space-2);
	font-size: var(--fs-body-sm);
	line-height: var(--lh-body);
	letter-spacing: 0.03em;
}

.rooms__link {
	margin-top: auto;
	padding-top: var(--space-1);
	align-self: center;
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	color: var(--color-primary);
	font-size: var(--fs-body-sm);
	letter-spacing: 0.1em;
	transition: opacity var(--duration-fast);
}

.rooms__link:hover {
	opacity: 0.7;
}

/* 赤い山括弧矢印。1px borderは許可例外 */
.rooms__link::after {
	content: "";
	width: var(--space-2);
	height: var(--space-2);
	border-top: 1px solid currentColor;
	border-right: 1px solid currentColor;
	transform: rotate(45deg);
}

@media (min-width: 768px) {
	.rooms {
		padding-block: var(--space-2) var(--space-6);
	}

	.rooms__lead {
		font-size: var(--fs-body);
	}

	.rooms__title {
		margin-top: var(--space-3);
	}

	/* PCの見出しはプレーン（飾りなし） */
	.rooms__title::before,
	.rooms__title::after,
	.rooms__title span::before,
	.rooms__title span::after {
		display: none;
	}

	.rooms__grid {
		margin-top: var(--space-3);
		grid-template-columns: repeat(3, 1fr);
		gap: var(--space-5);
		padding-inline: 0;
		/* 参考画像のカード幅400pxに合わせ、コンテナ有効幅を左右20pxずつ広げる */
		margin-inline: calc(-1 * var(--space-5));
	}

	.rooms__photo {
		/* PC参考画像の実測 398×230 ≈ 16:9 */
		aspect-ratio: 16 / 9;
	}

	.rooms__body {
		padding-block: var(--space-5);
	}

	.rooms__name {
		font-size: var(--fs-h2-mobile);
	}

	.rooms__desc {
		margin-top: var(--space-3);
		font-size: var(--fs-body);
	}

	.rooms__link {
		padding-top: var(--space-2);
		font-size: var(--fs-body);
	}
}

/* SP readability: keep the editorial card structure without shrinking desktop typography. */
@media (max-width: 767px) {
	.rooms {
		padding-block: var(--space-7);
	}

	.rooms__lead,
	.rooms__desc {
		font-size: var(--fs-body-pc);
		line-height: var(--lh-body);
	}

	.rooms__title,
	.rooms__name {
		font-size: var(--fs-h2-mobile);
		line-height: var(--lh-tight);
	}

	.rooms__grid {
		gap: var(--space-5);
		margin-top: var(--space-5);
		padding-inline: 0;
	}

	.rooms__photo {
		aspect-ratio: 16 / 9;
	}

	.rooms__body {
		padding: var(--space-5) var(--space-6);
	}

	.rooms__link {
		justify-content: center;
		min-height: var(--space-9);
		padding-top: var(--space-3);
		font-size: var(--fs-body);
	}
}