/* ===============================
   kodawari-space: 空間のこだわり
   SP: 上段2カラム（左テキスト・右正方形写真フルブリード）+ 下段写真コラージュ + オーナメント
   PC: 左テキスト・右大写真フルブリード + 下段左に小写真2枚
   =============================== */

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

.kodawari-space__top {
	display: grid;
	/* 見出し「花と絵画が彩る、」8文字が折り返さない幅を左カラムに確保する */
	grid-template-columns: minmax(0, 13fr) minmax(0, 12fr);
	column-gap: var(--space-2);
	align-items: start;
}

.kodawari-space__text {
	padding-top: var(--space-5);
	padding-left: var(--container-gutter-mobile);
}

.kodawari-space__title {
	font-size: var(--fs-h2-mobile);
	font-weight: var(--fw-medium);
	line-height: var(--lh-tight);
	letter-spacing: 0.06em;
	color: var(--color-primary);
}

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

/* 右のほぼ正方形写真は右端フルブリードでセクション上端に接する */
.kodawari-space__main img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/* 下段の写真コラージュ（SPは左右ガターあり・列比はほぼ1:1） */
.kodawari-space__grid {
	display: grid;
	grid-template-columns: minmax(0, 24fr) minmax(0, 25fr);
	gap: var(--space-1);
	margin-top: var(--space-4);
	padding-inline: var(--container-gutter-mobile);
}

.kodawari-space__col {
	display: grid;
	gap: var(--space-1);
	align-content: start;
}

/* 左は上（絵画）が下（行灯）よりやや背が高い */
.kodawari-space__col img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.kodawari-space__col img + img {
	aspect-ratio: 12 / 7;
}

/* 右の縦長写真は左カラム2枚分の高さに追従させる */
.kodawari-space__tall img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 菱形オーナメント区切り（罫線は左右ガターまで伸ばす） */
.kodawari-space__ornament {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-3);
	margin-top: var(--space-5);
	padding-inline: var(--container-gutter-mobile);
}

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

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

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

/* ===============================
   PC: 左テキスト + 右大写真フルブリード + 下段左に小写真2枚
   =============================== */

@media (min-width: 768px) {
	.kodawari-space {
		padding-block: 0 var(--space-4);
	}

	/* 大写真は右端・上端に接する。カラム比はモックの 705:735 相当 */
	.kodawari-space__top {
		grid-template-columns: minmax(0, 24fr) minmax(0, 25fr);
		column-gap: 0;
		align-items: start;
	}

	.kodawari-space__text {
		/* 左端はコンテナ左端に揃える */
		padding-top: var(--space-9);
		padding-left: max(var(--container-gutter), calc((100vw - var(--container-max)) / 2 + var(--container-gutter)));
		padding-right: var(--space-8);
	}

	/* モックのPCは見出し1行だが、トークンの見出しサイズ(40px)では
	   カラム幅に収まらないため、読点位置での2行組を維持する */
	.kodawari-space__title {
		font-size: var(--fs-h2);
		letter-spacing: 0.04em;
	}

	.kodawari-space__body {
		margin-top: var(--space-6);
		font-size: var(--fs-body-pc);
	}

	.kodawari-space__main img {
		aspect-ratio: 11 / 4;
	}

	/* 下段: 小写真2枚を左寄せで大写真の下端に接続する。
	   右側の空きはグリッドトラック（余白トークン外の値を使わない） */
	.kodawari-space__grid {
		grid-template-columns: minmax(0, 75fr) minmax(0, 57fr);
		margin-top: 0;
		padding-inline: 0;
		padding-left: max(var(--container-gutter), calc((100vw - var(--container-max)) / 2 + var(--container-gutter)));
	}

	.kodawari-space__col {
		grid-column: 1;
		grid-template-columns: minmax(0, 39fr) minmax(0, 36fr);
	}

	/* 2枚の高さ（モック比135px相当）が揃うよう幅比に合わせた縦横比にする */
	.kodawari-space__col img {
		aspect-ratio: 20 / 7;
	}

	.kodawari-space__col img + img {
		aspect-ratio: 29 / 11;
	}

	.kodawari-space__tall {
		display: none;
	}

	.kodawari-space__ornament {
		display: none;
	}
}