/* ==========================================================================
   Sauna Blog Magazine - FV Gallery
   トップページFVの画像部分（複数写真の無限ループギャラリー）専用CSS。

   既存の .p_top-fv* 系セレクタ（テキストブロック等）とは名前空間を完全に分離しており、
   このファイルはトップページ (is_front_page()) にのみ読み込まれる。

   最重要方針（rules/fv_gallery_rules.md 参照）:
   - 新ギャラリーは既存FVの高さを一切変えない・押し広げない
   - .p_top-fvText 自体は変更しない（このファイルは一切参照しない）
   - PC: 既存の `aspect-ratio:16/9` と等価な `calc(100vw * 9 / 16)` をギャラリー
     全体の高さとし、その内部だけを上下2段（段間4px）に分割する。逆方向ループの
     無限ループを維持する（`.sbm-fv-row--top`/`.sbm-fv-row--bottom`の2段構成）
   - SP（2026-09-21・4回目改訂で1段構成へ変更。旧2段設計の経緯は末尾の
     changelog参照）: 既存の`.p_top-fvImage { height: 100vh; }`を維持したまま、
     `sp.row_top`→`sp.row_bottom`の順で結合した12枚を**1段の横スクロール**
     ギャラリーとして表示する。PCのような2段・上下逆方向ループは行わない
   - PCタイルは固定幅（calc式）でobject-fit:coverによる横長写真基準のクロップを
     許容する（2026-09-21改訂: 密度を上げるため幅を縮小。以降変更なし）
   - SPタイルは5〜6回目改訂で「写真の自然な縦横比をそのまま使う
     （width:auto）」方針を採っていたが、横長写真の横幅が過大になり
     1枚あたりの占有時間・占有幅が長すぎるという問題が生じたため、
     2026-09-21・7回目改訂で撤回した。現在はPCと同じ「固定タイル幅
     （70vw。8回目改訂で75vw→70vwへ微調整）+ object-fit:cover」方式で、
     写真ごとの表示時間・占有幅を揃えている。**クロップなしという旧方針も
     7回目改訂で撤回し**、
     FV用途として被写体が不自然に切れない範囲でのobject-fit:coverによる
     必要最小限のクロップを許可する（object-positionは既存データを
     そのまま活用する）。詳細は下部のコメント参照
   - `.sbm-fv-gallery__sp`のデータは`sp.row_top`/`sp.row_bottom`のまま
     （REST POSTなし、option version=1は変更しない）。PHP側の
     `sbm_fv_gallery_merge_sp_items()`が描画時だけrow_top→row_bottomの順で
     1本の配列に結合し、結合時に同一attachment_idが重複していれば
     2回目以降の出現を除外する（データそのものは無編集のまま）
   - SPの写真列をFV内のどこに置くかは、実際の本番サイトの`.p_top-fvText`のCSS
     （SP時: `bottom:-22%; right:50%; transform:translateX(50%);`、つまりFVの
     下端付近からさらに下（次セクション側）へはみ出す形で配置されている）を
     確認したうえで、写真列単体として自然な位置（FV内の縦方向中央）に配置した。
     `.p_top-fvText`との最終的な重なり調整は別途行う
   - 無限ループは、複製グループを含めた移動距離が正確に1グループ分となるよう、
     flexの`gap`ではなく各アイテムの`margin-right`でスペースを持たせている
     （`gap`だとアイテム数がn個に対してgapがn-1個しか生まれず、ループの継ぎ目で
     半gap分のズレが発生するため、あえて使用していない。SPのようにタイル幅が
     写真ごとに異なる場合でも、オリジナル/複製の写真列と順序が完全に同じであれば
     合計幅は必ず一致するため、この方式は幅が不揃いでも数学的に成立する）
   - PCのアニメーション方向・ループ構造・速度（60s）は無変更。SPは1段12枚に
     なったことで1ループあたりの移動距離が従来の2倍前後になったため、
     「ゆっくり」という要件を保つ目的でduration を45s→90s に調整した
     （px/秒の体感速度を従来相当に保つための比例調整。方向・ループ構造自体は
     変更していない）
   - `.sbm-fv-item`（`<figure>`要素）には`margin:0`を明示指定している。
     UA既定のfigure margin（特にmargin-top/bottom）をリセットしないと、
     環境によって（特にwp-admin内の管理者プレビューはフロントエンドの
     Gutenberg block-library CSSによるfigureリセットを読み込まないため）
     宣言上のgap値と実際の見た目が一致しない・PC下段画像の下側border-radiusが
     rowの`overflow:hidden`でクロップされる、といった不具合の原因になる
     （実機検証で発覚し修正済み。margin-rightは既存どおり、より詳細な
     セレクタで個別に上書きする）

   changelog（SPレイアウトの変遷。詳細な経緯は`rules/fv_gallery_rules.md`参照）:
   1回目: rowの高さ＝画像の高さだった設計をやめ、画像自体のサイズを
     width:auto+height:27vh+max-widthで直接制御するよう変更
   2回目: rowをFV(100vh)から機械的に2等分する方式をやめ、
     flex-direction:column+gap+justify-content:centerで2段をまとめて配置
   3回目: figureの既定marginが宣言値と実際の見た目のズレの真因と判明し、
     margin:0を明示指定（PC/SP双方の不具合を解消）
   4回目: 2段構成自体をやめ、sp.row_top/row_bottomを結合した
     12枚を1段の横スクロールギャラリーに変更
   5回目: 「375pxで1.5〜2枚見せる」密度優先の方針を撤回し、
     height:27vh+max-width:54vwをheight:calc(100vh-16px)（max-width無し）に
     変更。FVの高さをほぼいっぱい使い、横方向の表示枚数は結果でしかない
     デザインへ転換した
   6回目: height:calc(100vh - 16px)では写真が大きすぎ、横長写真の
     可視範囲が狭くなりすぎるとのフィードバックを受け、height:90vhへ調整
     （上下合計の余白を16px→10vhへ）。画像高さ以外（max-width無し・gap・
     border-radius・duration・PC側等）は変更していない
   7回目: height:90vh+width:autoでは横長写真の横幅・占有時間が
     過大という問題が残ったため、「自然な縦横比をそのまま使う」方針・
     「クロップなし」方針の両方を撤回。PCと同じ「固定タイル幅(75vw)+
     object-fit:cover」方式に変更し、rowにも明示的な高さ
     (calc(100vh - 8px))を持たせて基底のheight:100%チェーンをそのまま
     再利用する構成にした。写真間gap(6px)・border-radius(6px)・
     animation-duration(90s)・PC側・写真データ・写真順は変更していない
   8回目（今回）: 375pxで1枚目の占有率がやや大きく、複数写真が横に
     流れているFVであることが分かりにくいとのフィードバックを受け、
     タイル幅を75vw→70vwへ微調整。height:calc(100vh - 8px)・上下約4pxの
     余白・object-fit:cover・object-position・border-radius・gap・
     animation-duration(90s)・PC側・写真データ・写真順は変更していない
   ========================================================================== */

