/* 汎用ピークカルーセル（.peek-carousel）: コンテンツ幅に N 列ぴったりで、両端からはみ出すカードは
   out-of-bounds で淡く表示。送りと見切れ判定は carousel.js。 */
.peek-carousel {
	--peek-gap: 24px;
	--peek-cols: 3;
	--peek-container: min(1256px, 100vw - 64px);
	--peek-card: calc((var(--peek-container) - var(--peek-gap) * (var(--peek-cols) - 1)) / var(--peek-cols));
	position: relative;
}
@media (max-width: 760px) {
	.peek-carousel {
		--peek-cols: 2;
	}
}
@media (max-width: 620px) {
	.peek-carousel {
		--peek-cols: 1;
		--peek-gap: 16px;
		--peek-container: calc(100vw - 32px);
	}
}
/* 列数別: 4 → 3 → 2 → 1 と段階的に縮小。 */
.peek-carousel--cols-1 {
	--peek-cols: 1;
}
.peek-carousel--cols-2 {
	--peek-cols: 2;
}
@media (max-width: 620px) {
	.peek-carousel--cols-2 {
		--peek-cols: 1;
	}
}
.peek-carousel--cols-3 {
	--peek-cols: 3;
}
@media (max-width: 1200px) {
	.peek-carousel--cols-3 {
		--peek-cols: 2;
	}
}
@media (max-width: 620px) {
	.peek-carousel--cols-3 {
		--peek-cols: 1;
	}
}
.peek-carousel--cols-4 {
	--peek-cols: 4;
}
@media (max-width: 1200px) {
	.peek-carousel--cols-4 {
		--peek-cols: 3;
	}
}
@media (max-width: 760px) {
	.peek-carousel--cols-4 {
		--peek-cols: 2;
	}
}
@media (max-width: 620px) {
	.peek-carousel--cols-4 {
		--peek-cols: 1;
	}
}

/* トラックラッパーを 100vw に広げ、先頭カードを container の左端へ揃える。
   ガターは --peek-container から計算するので、個別カルーセルが --peek-container を上書きしても追従。 */
.peek-carousel__wrap {
	overflow: hidden;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding-left: max(32px, calc(50vw - var(--peek-container) / 2));
	padding-right: max(32px, calc(50vw - var(--peek-container) / 2));
}
.peek-carousel__track {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--peek-gap);
	transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
	will-change: transform;
	/* 横スワイプはJSで処理し、縦はページスクロールに委ねる。 */
	touch-action: pan-y;
}
.peek-carousel__track > * {
	flex: 0 0 var(--peek-card);
	transition: opacity 0.25s ease;
}
.peek-carousel__track > .out-of-bounds {
	opacity: 0.28;
}

