/**
 * No.20 ギャラリー。
 * スタイル: デフォルト（grid） / 横並び（row） / カルーセル（carousel）。
 * フロントは .gallery[data-ui="gallery"][data-style] と BEM。
 * エディタは render_block が走らないため、コアセレクタで同等の見た目を確保する。
 *
 * ブレークポイントは theme.json の値を直書き（@media は CSS 変数不可）。
 * - tablet-small.min 768px → max 767px
 * - sp-wide.min 480px → max 479px（デフォルトを1列にする）
 *
 * コアの .has-nested-images は figcaption を画像へ重ね、:not(#individual-image) で
 * ID 特異度を足すため、キャプション位置と列幅は同特異度以上で上書きする。
 */

.gallery[data-ui="gallery"] {
	position: relative;
	box-sizing: border-box;
}

/*
 * ギャラリー一括の枠。CSS 変数はルートから継承し、個別画像の同名変数が優先。
 * --sumida-image-radius 未設定時は宣言が無効になり、個別の角丸を維持する。
 */
.gallery[data-ui="gallery"]:not([data-style="carousel"]) .gallery__item img,
.wp-block-gallery:not(.is-style-carousel) .wp-block-image img,
.editor-styles-wrapper .wp-block-gallery:not(.is-style-carousel) .wp-block-image img {
	box-sizing: border-box;
	border-width: var(--sumida-image-border-width, 0);
	border-style: var(--sumida-image-border-style, none);
	border-color: var(--sumida-image-border-color, transparent);
	border-radius: var(--sumida-image-radius);
}

.wp-block-gallery.has-nested-images figure.wp-block-image figcaption,
.wp-block-gallery.has-nested-images figure.wp-block-image .wp-element-caption,
.gallery__caption {
	position: relative !important;
	left: auto;
	right: auto;
	bottom: auto;
	width: 100%;
	max-height: none;
	margin: var(--wp--custom--atom--lg) 0 0 !important;
	padding: 0 !important;
	overflow: visible;
	background: none !important;
	color: var(--wp--preset--color--base-black) !important;
	text-shadow: none;
	text-align: left;
	font-family: var(--wp--preset--font-family--jp-sans);
	font-size: var(--wp--preset--font-size--text-xs);
	font-weight: var(--wp--custom--font-weight--regular);
	line-height: var(--wp--custom--line-height--regular);
	letter-spacing: var(--wp--custom--letter-spacing--none);
}

.wp-block-gallery.has-nested-images figure.wp-block-image:has(figcaption)::before {
	content: none !important;
}

/* -------------------------------------------------------------------------
   デフォルト: 2列グリッド（data-style="grid"）
   幅 = (100% - gap) / 2、gap = molecule--md、高さは画像成り行き。
   sp-wide 未満（479px 以下）で1列。横スクロールなし。
   ------------------------------------------------------------------------- */

.gallery[data-style="grid"],
.wp-block-gallery:not([data-ui="gallery"]):not(.is-style-row):not(.is-style-carousel),
.wp-block-gallery.is-style-grid {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--wp--custom--molecule--md);
	margin: 0;
	padding: 0;
	list-style: none;
	--wp--style--unstable-gallery-gap: var(--wp--custom--molecule--md);
}