.sbm-fv-gallery {
	overflow: hidden;
	width: 100%;
}

.sbm-fv-gallery__pc {
	display: block;
	height: calc(100vw * 9 / 16);
	overflow: hidden;
}

.sbm-fv-gallery__sp {
	display: none;
}

.sbm-fv-row {
	width: 100%;
	overflow: hidden;
}

/* PC: 2段分割。段間gap(4px。2026-09-21に8pxから縮小)を引いた残りを2等分し、
   合計が calc(100vw*9/16) を超えないようにする（FV全体の高さは変えない）。 */
.sbm-fv-gallery__pc .sbm-fv-row {
	height: calc((100vw * 9 / 16 - 4px) / 2);
}
.sbm-fv-gallery__pc .sbm-fv-row--top {
	margin-bottom: 4px;
}

/* SP（2026-09-21・7回目改訂）: PCと同様、rowに明示的な高さを持たせる
   （calc(100vh - 8px)）。この差分8pxは、border-radiusの角がFVの
   `overflow:hidden`境界とちょうど重ならないようにするための必要最小限の
   安全余白で、`.sbm-fv-gallery__sp`側の`align-items:center`により
   自動的に上下4pxずつに配分される（5vhのような大きな余白ではない）。
   rowに定義済みの高さがあることで、基底の`.sbm-fv-track{height:100%}`・
   `.sbm-fv-item{height:100%}`・`.sbm-fv-item img{height:100%}`がすべて
   曖昧さなく解決できる（PCの2段構成とまったく同じ仕組みをそのまま流用する）。 */
.sbm-fv-gallery__sp .sbm-fv-row {
	height: calc(100vh - 8px);
}

.sbm-fv-track {
	display: flex;
	height: 100%;
	align-items: stretch;
	width: max-content;
	will-change: transform;
	animation: sbm-fv-scroll-left 60s linear infinite;
}

/* 下段は逆方向ループ。PC/SP共通の1ルールで両方をカバーする。 */
.sbm-fv-row--bottom .sbm-fv-track {
	animation-name: sbm-fv-scroll-right;
}

/* 2026-09-21・4回目改訂: SPが2段(6枚/段)から1段12枚へ変更されたことに伴い、
   1ループあたりの移動距離が従来のほぼ2倍になった。「ゆっくり」という要件を
   保つため、durationも45s→90sへ比例調整し、px/秒の体感速度を従来相当に保つ。 */
.sbm-fv-gallery__sp .sbm-fv-track {
	animation-duration: 90s;
}

/* 無限ループ用に複製した側のグループ。aria-hidden="true"はHTML側で付与し、
   ここでは display:contents により、中の .sbm-fv-item を .sbm-fv-track の
   直接の flex アイテムとして扱う（見た目のレイアウトはラップしない場合と同じ）。 */
.sbm-fv-track__dup {
	display: contents;
}

