/* ============================================================
   gallery.css
   フォトギャラリー（/gallery/ ＝ page-gallery.php）専用。
   is_page('gallery') のときだけ enqueue される（functions.php）。
   トップの GALLERY STRIP（top.css の .gallery-sec/.gi）とは別系統＝自己完結。
   デザイントークンは global.css の :root を使用。

   デザイン＝「写真を浴びる」Instagram 的モザイク：
   フォトログ記事の写真を 4:5 タイルで密に敷き、各タイルはその撮影の記録（記事）へリンク。
   モバイルファースト：SP 2列 →（600）3列 →（960）4列。
   ============================================================ */

.gal-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr); /* スマホから2列 */
	gap: 10px;
	margin-top: 28px;
}

@media (min-width: 600px) {
	.gal-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
}

@media (min-width: 960px) {
	.gal-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; }
}

/* ── 写真タイル（4:5・記事へのリンク） ── */
.gal-item {
	position: relative;
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: 8px;
	background: var(--cream);
	border: 1px solid rgba(184, 151, 90, .16);
	box-shadow: 0 2px 12px rgba(28, 28, 28, .05);
	text-decoration: none;
	color: inherit;
	transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}

.gal-item:hover,
.gal-item:focus-visible {
	border-color: var(--gold-lt);
	box-shadow: 0 10px 26px rgba(28, 28, 28, .12);
}

.gal-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .6s var(--ease);
}

/* ホバー可能端末だけ画像をわずかにズーム（タッチでは発火させない） */
@media (hover: hover) and (pointer: fine) {
	.gal-item:hover .gal-img { transform: scale(1.06); }
}

/* ── 撮影メニュー1軸フィルタのタブ（gallery.js が現ページのタイルを出し入れ） ── */
.gal-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 24px;
}

.gal-tab {
	display: inline-block;
	padding: 7px 16px;
	font-family: var(--sans);
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .04em;
	color: var(--text2);
	background: var(--warm-white);
	border: 1px solid var(--light-gray);
	border-radius: 999px;
	text-decoration: none;
	cursor: pointer;
	transition: color var(--t), border-color var(--t), background var(--t);
}

.gal-tab:hover,
.gal-tab:focus-visible {
	border-color: var(--gold-lt);
	color: var(--gold-dk);
}

.gal-tab.is-active {
	background: var(--gold);
	border-color: var(--gold);
	color: #fff;
}

/* タブの直後はグリッドを少し詰める（フィルタが無いときは .gal-grid 既定の 28px）。 */
.gal-filter + .gal-grid {
	margin-top: 16px;
}

/* フィルタで隠れたタイル（gallery.js が is-hidden を付与） */
.gal-item.is-hidden {
	display: none;
}

/* タイルのフワッと表示（gallery.js が is-revealed を付与）。
   初回スクロール（一度だけ）でも、タブ切り替えの再演出でも同じ keyframe を使う。
   軽い時間差は --gal-delay（JS 側で 0〜0.36s）で付ける。 */
@keyframes gal-fade-in {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* JS 有効時のみ：初回リビール前のタイルを隠す（is-revealed が付くまで opacity:0）。
   JS 無効／クローラには付かない＝素のまま表示（プログレッシブエンハンスメント）。 */
.gal-grid--reveal .gal-item:not(.is-revealed) {
	opacity: 0;
}

.gal-item.is-revealed {
	animation: gal-fade-in .8s var(--ease) both;
	animation-delay: var(--gal-delay, 0s);
}

/* モーション削減設定では即時表示（フワッとを切る） */
@media (prefers-reduced-motion: reduce) {
	.gal-item.is-revealed {
		animation: none;
	}
}

/* ── プール写真（直接登録＝記事リンクなし・<figure>タイル） ──
   タップ拡大は common.js [10] の共通ライトボックス（furi-lb・components.css）が担当。
   figure の既定マージンだけ打ち消してタイルグリッドに揃える。 */
.gal-item--pool {
	margin: 0;
}

/* ── 空状態 ── */
.gal-empty {
	margin-top: 40px;
	color: var(--text2);
}