.gallery[data-style="grid"].has-nested-images > .gallery__item:not(#individual-image),
.wp-block-gallery:not([data-ui="gallery"]):not(.is-style-row):not(.is-style-carousel).has-nested-images > .wp-block-image,
.wp-block-gallery:not([data-ui="gallery"]):not(.is-style-row):not(.is-style-carousel).has-nested-images figure.wp-block-image:not(#individual-image),
.wp-block-gallery.is-style-grid.has-nested-images figure.wp-block-image:not(#individual-image) {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	box-sizing: border-box;
	flex: 0 0 calc((100% - var(--wp--custom--molecule--md)) / 2);
	width: calc((100% - var(--wp--custom--molecule--md)) / 2);
	max-width: calc((100% - var(--wp--custom--molecule--md)) / 2);
	margin: 0;
}

.gallery[data-style="grid"] .gallery__item img,
.wp-block-gallery:not([data-ui="gallery"]):not(.is-style-row):not(.is-style-carousel) .wp-block-image img,
.wp-block-gallery.is-style-grid .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	max-width: none;
	object-fit: contain;
}

.gallery[data-style="grid"].is-cropped .gallery__item img,
.wp-block-gallery:not([data-ui="gallery"]):not(.is-style-row):not(.is-style-carousel).is-cropped figure.wp-block-image img,
.wp-block-gallery.is-style-grid.is-cropped figure.wp-block-image img {
	flex: 0 0 auto;
	height: auto;
	object-fit: contain;
}

@media (max-width: 479px) {
	.gallery[data-style="grid"].has-nested-images > .gallery__item:not(#individual-image),
	.wp-block-gallery:not([data-ui="gallery"]):not(.is-style-row):not(.is-style-carousel).has-nested-images figure.wp-block-image:not(#individual-image),
	.wp-block-gallery.is-style-grid.has-nested-images figure.wp-block-image:not(#individual-image) {
		flex: 0 0 100%;
		width: 100%;
		max-width: 100%;
	}
}

/* -------------------------------------------------------------------------
   横並び: data-style="row"。ラッパーは .gallery、スクロール本体は .gallery__track。
   常に1行・横スクロール。幅は画像成り行き。gap = atom--rg。
   SP 高さ 50vw。PC はコンテナ幅の 50%（50cqw）、800px 想定の仮上限 400px。
   ------------------------------------------------------------------------- */

.gallery[data-style="row"] .gallery__track,
.wp-block-gallery.is-style-row:not(.gallery__track),
.wp-block-gallery.is-style-row .block-editor-inner-blocks,
.wp-block-gallery.is-style-row .block-editor-inner-blocks > .block-editor-block-list__layout {
	container-type: inline-size;
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: flex-start !important;
	gap: var(--wp--custom--atom--rg);
	margin: 0;
	padding: 0;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
	list-style: none;
}

.wp-block-gallery.is-style-row > .block-editor-inner-blocks {
	width: 100%;
	max-width: 100%;
}

.gallery[data-style="row"] .gallery__track::-webkit-scrollbar,
.wp-block-gallery.is-style-row:not(.gallery__track)::-webkit-scrollbar,
.wp-block-gallery.is-style-row .block-editor-block-list__layout::-webkit-scrollbar {
	display: none;
}

.gallery[data-style="row"] .gallery__item:not(#individual-image),
.wp-block-gallery.has-nested-images.is-style-row figure.wp-block-image:not(#individual-image),
.wp-block-gallery.has-nested-images.is-style-row .gallery__item:not(#individual-image) {
	display: table !important;
	flex: 0 0 auto !important;
	flex-grow: 0 !important;
	align-self: flex-start !important;
	box-sizing: border-box;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
}

.gallery[data-style="row"] .gallery__item img,
.gallery[data-style="row"] .is-cropped .gallery__item img,
.wp-block-gallery.has-nested-images.is-style-row figure.wp-block-image:not(#individual-image) img,
.wp-block-gallery.has-nested-images.is-style-row.is-cropped figure.wp-block-image:not(#individual-image) img,
.wp-block-gallery.has-nested-images.is-style-row.is-cropped figure.wp-block-image:not(#individual-image) a {
	display: block !important;
	flex: 0 0 auto !important;
	width: auto !important;
	height: 50vw !important;
	max-width: none !important;
	object-fit: contain !important;
}

.gallery[data-style="row"] .gallery__caption,
.wp-block-gallery.has-nested-images.is-style-row figure.wp-block-image figcaption,
.wp-block-gallery.has-nested-images.is-style-row figure.wp-block-image .wp-element-caption {
	display: table-caption;
	caption-side: bottom;
	width: auto;
}

.gallery__hint {
	display: none;
}

@media (min-width: 768px) {
	.gallery[data-style="row"] .gallery__item img,
	.gallery[data-style="row"] .is-cropped .gallery__item img,
	.wp-block-gallery.has-nested-images.is-style-row figure.wp-block-image:not(#individual-image) img,
	.wp-block-gallery.has-nested-images.is-style-row.is-cropped figure.wp-block-image:not(#individual-image) img {
		height: 50cqw !important;
		max-height: 400px;
	}
}

@media (max-width: 767px) {
	.gallery[data-style="row"] .gallery__hint {
		position: absolute;
		top: 42%;
		right: 0;
		z-index: 2;
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		width: 2rem;
		height: 2rem;
		pointer-events: none;
		border: var(--wp--custom--border-width--thin) solid color-mix(in srgb, var(--wp--preset--color--line-grey) 50%, transparent);
		background-color: color-mix(in srgb, var(--wp--preset--color--base-white) 50%, transparent);
	}

	.gallery__hint .icon {
		inline-size: 1.625rem;
		block-size: 2rem;
	}
}

/* -------------------------------------------------------------------------
   カルーセル
   ------------------------------------------------------------------------- */

/*
 * フロントのカルーセルは div.wp-block-gallery で has-nested-images を持たない。
 * コアの旧ギャラリー規則
 *   .wp-block-gallery:not(.has-nested-images) { display: flex; }
 * が当たると gallery__body が横並びになり崩れる。
 */
.gallery[data-style="carousel"],
.wp-block-gallery.is-style-carousel:not(.has-nested-images) {
	display: block;
}

.gallery[data-style="carousel"],
.wp-block-gallery.is-style-carousel {
	--gallery-slide: 31.25rem;
	--gallery-slide-side: 25rem;
	--gallery-control: 3rem;
	box-sizing: border-box;
	outline: none;
}

.gallery[data-style="carousel"]:focus-visible {
	outline: 1px solid var(--wp--preset--color--logo-blue);
	outline-offset: 2px;
}

.gallery[data-style="carousel"] .gallery__body {
	position: relative;
	box-sizing: border-box;
	overflow: hidden;
	height: var(--gallery-slide);
	touch-action: pan-y;
}

.gallery[data-style="carousel"] .gallery__track {
	position: relative;
	height: 100%;
}

.gallery[data-style="carousel"] .gallery__item {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: var(--gallery-slide-side);
	height: var(--gallery-slide-side);
	margin: 0;
	overflow: hidden;
	pointer-events: none;
	opacity: 0;
}

.gallery[data-style="carousel"] .gallery__item[data-state="current"] {
	z-index: 1;
	width: var(--gallery-slide);
	height: var(--gallery-slide);
	pointer-events: auto;
	opacity: 1;
}

.gallery[data-style="carousel"] .gallery__item[data-state="prev"],
.gallery[data-style="carousel"] .gallery__item[data-state="next"] {
	opacity: var(--wp--custom--opacity--50);
}

.gallery[data-style="carousel"] .gallery__figure {
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	margin: 0;
	overflow: hidden;
	border-style: var(--sumida-image-border-style, none);
	border-width: var(--sumida-image-border-width, 0);
	border-color: var(--sumida-image-border-color, transparent);
	border-radius: var(--sumida-image-radius);
}

.gallery[data-style="carousel"] .gallery__figure.is-style-rounded {
	border-radius: var(--sumida-image-radius, 9999px);
}

.gallery[data-style="carousel"] .gallery__figure img,
.gallery[data-style="carousel"] .gallery__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

.gallery[data-style="carousel"] .gallery__figure img {
	border: 0 !important;
	border-radius: 0 !important;
}

.gallery[data-style="carousel"] .gallery__captions {
	display: flex;
	justify-content: center;
	padding-top: 0;
}

.gallery[data-style="carousel"] .gallery__caption-item {
	display: none;
	box-sizing: border-box;
	width: var(--gallery-slide);
	max-width: 100%;
	margin: 0;
}

.gallery[data-style="carousel"] .gallery__caption-item[data-state="current"] {
	display: block;
}

.gallery[data-style="carousel"] .gallery__controls {
	position: absolute;
	top: 50%;
	left: 0;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-sizing: border-box;
	width: 100%;
	padding-inline: var(--wp--custom--atom--xl);
	transform: translateY(-50%);
	pointer-events: none;
}

.gallery[data-style="carousel"] .gallery__control {
	/*
	 * primary ボタンと同じ invert 軸（a=白 / b=logo-blue）。
	 * 背景だけ 70% 不透明度を維持するため、hover 時は color-mix で上書きする。
	 */
	--hover-invert-a: var(--wp--preset--color--base-white);
	--hover-invert-b: var(--wp--preset--color--logo-blue);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: var(--gallery-control);
	height: var(--gallery-control);
	padding: 0;
	pointer-events: auto;
	cursor: pointer;
	color: var(--wp--preset--color--base-black);
	border: var(--wp--custom--border-width--thin) solid color-mix(in srgb, var(--wp--preset--color--line-grey) 80%, transparent);
	background-color: color-mix(in srgb, var(--hover-invert-a) 70%, transparent);
	appearance: none;
}

.gallery[data-style="carousel"] .gallery__control[data-hover-bg="invert"]:hover,
.gallery[data-style="carousel"] .gallery__control[data-hover-bg="invert"]:focus-visible,
.gallery[data-style="carousel"] .gallery__control[data-hover-bg="invert"].is-preview-hover {
	background-color: color-mix(in srgb, var(--hover-invert-b) 70%, transparent);
}

.gallery[data-style="carousel"] .gallery__control:focus {
	outline: none;
}

.gallery[data-style="carousel"] .gallery__control:focus-visible {
	outline: 1px solid var(--wp--preset--color--logo-blue);
	outline-offset: 2px;
}

.gallery[data-style="carousel"] .gallery__control .icon {
	inline-size: 2.25rem;
	block-size: 2.75rem;
}

.gallery[data-style="carousel"] .gallery__thumbs {
	display: flex;
	align-items: center;
	justify-content: center;
	padding-top: var(--wp--custom--atom--xxl);
}

.gallery[data-style="carousel"] .gallery__thumbs-track {
	display: flex;
	align-items: center;
	gap: var(--wp--custom--atom--xs);
}

.gallery[data-style="carousel"] .gallery__thumb {
	box-sizing: border-box;
	width: 3.125rem;
	height: 3.125rem;
	padding: 0;
	overflow: hidden;
	cursor: pointer;
	border: var(--wp--custom--border-width--light) solid transparent;
	background: transparent;
	appearance: none;
}

.gallery[data-style="carousel"] .gallery__thumb[data-state="current"] {
	border-color: var(--wp--preset--color--logo-blue);
}

.gallery[data-style="carousel"] .gallery__thumb:focus {
	outline: none;
}

.gallery[data-style="carousel"] .gallery__thumb:focus-visible {
	outline: 1px solid var(--wp--preset--color--logo-blue);
	outline-offset: 2px;
}

@media (max-width: 767px) {
	body:not(.editor-styles-wrapper) .gallery[data-style="carousel"],
	body:not(.editor-styles-wrapper) .wp-block-gallery.is-style-carousel {
		--gallery-slide: 100%;
		--gallery-slide-side: 100%;
		--gallery-control: 2rem;
	}

	body:not(.editor-styles-wrapper) .gallery[data-style="carousel"] .gallery__body {
		height: auto;
		aspect-ratio: 1;
	}

	body:not(.editor-styles-wrapper) .gallery[data-style="carousel"] .gallery__item,
	body:not(.editor-styles-wrapper) .gallery[data-style="carousel"] .gallery__item[data-state="current"],
	body:not(.editor-styles-wrapper) .gallery[data-style="carousel"] .gallery__item[data-state="prev"],
	body:not(.editor-styles-wrapper) .gallery[data-style="carousel"] .gallery__item[data-state="next"] {
		width: 100%;
		height: 100%;
		opacity: 1;
	}

	body:not(.editor-styles-wrapper) .gallery[data-style="carousel"] .gallery__control .icon {
		inline-size: 1.625rem;
		block-size: 2rem;
	}

	body:not(.editor-styles-wrapper) .gallery[data-style="carousel"] .gallery__thumb {
		width: 2.5rem;
		height: 2.5rem;
	}
}

/*
 * エディタ: render_block は走らないため gallery__body が無い。
 * WP 7 では画像が .wp-block-gallery の直下に並ぶ。
 * 先頭を current スライド、以降をサムネ相当にする。
 * コアの is-cropped / columns-* / is-layout-flex を !important で打ち消す。
 * キャンバス幅が 767px 未満でも PC レイアウトを維持する。
 */
.editor-styles-wrapper .wp-block-gallery.is-style-carousel.has-nested-images {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	align-items: flex-start !important;
	justify-content: center;
	gap: var(--wp--custom--atom--xs);
	--gallery-slide: 31.25rem;
	--gallery-slide-side: 25rem;
}

.editor-styles-wrapper .wp-block-gallery.is-style-carousel.has-nested-images > .wp-block-image:first-child,
.editor-styles-wrapper .wp-block-gallery.is-style-carousel.has-nested-images > figure.wp-block-image:first-child:not(#individual-image) {
	flex: 0 0 100% !important;
	width: min(100%, var(--gallery-slide)) !important;
	max-width: 100% !important;
	height: var(--gallery-slide) !important;
	margin: 0 auto !important;
}

.editor-styles-wrapper .wp-block-gallery.is-style-carousel.has-nested-images > .wp-block-image:not(:first-child),
.editor-styles-wrapper .wp-block-gallery.is-style-carousel.has-nested-images > figure.wp-block-image:not(:first-child):not(#individual-image) {
	flex: 0 0 3.125rem !important;
	width: 3.125rem !important;
	max-width: 3.125rem !important;
	height: 3.125rem !important;
	margin: 0 !important;
}

.editor-styles-wrapper .wp-block-gallery.is-style-carousel.has-nested-images > .wp-block-image,
.editor-styles-wrapper .wp-block-gallery.is-style-carousel.has-nested-images > figure.wp-block-image:not(#individual-image) {
	box-sizing: border-box;
	overflow: hidden;
	border-style: var(--sumida-image-border-style, none);
	border-width: var(--sumida-image-border-width, 0);
	border-color: var(--sumida-image-border-color, transparent);
	border-radius: var(--sumida-image-radius);
}

.editor-styles-wrapper .wp-block-gallery.is-style-carousel.has-nested-images > .wp-block-image.is-style-rounded,
.editor-styles-wrapper .wp-block-gallery.is-style-carousel.has-nested-images > figure.wp-block-image.is-style-rounded:not(#individual-image) {
	border-radius: var(--sumida-image-radius, 9999px);
}

.editor-styles-wrapper .wp-block-gallery.is-style-carousel.has-nested-images figure.wp-block-image:not(#individual-image) img {
	display: block !important;
	flex: 0 0 auto !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover !important;
	border: 0 !important;
	border-radius: 0 !important;
}

.editor-styles-wrapper .wp-block-gallery.is-style-carousel.has-nested-images > .wp-block-image:not(:first-child) figcaption,
.editor-styles-wrapper .wp-block-gallery.is-style-carousel.has-nested-images > figure.wp-block-image:not(:first-child) figcaption {
	display: none;
}

.editor-styles-wrapper .wp-block-gallery.is-style-carousel.has-nested-images > .wp-block-image:first-child figcaption,
.editor-styles-wrapper .wp-block-gallery.is-style-carousel.has-nested-images > figure.wp-block-image:first-child figcaption {
	display: block;
	width: 100%;
}