/* ===============================
   kodawari-intro: 導入（全席完全個室 + スペック一覧）
   SP: 1カラム縦積み / PC: 左テキスト+スペック・右写真の2カラム
   =============================== */

.kodawari-intro {
	padding-block: var(--space-3);
}

/* 参考画像のSP左右余白は約37px。container の18pxでは足りないため上書き */
.kodawari-intro__inner {
	padding-inline: var(--space-8);
}

/* SPの見出しは参考画像実測17px。h2-mobile(21px)だと375幅+左右余白37pxで
   2行目が3行に折れるため、同値の既存トークン hero-mobile を使う */
.kodawari-intro__title {
	font-size: var(--fs-hero-mobile);
	font-weight: var(--fw-medium);
	line-height: var(--lh-tight);
	letter-spacing: 0.08em;
	color: var(--color-primary);
}

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

/* エントランス写真（白フチ付き） */
.kodawari-intro__media {
	margin-top: var(--space-1);
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border: var(--space-1) solid var(--color-text-inverse);
	box-shadow: var(--shadow-card);
}

/* 素材右端の金色の像は参考画像に写っていない。
   16:9はソース(3:2)より横長でobject-fitでは左右を切れないため、
   枠より広げて右へはみ出させ、overflowでクロップする */
.kodawari-intro__media img {
	width: 110%;
	max-width: none;
	height: 100%;
	object-fit: cover;
	object-position: left center;
}

/* スペック5項目: SPは上下罫線の縦リスト */
.kodawari-intro__specs {
	margin-top: var(--space-2);
}

.kodawari-intro__spec {
	text-align: center;
	padding-block: var(--space-1);
	border-top: 1px solid var(--color-border);
	font-size: var(--fs-body);
	line-height: var(--lh-tight);
	letter-spacing: 0.08em;
}

.kodawari-intro__spec:last-child {
	border-bottom: 1px solid var(--color-border);
}

@media (max-width: 767px) {
	.kodawari-intro__title {
		font-size: var(--fs-h2-mobile);
	}

	.kodawari-intro__body {
		font-size: var(--fs-body-pc);
	}
}

/* ===============================
   PC: 2カラム（左: 見出し+本文+スペック横並び / 右: 写真）
   =============================== */

@media (min-width: 768px) {
	.kodawari-intro {
		padding-block: var(--space-7) var(--space-9);
	}

	/* 参考画像実測（1440幅）: 写真は 551×405px。コンテンツ幅は1200px
	   （container 1320 は border-box で gutter 60×2 を含む）のため、
	   見出し（fs-h2=40px・15文字=約624px）が2行で収まる左632pxを確保し、
	   残りを写真カラム（544px ≒ 実測551px）に充てる */
	.kodawari-intro__inner {
		padding-inline: var(--container-gutter);
		display: grid;
		column-gap: var(--space-6);
		grid-template:
			"title media" auto
			"body  media" auto
			"specs media" 1fr /
			minmax(0, 632fr) minmax(0, 544fr);
	}

	.kodawari-intro__title {
		grid-area: title;
		font-size: var(--fs-h2);
		letter-spacing: 0.04em;
	}

	/* PCは1行目のみ赤、2行目は黒 */
	.kodawari-intro__title-line2 {
		color: var(--color-text);
	}

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

	/* 参考画像は約4:3クロップで、右端の像が写らない位置。左寄せクロップで合わせる */
	.kodawari-intro__media {
		grid-area: media;
		margin-top: 0;
		aspect-ratio: 4 / 3;
	}

	.kodawari-intro__media img {
		width: 100%;
	}

	/* スペックは縦罫線区切りの横並び1行 */
	.kodawari-intro__specs {
		grid-area: specs;
		align-self: end;
		margin-top: var(--space-8);
		margin-bottom: var(--space-9); /* 参考画像ではスペック列が写真下端より約40〜50px上 */
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		row-gap: var(--space-3);
	}

	.kodawari-intro__spec {
		padding-block: 0;
		padding-inline: var(--space-3);
		border-top: 0;
		border-left: 1px solid var(--color-border);
		font-size: var(--fs-body-sm);
		line-height: var(--lh-tight);
	}

	.kodawari-intro__spec:first-child {
		padding-left: 0;
		border-left: 0;
		max-width: var(--space-13); /* 「JR横浜線 相模原駅より徒歩5分」を2行に折る */
	}

	.kodawari-intro__spec:last-child {
		border-bottom: 0;
	}
}