/* ===============================
   kodawari-rooms: 個室紹介 + 利用シーン3カード
   SP: 1カラム縦積み・カードは写真左/テキスト右
   PC: 上段2カラム（写真右フルブリード）+ 下段カード3列
   =============================== */

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

.kodawari-rooms__top {
	padding-inline: var(--container-gutter-mobile);
}

/* センター寄せ赤見出し + 下に短い金罫 */
.kodawari-rooms__title {
	text-align: center;
	font-size: var(--fs-h2-mobile);
	font-weight: var(--fw-medium);
	line-height: var(--lh-tight);
	letter-spacing: 0.08em;
	color: var(--color-primary);
}

.kodawari-rooms__title::after {
	content: "";
	display: block;
	width: var(--space-9);
	margin: var(--space-3) auto 0;
	border-top: 1px solid var(--color-accent);
}

.kodawari-rooms__media {
	margin-top: var(--space-4);
}

.kodawari-rooms__media img {
	width: 100%;
	aspect-ratio: 15 / 8;
	object-fit: cover;
}

.kodawari-rooms__body {
	margin-top: var(--space-4);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	letter-spacing: 0.04em;
}

/* 菱形オーナメント区切り（SPのみ） */
.kodawari-rooms__divider {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin-block: var(--space-5) var(--space-4);
}

.kodawari-rooms__divider::before,
.kodawari-rooms__divider::after {
	content: "";
	flex: 1;
	border-top: 1px solid var(--color-accent);
}

.kodawari-rooms__divider span {
	width: var(--space-2);
	height: var(--space-2);
	border: 1px solid var(--color-accent);
	transform: rotate(45deg);
}

/* シーンカード: SPは写真左・テキスト右（テキストが写真右端にややオーバーラップ） */
.kodawari-rooms__cards {
	display: grid;
	gap: var(--space-3);
}

.kodawari-rooms__card {
	display: grid;
	/* テキスト列はタイトル1行分を自動確保し、残りを写真に割り当てる（参考は約56:44） */
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: end;
}

.kodawari-rooms__card-media img {
	width: 100%;
	aspect-ratio: 2 / 1;
	object-fit: cover;
}

.kodawari-rooms__card-body {
	padding-left: var(--space-2);
}

.kodawari-rooms__card-title {
	font-size: var(--fs-h3);
	font-weight: var(--fw-medium);
	line-height: var(--lh-tight);
	color: var(--color-primary);
	padding-bottom: var(--space-2);
	border-bottom: 1px solid var(--color-accent);
}

.kodawari-rooms__card-link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	margin-top: var(--space-3);
	font-size: var(--fs-body-sm);
	letter-spacing: 0.08em;
	color: var(--color-primary);
	transition: color var(--duration-fast);
}

.kodawari-rooms__card-link::after {
	content: "";
	width: var(--space-2);
	height: var(--space-2);
	border-top: 1px solid currentColor;
	border-right: 1px solid currentColor;
	transform: rotate(45deg);
}

.kodawari-rooms__card-link:hover {
	color: var(--color-primary-hover);
}

@media (max-width: 767px) {
	.kodawari-rooms__body {
		font-size: var(--fs-body-pc);
	}

	.kodawari-rooms__card-title {
		font-size: var(--fs-h2-mobile);
	}

	.kodawari-rooms__card-link {
		min-height: var(--space-9);
		font-size: var(--fs-body);
	}
}

/* ===============================
   PC: 上段は左テキスト+右写真フルブリード、下段は3カラム
   =============================== */

@media (min-width: 768px) {
	.kodawari-rooms {
		/* 参考画像では写真がセクション上端に接する */
		padding-block: 0 var(--space-8);
	}

	.kodawari-rooms__top {
		display: grid;
		/* 参考画像の写真開始位置(x≈641)には左カラム約457pxが必要だが、
		   fs-h2(40px)では見出し13文字が541px必要で1行に収まらないため、
		   1行を優先して左カラムを広げている（見出し30px級トークンは要相談） */
		grid-template:
			"title media" auto
			"body  media" 1fr /
			minmax(0, 43fr) minmax(0, 57fr);
		column-gap: var(--space-6);
		padding-inline: 0;
		/* 左端はコンテナの左端に揃える。右端は画面端までフルブリード */
		padding-left: max(var(--container-gutter), calc((100% - var(--container-max)) / 2 + var(--container-gutter)));
	}

	.kodawari-rooms__title {
		grid-area: title;
		text-align: left;
		font-size: var(--fs-h2);
		letter-spacing: 0.04em;
		margin-top: var(--space-8);
	}

	.kodawari-rooms__title::after {
		/* 参考画像のPC版には見出し下の金罫が無い */
		display: none;
	}

	.kodawari-rooms__media {
		grid-area: media;
		margin-top: 0;
	}

	.kodawari-rooms__media img {
		aspect-ratio: 5 / 2;
	}

	.kodawari-rooms__body {
		grid-area: body;
		align-self: start;
		margin-top: var(--space-6);
		font-size: var(--fs-body-pc);
	}

	.kodawari-rooms__divider {
		display: none;
	}

	.kodawari-rooms__cards {
		margin-top: var(--space-4);
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--space-7);
	}

	.kodawari-rooms__card {
		display: block;
	}

	.kodawari-rooms__card-body {
		padding-left: 0;
		text-align: center;
	}

	.kodawari-rooms__card-title {
		display: inline-block;
		margin-top: var(--space-5);
		font-size: var(--fs-body-pc);
		border-bottom: 0;
		padding-bottom: 0;
	}

	.kodawari-rooms__card-link {
		display: flex;
		justify-content: center;
		margin-top: var(--space-4);
	}
}