.sbm-fv-item {
	flex: 0 0 auto;
	height: 100%;
	margin: 0; /* 2026-09-21・3回目改訂: figure要素のUA既定marginを明示的にリセット。
	              リセットしないと、環境によって(特にwp-admin内の管理者プレビューは
	              フロントエンドのGutenberg block-library CSSによるfigureリセットを
	              読み込まないため)figureの既定margin(上下・左右)が残り、SPでは
	              段間の余白がgapの指定値より大きくなり、PCでは下段画像がmargin-top分
	              だけ下にずれてrowの下端からはみ出し、overflow:hiddenで角が
	              クロップされる原因になる。margin-rightは下記のより詳細な
	              セレクタで個別に上書きする。 */
	border-radius: 6px; /* 2026-09-21: 12pxからやや控えめに縮小 */
	overflow: hidden;
}

.sbm-fv-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* PCタイル幅（2026-09-21改訂: 密度を上げるため縮小）。
   1440pxで1段あたり約4.5枚（=4〜5枚）が見えることを目安に、
   従来式(18vw+160px)を比例縮小して算出: 768px時≈211px・1024px時≈250px・
   1440px時≈312px。gapも16px→8pxに縮小し、コラージュとしての連続感を出す。
   各アイテムのmargin-rightがそのままループの「1グループ分の移動距離」を
   構成する要素になる。 */
.sbm-fv-gallery__pc .sbm-fv-item {
	width: calc(15vw + 96px);
	margin-right: 8px;
}

/* SPタイル幅（2026-09-21・7回目改訂）:
   width:auto（写真の自然な縦横比をそのまま使う）方針を撤回し、PCと同じ
   「固定タイル幅 + object-fit:cover」方式に変更した。理由: 縦横比を
   保ったままFVの高さいっぱい（90vh等）まで拡大すると、横長写真の横幅が
   非常に大きくなり、1枚あたりの占有時間・占有幅が過大になっていたため。
   「自然比率の完全表示」よりも「複数写真がテンポよく流れる見た目」を
   優先し、object-fit:coverによる必要最小限のクロップを許可する
   （object-positionは既存データがあれば描画時にそのまま使われる。
   `sbm_fv_gallery_render_item_html()`のstyle="object-position:..."は
   PC/SP共通で既に実装済みのため、このCSS変更だけで反映される）。

   - width: 70vw（2026-09-21・8回目改訂で75vw→70vwへ微調整。375px幅で
     1枚目の占有率がやや大きく、複数写真が横に流れているFVであることが
     分かりにくいとのフィードバックを受け、次の写真がより見えるよう縮小）。
     375px幅でタイル幅≒262.5px＋gap6pxを差し引いた残り約106.5px
     （画面の約28%）に次の写真が見える計算になる。320/390/430pxでも
     同じ比率（vw基準）でほぼ同じ見え方になる
   - height は明示せず、基底の`.sbm-fv-item{height:100%}`と
     `.sbm-fv-item img{height:100%}`をそのまま使う（PCと同一の仕組み）。
     rowに`calc(100vh - 8px)`という定義済みの高さがあるため、
     パーセンテージの解決に一切曖昧さが無い
   - 横長・縦長を問わずタイル幅は常に70vwで揃うため、写真ごとに表示時間・
     占有幅が大きくばらつくことはない */
.sbm-fv-gallery__sp .sbm-fv-item {
	width: 70vw;
	margin-right: 6px; /* 2026-09-21: 12pxから縮小（変更なし） */
}

@keyframes sbm-fv-scroll-left {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}

@keyframes sbm-fv-scroll-right {
	from {
		transform: translateX(-50%);
	}
	to {
		transform: translateX(0);
	}
}

/* PC/SPの切り替え。既存テーマの pc_only/sp_only には依存せず、
   このコンポーネント専用のブレークポイントで完結させる
   （サイト全体のSPブレークポイント基準 599px に合わせている）。 */
@media (max-width: 599px) {
	.sbm-fv-gallery__pc {
		display: none;
	}
	/* 2026-09-21・4回目改訂: 2段(flex-column+gap)構成をやめ、1段の横スクロール
	   ギャラリーに変更。FV全体の高さ(100vh)はそのまま維持し、その中で
	   align-items:centerにより写真列（7回目改訂以降はcalc(100vh - 8px)の
	   明示的な高さを持つ）を縦方向中央に配置する（8pxの差分が上下4pxずつの
	   安全余白になる。写真列単体として自然な位置。.p_top-fvTextとの
	   最終的な重なり調整は別途行う）。 */
	.sbm-fv-gallery__sp {
		display: flex;
		align-items: center;
		height: 100vh;
		overflow: hidden;
	}
}

@media (min-width: 600px) {
	.sbm-fv-gallery__pc {
		display: block;
	}
	.sbm-fv-gallery__sp {
		display: none;
	}
}

/* 動きを好まないユーザーへの配慮。既存の .p_top-fvImage 用ルールと同じ考え方。 */
@media (prefers-reduced-motion: reduce) {
	.sbm-fv-track {
		animation: none;
	}
}