/* 前へ／次へ。縦位置はカード画像比 750:490 の中央。 */
.peek-carousel__nav {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50vw);
	width: 100vw;
	height: calc(var(--peek-card) * 490 / 750);
	pointer-events: none;
	z-index: 3;
}
.peek-carousel__nav button {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	pointer-events: auto;
	background: #fff;
	color: var(--wp--preset--color--brand-primary, #b89766);
	border: 1px solid var(--wp--preset--color--brand-primary, #b89766);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
	transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
.peek-carousel__nav button:hover:not(:disabled) {
	background: var(--wp--preset--color--brand-primary, #b89766);
	color: #fff;
}
.peek-carousel__nav button:disabled {
	opacity: 0;
	pointer-events: none;
}
.peek-carousel__nav button[data-dir="-1"] {
	left: max(8px, calc(50vw - 650px));
}
.peek-carousel__nav button[data-dir="1"] {
	right: max(8px, calc(50vw - 650px));
}

@media (max-width: 700px) {
	.peek-carousel__wrap {
		padding-left: 16px;
		padding-right: 16px;
	}
}
/* 1列化（620px）以下: カードに最大幅を設けて中央寄せ。 */
@media (max-width: 620px) {
	.peek-carousel__track > * {
		max-width: 400px;
	}
	.peek-carousel__wrap {
		padding-left: max(16px, calc(50vw - 200px));
		padding-right: max(16px, calc(50vw - 200px));
	}
	.peek-carousel__nav {
		height: calc(min(var(--peek-card), 400px) * 490 / 750);
	}
}

/* カルーセルセクション: 上罫線＋上下余白。 */
.peek-carousel-section {
	padding: clamp(40px, 5vw, 56px) 0;
	border-top: 1px solid var(--wp--preset--color--line, #ececec);
}
.peek-carousel-section--no-border {
	border-top: 0;
}
/* 罫線なしセクションが続くときは上下余白を詰めて親子関係を視覚化。 */
.peek-carousel-section:has(+ .peek-carousel-section--no-border),
.news-archive:has(+ .peek-carousel-section--no-border) {
	padding-bottom: 24px;
}
.peek-carousel-section + .peek-carousel-section--no-border,
.news-archive + .peek-carousel-section--no-border {
	padding-top: 20px;
}
.peek-carousel-section__inner {
	padding-left: max(32px, calc(50vw - 628px));
	padding-right: max(32px, calc(50vw - 628px));
}
@media (max-width: 700px) {
	.peek-carousel-section__inner {
		padding-left: 16px;
		padding-right: 16px;
	}
}

/* 見出し帯（カルーセル上のタイトル）。見出しは全幅中央、「すべて見る」は右に固定する。
   1fr auto 1fr の対称スペーサーで、リンクの有無に関わらず見出しが中央に来る。 */
.peek-carousel-section .peek-carousel-head {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: baseline;
	gap: 16px;
	margin-bottom: clamp(20px, 3vw, 32px);
}
.peek-carousel-section .peek-carousel-head h2,
.peek-carousel-section .peek-carousel-head h3 {
	grid-column: 2;
	text-align: center;
	font-family: var(--wp--custom--brand-heading);
	font-weight: 700;
	letter-spacing: 0.04em;
	margin: 0;
}
/* h2＝セクション（宿泊・ダイニング等）／h3＝サブ。サイズは本文見出しと揃える
   （h2=本文 h2 と同じ clamp(20,2vw,23)）。トップページは別途 .home で 1段大きく上書き。 */
.peek-carousel-section .peek-carousel-head h2 {
	font-size: clamp(20px, 2vw, 23px);
}
.peek-carousel-section .peek-carousel-head h3 {
	font-size: clamp(15px, 1.5vw, 18px);
}
/* TOPバナー（ヒーロー直下）。21:9 のワイド画像＋タイトル。1枚/2枚は cols-1/cols-2 で切替。 */
.top-banner-card {
	display: block;
	color: inherit;
	text-decoration: none;
}
/* バナー画像はトリミング禁止（縦横とも省略しない）。縦横比そのままで全体を表示。 */
.top-banner-card .ph {
	overflow: visible;
}
.top-banner-card .ph img {
	width: 100%;
	height: auto;
	display: block;
}
.top-banner-card .body {
	margin-top: 14px;
}
.top-banner-card__title {
	margin: 0;
	font-family: var(--wp--custom--brand-heading);
	font-weight: var(--wp--custom--heading-weight, 700);
	font-size: 16px;
	line-height: 1.5;
	letter-spacing: 0.04em;
	color: #000;
}
a.top-banner-card:hover .top-banner-card__title {
	color: var(--wp--preset--color--brand-primary, #b89766);
}
/* 1枚表示（cols-1）は横長になりすぎないよう、カード幅を ~933px に抑える（21:9で約400px高）。
   左寄せのピークではなく、アクティブな1枚を画面中央に置き、前後を左右に覗かせる。 */
.peek-carousel--top-banner.peek-carousel--cols-1 {
	--peek-container: min(933px, 100vw - 64px);
}
.peek-carousel--top-banner.peek-carousel--cols-1 .peek-carousel__wrap {
	padding-left: max(16px, calc(50vw - 466px));
	padding-right: max(16px, calc(50vw - 466px));
}
.peek-carousel--top-banner.peek-carousel--cols-1 .peek-carousel__nav button[data-dir="-1"] {
	left: max(8px, calc(50vw - 490px));
}
.peek-carousel--top-banner.peek-carousel--cols-1 .peek-carousel__nav button[data-dir="1"] {
	right: max(8px, calc(50vw - 490px));
}
@media (max-width: 700px) {
	.peek-carousel--top-banner.peek-carousel--cols-1 {
		--peek-container: calc(100vw - 32px);
	}
	.peek-carousel--top-banner.peek-carousel--cols-1 .peek-carousel__wrap {
		padding-left: 16px;
		padding-right: 16px;
	}
}
/* 前へ/次へボタンの縦位置をバナー画像（21:9）の中央に合わせる。 */
.peek-carousel--top-banner .peek-carousel__nav {
	height: calc(var(--peek-card) * 9 / 21);
}
@media (max-width: 700px) {
	.top-banner-card__title {
		font-size: 14px;
	}
}

/* インフォメーションバナーのカード（ワイド画像＋タイトル＋抜粋）。トップページのお知らせ下バナーと共通。 */
.info-card {
	display: block;
	color: inherit;
	text-decoration: none;
}
/* バナー画像は 750:410。前へ／次へボタンの縦位置を画像の中央に合わせる（既定は 750:490 基準のため上書き）。 */
.peek-carousel--info .peek-carousel__nav {
	height: calc(var(--peek-card) * 410 / 750);
}
@media (max-width: 600px) {
	.peek-carousel--info .peek-carousel__nav {
		height: calc(min(var(--peek-card), 400px) * 410 / 750);
	}
}
/* カード画像は全体を表示する（トリミングしない）。枠の縦横比を固定せず画像本来の比率に合わせる。 */
.info-card .ph {
	overflow: hidden;
}
.info-card .ph img {
	width: 100%;
	height: auto;
	display: block;
}
.info-card .body {
	margin-top: 10px;
}
.info-card .info-card__title {
	margin: 0 0 6px;
	font-family: var(--wp--custom--brand-heading);
	font-weight: var(--wp--custom--heading-weight, 700);
	font-size: 15px;
	line-height: 1.4;
	letter-spacing: 0.04em;
	color: #000;
}
.info-card p {
	margin: 0;
	font-family: var(--wp--custom--brand-ui, var(--wp--custom--brand-body));
	font-size: 12px;
	line-height: 1.7;
	color: #555;
}
a.info-card:hover .info-card__title {
	color: var(--wp--preset--color--brand-primary, #b89766);
}

/* すべて見る（見出しの右端に固定）。下線あり。 */
.peek-carousel-section .peek-carousel-head .see-all {
	grid-column: 3;
	justify-self: end;
	font-family: var(--wp--custom--brand-ui, var(--wp--custom--brand-body));
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--brand-primary, #b89766);
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 2px;
	white-space: nowrap;
}

/* 編集画面ではフロントの送りスクリプト（carousel.js）が動かないため、トラックを横スクロール可能にして
   見切れたスライドも選択・編集できるようにする。.editor-styles-wrapper はエディタのキャンバスにのみ
   存在し、フロント（overflow:hidden のまま JS で送る）には影響しない。
   左右ガターはスクロール対象である track の padding に持たせる。スクロールコンテナ（wrap）の
   padding-right はスクロール末尾で無視されてしまうため、track 側に置くことで先頭・末尾とも同じ
   ガター（余白）が出るようにする。 */
.editor-styles-wrapper .peek-carousel__wrap {
	overflow-x: auto;
	padding-left: 0;
	padding-right: 0;
}
.editor-styles-wrapper .peek-carousel__track {
	/* 内容＋左右paddingぶんに広げ、右padding（末尾ガター）もスクロール範囲に含める
	   （flexトラックが wrap 幅に制限されると右paddingが overflow に入らず末尾ガターが消えるため）。 */
	width: max-content;
	padding-left: max(32px, calc(50vw - 628px));
	padding-right: max(32px, calc(50vw - 628px));
}