/* core/gallery ブロックスタイル「.is-style-hilton-slider」。1 枚ずつ表示で左右ボタン／スワイプ切替。
   送り処理は assets/js/gallery-slider.js。 */

/* 左右ボタン／インジケーターの配置基準。gallery は overflow:hidden でクリップするため、
   ボタンは外側のこのラッパー（クリップされない）に挿入する（JS が gallery を包む）。 */
.gallery-slider-wrap {
	position: relative;
}
/* .has-nested-images を含めて詳細度をコア（align-items:normal を当てる）に勝たせる。 */
.wp-block-gallery.has-nested-images.is-style-hilton-slider {
	position: relative;
	display: flex;
	flex-wrap: nowrap;
	gap: 0;
	/* キャプションを画像の下に出すため、クリップは横方向のみ（縦ははみ出しを許可）。
	   align-items:flex-start で各スライドを「画像＋キャプション」の高さにする（stretch だと
	   画像高さに揃えられキャプションがはみ出してクリップされる）。 */
	overflow-x: hidden;
	overflow-y: visible;
	align-items: flex-start;
	margin: 0 auto;
}
/* figure に figure 要素セレクタを含めて詳細度をコアの display:flex（.wp-block-gallery
   .has-nested-images figure.wp-block-image）に勝たせる。block にしないと flex 縦並びで
   画像の高さが 0 に潰れる。 */
.wp-block-gallery.is-style-hilton-slider > figure.wp-block-image {
	display: block;
	flex: 0 0 100%;
	max-width: 100%;
	margin: 0;
	transform: translateX(calc(var(--gs-index, 0) * -100%));
	transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.wp-block-gallery.is-style-hilton-slider > figure.wp-block-image img {
	width: 100%;
	height: auto; /* トリミングせず画像全体を表示 */
	display: block;
}
/* キャプションは画像に重ねず figcaption として画像の下に表示。コア既定の text-shadow
   （画像上での可読性用）は白地では文字が滲んで見えるため解除する。 */
.wp-block-gallery.is-style-hilton-slider figure.wp-block-image figcaption {
	position: static;
	margin: 10px 0 0;
	padding: 0;
	max-width: none;
	background: none;
	text-align: left;
	text-shadow: none;
	color: inherit;
	font-size: 13px;
	line-height: 1.6;
	will-change: auto;
}
.wp-block-gallery.is-style-hilton-slider figure.wp-block-image:has(figcaption)::before {
	content: none;
}
/* 前へ／次へ。画像の左右端に重ねる円形ボタン（front のみ・JSで挿入）。 */
.gallery-slider__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 42px;
	height: 42px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	z-index: 2;
	color: var(--wp--preset--color--brand-primary, #b89766);
	background: rgba(255, 255, 255, 0.9);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14);
	transition: background 0.2s ease, color 0.2s ease;
}
.gallery-slider__nav:hover {
	background: var(--wp--preset--color--brand-primary, #b89766);
	color: #fff;
}
/* 左右ボタンは画像の左右端に中心を合わせ、半分だけ外へ出す（ラッパーに挿入されクリップされない）。 */
.gallery-slider__prev {
	left: 0;
	transform: translate(-50%, -50%);
}
.gallery-slider__next {
	left: auto;
	right: 0;
	transform: translate(50%, -50%);
}
/* 現在の表示位置インジケーター（横線を枚数分並べる。JSで挿入）。画像下部中央に重ねる。 */
.gallery-slider__dots {
	position: absolute;
	left: 50%;
	bottom: 14px;
	transform: translateX(-50%);
	z-index: 2;
	display: flex;
	gap: 6px;
}
.gallery-slider__dot {
	width: 22px;
	height: 3px;
	padding: 0;
	border: 0;
	border-radius: 0;
	cursor: pointer;
	background: rgba(255, 255, 255, 0.55);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
	transition: background 0.25s ease;
}
.gallery-slider__dot.is-active {
	background: #fff;
}

/* ── エディタ: フロントは JS で 1 枚ずつのスライダーになるが、エディタには送り処理が無い。
   本番と同じく 1 枚＝全幅（フル表示＋キャプション下）で見せ、横スクロールで残りのスライドを
   確認・編集できるようにする（本番の見栄えを確認しながら編集できる）。
   ギャラリー直下の構造は WP バージョンで変わる（レイアウトラッパー有無）ため双方に対応する。 ── */
.editor-styles-wrapper .wp-block-gallery.is-style-hilton-slider,
.editor-styles-wrapper .wp-block-gallery.is-style-hilton-slider .block-editor-block-list__layout {
	display: flex;
	flex-wrap: nowrap;
	gap: 0;
	overflow-x: auto;
}
.editor-styles-wrapper .wp-block-gallery.is-style-hilton-slider > .wp-block-image,
.editor-styles-wrapper .wp-block-gallery.is-style-hilton-slider .block-editor-block-list__layout > .wp-block-image {
	flex: 0 0 100%;
	max-width: 100%;
	margin: 0;
}
.editor-styles-wrapper .wp-block-gallery.is-style-hilton-slider .wp-block-image img {
	width: 100%;
	height: auto;
}