/* =======================
   トグル & モードボタン
======================= */

/* ボタンコンテナ */
.gallery-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-bottom: 20px;
  align-items: center;
  justify-content: space-between;
}

/* グループ（左：表示/非表示、右：モード） */
.gallery-options__group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* 共通ボタンスタイル */
.gallery-toggle,
.gallery-mode-btn {
  padding: 6px 14px;
  border-radius: 8px;
  border: 1px solid #ccc;
  background: #f7f7f7;
  cursor: pointer;
  font-size: 0.9rem;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease,
    border-color 0.15s ease;
  white-space: nowrap;
}

.gallery-toggle:hover,
.gallery-mode-btn:hover {
  background: #eee;
}

/* タイトル/日付 OFF状態 */
.gallery-toggle.is-off {
  background: #ddd;
  color: #666;
}

/* モードボタン：ON状態 */
.gallery-mode-btn.is-active {
  background: #4a90e2;
  border-color: #3e7acc;
  color: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/* スマホでボタンを縦積み＆幅広に */
@media (max-width: 640px) {
  .gallery-options {
    flex-direction: column;
    align-items: stretch;
  }

  .gallery-options__group {
    width: 100%;
  }

  .gallery-toggle,
  .gallery-mode-btn {
    flex: 1 1 auto;
    text-align: center;
  }
}

/* =======================
   ベースレイアウト
======================= */

/* モーダル中スクロール固定 */
body.visual-modal-open {
  overflow: hidden;
}

/* 白いカード背景 */
.visual__box {
  background: #fff;
  padding: 48px;
  border-radius: 20px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.18);
}

/* グリッド全体（デフォ 5カラム） */
.visual__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 20px;
}

/* 1枚ぶんのカード */
.visual__item {
  width: 100%;
  overflow: hidden;
  border-radius: 16px;
  background: #eee;
  border: 1px solid #ccc;
  cursor: pointer;
  position: relative;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease;
  display: flex;
  flex-direction: column;
}

/* サムネイルエリア（正方形） */
.visual__thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #ddd;
}

.visual__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .18s ease, filter .18s ease;
}

/* メタ部分（タイトルエリア） */
.visual__meta {
  padding: 10px 12px 12px;
  background: #fff;
  border-top: 1px solid #e5e5e5;
}

/* タイトル非表示時：メタエリアごと消す（白い余白をなくす） */
.visual__meta.visual__meta--no-title {
  display: none;
}

/* タイトル：2行まで表示＆高さ揃え */
.visual__meta-title {
  font-size: 0.95rem;
  margin: 0;
  color: #333;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.8em;
}

/* 日付（通常モード：サムネイル上） */
.visual__meta-date {
  display: block;
  font-size: 0.8rem;
  color: #777;
  line-height: 1.4;
  padding: 4px 4px 4px;
  text-align: center;
}

/* トグル用：非表示 */
.visual__meta-title.is-hidden,
.visual__meta-date.is-hidden {
  display: none !important;
}



/* ホバー（通常表示向け） */
.visual__item:hover,
.visual__item:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0,0,0,.22);
  border-color: #aaa;
}

.visual__item:hover .visual__thumb img,
.visual__item:focus-visible .visual__thumb img {
  transform: scale(1.03);
  filter: saturate(1.1);
}

/* =======================
   ポラロイド枠（見た目の“紙”部分）
   ※加工（フィルタ/テクスチャ）は共通定義を再利用
======================= */

.visual--polaroid{
  /* 紙（ポラ枠） */
  --pz-paper: #fffdf7;                 /* わずかに黄ばみ */
  --pz-paper-edge: rgba(0,0,0,.12);
  --pz-shadow: rgba(0,0,0,.18);

  /* 写真枠 */
  --pz-photo-bg: #f7f6f1;
  --pz-photo-border: rgba(0,0,0,.08);

  /* 回転角（各カードで上書き） */
  --pz-rot: 0deg;
}

/* ★ズレ対策：セル内でカードを中央寄せ */
.visual--polaroid .visual__grid{
  justify-items: center;
}

/* カード（紙） */
.visual--polaroid .visual__item{
  width: 92%;
  max-width: 320px;
  border-radius: 0;
  background: var(--pz-paper);
  border: 1px solid var(--pz-paper-edge);
  box-shadow: 0 10px 26px var(--pz-shadow);
  padding: 12px 12px 18px;
  overflow: visible;

  transform: rotate(var(--pz-rot));
}

/* サムネ枠（写真が少し奥にある） */
.visual--polaroid .visual__thumb{
  border-radius: 0;
  background: var(--pz-photo-bg);
  margin: 2px 0 24px;
  position: relative;

  /* 写真が少し沈んで見えるフレーム */
  box-shadow: inset 0 0 0 1px var(--pz-photo-border);
}

/* 写真の「内影」＝奥行き */
.visual--polaroid .visual__thumb::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  box-shadow:
    inset 0 10px 18px rgba(0,0,0,.12),
    inset 0 -10px 18px rgba(255,255,255,.18),
    inset 0 0 0 1px rgba(0,0,0,.06);
}

/* NEWバッジ（控えめ） */
.visual--polaroid .visual__badge{
  transform: scale(.95);
  opacity: .95;
}

/* ちょっとだけランダム角度 */
.visual--polaroid .visual__item:nth-child(2n){
  --pz-rot: -1.0deg;
}
.visual--polaroid .visual__item:nth-child(2n+1){
  --pz-rot: 0.7deg;
}

/* ホバー時も回転角維持 */
.visual--polaroid .visual__item:hover,
.visual--polaroid .visual__item:focus-visible{
  transform: rotate(var(--pz-rot)) translateY(-2px) scale(1.01);
}

/* タイトル周り */
.visual--polaroid .visual__meta{
  border-top: none;
  background: transparent;
  padding: 6px 2px 0;
  text-align: center;
}
.visual--polaroid .visual__meta-title{
  letter-spacing: .02em;
}

/* =======================
   ポラロイド加工：共通定義（再利用）
   - サムネ(.visual__thumb) と モーダル(.visual-modal__media) で共通
   - ポラロイド表示中のみ body.gallery-mode-polaroid でON
======================= */

/* 通常時（加工OFF） */
:root{
  --pz-sat: 1;
  --pz-contrast: 1;
  --pz-bright: 1;
  --pz-sepia: 0;
  --pz-hue: 0deg;
  --pz-gray: 0;
  --pz-blur: 0px;

  --pz-noise-opacity: 0;
  --pz-scratch-opacity: 0;
  --pz-dust-opacity: 0;
  --pz-leak-opacity: 0;
  --pz-vignette: 0;
}

/* ポラロイド表示中（加工ON） */
body.gallery-mode-polaroid{
  --pz-sat: .72;
  --pz-contrast: .93;
  --pz-bright: 1.06;
  --pz-sepia: .22;
  --pz-hue: -8deg;
  --pz-gray: .06;
  --pz-blur: .15px;

  --pz-noise-opacity: .18;
  --pz-scratch-opacity: .10;
  --pz-dust-opacity: .10;
  --pz-leak-opacity: .12;
  --pz-vignette: .22;
}

/* 加工対象の“枠”を共通化（画像の上にだけテクスチャを乗せる） */
:is(.visual__thumb, .visual-modal__media){
  position: relative;
  overflow: hidden;
}

/* 画像フィルタを共通化（サムネimg & モーダルimg） */
:is(.visual__thumb img, .visual-modal__media img){
  filter:
    saturate(var(--pz-sat))
    contrast(var(--pz-contrast))
    brightness(var(--pz-bright))
    sepia(var(--pz-sepia))
    hue-rotate(var(--pz-hue))
    grayscale(var(--pz-gray))
    blur(var(--pz-blur));
}

/* ビネット（加工ONのときだけ見える） */
:is(.visual__thumb, .visual-modal__media)::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity: 1;
  background-image:
    radial-gradient(
      circle at 50% 45%,
      rgba(255,255,255,0) 55%,
      rgba(0,0,0,var(--pz-vignette)) 100%
    );
  mix-blend-mode: multiply;
}

/* テクスチャ（光漏れ/傷/ホコリ/グレイン） */
:is(.visual__thumb, .visual-modal__media)::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity: 1;
  mix-blend-mode: soft-light;

  background-image:
    radial-gradient(circle at 12% 18%,
      rgba(255, 190, 120, var(--pz-leak-opacity)) 0%,
      rgba(255, 190, 120, 0) 55%),
    radial-gradient(circle at 88% 82%,
      rgba(180, 220, 255, calc(var(--pz-leak-opacity) * .65)) 0%,
      rgba(180, 220, 255, 0) 52%),
    repeating-linear-gradient(90deg,
      rgba(255,255,255, calc(var(--pz-scratch-opacity) * .55)) 0px,
      rgba(255,255,255, calc(var(--pz-scratch-opacity) * .55)) 1px,
      rgba(0,0,0, 0) 2px,
      rgba(0,0,0, 0) 10px),
    repeating-linear-gradient(135deg,
      rgba(255,255,255, calc(var(--pz-scratch-opacity) * .35)) 0px,
      rgba(255,255,255, calc(var(--pz-scratch-opacity) * .35)) 1px,
      rgba(0,0,0, 0) 2px,
      rgba(0,0,0, 0) 14px),
    repeating-radial-gradient(circle at 30% 40%,
      rgba(0,0,0, var(--pz-dust-opacity)) 0px,
      rgba(0,0,0, var(--pz-dust-opacity)) 1px,
      rgba(0,0,0, 0) 2px,
      rgba(0,0,0, 0) 10px),
    repeating-linear-gradient(0deg,
      rgba(255,255,255, var(--pz-noise-opacity)) 0px,
      rgba(255,255,255, var(--pz-noise-opacity)) 1px,
      rgba(0,0,0, calc(var(--pz-noise-opacity) * .55)) 2px,
      rgba(0,0,0, calc(var(--pz-noise-opacity) * .55)) 3px);

  background-size:
    100% 100%,
    100% 100%,
    7px 7px,
    11px 11px,
    19px 19px,
    6px 6px;

  filter: blur(.15px);
}

/* ★重要：通常hoverの saturate(1.1) を上書きして加工を維持 */
body.gallery-mode-polaroid .visual__item:hover .visual__thumb img,
body.gallery-mode-polaroid .visual__item:focus-visible .visual__thumb img{
  filter:
    saturate(var(--pz-sat))
    contrast(var(--pz-contrast))
    brightness(var(--pz-bright))
    sepia(var(--pz-sepia))
    hue-rotate(var(--pz-hue))
    grayscale(var(--pz-gray))
    blur(var(--pz-blur));
}

/* =======================
   モーダル
======================= */

.visual-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.visual-modal.is-open {
  display: flex;
  pointer-events: auto;
}

/* 背景の黒幕 */
.visual-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.65);
}

/* 本体 */
.visual-modal__body {
  position: relative;
  z-index: 1;
  max-width: min(960px, 92vw);
  max-height: min(90vh, 92vh);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

/* 中身の白カード */
.visual-modal__inner {
  background: #fff;
  border-radius: 16px;
  padding: 16px 16px 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,.35);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ★画像ラッパ（加工の対象） */
.visual-modal__media{
  display: inline-block;
  border-radius: 12px;
}

/* モーダル画像 */
.visual-modal__img {
  max-width: 80vw;
  max-height: 70vh;
  margin: 0 auto;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  border-radius: 12px;
}

/* キャプション */
.visual-modal__caption {
  font-size: .9rem;
  color: #555;
  margin: 0;
}

/* 閉じるボタン */
.visual-modal__close {
  position: absolute;
  top: 8px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: none;
  background: rgba(0,0,0,.65);
  color: #fff;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.visual-modal__close:hover {
  background: rgba(0,0,0,.8);
}

/* =======================
   レスポンシブ
======================= */

/* ちょい狭いPC〜大きめタブレット：4カラム */
@media (max-width: 1200px) {
  .visual__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* タブレット：3カラム */
@media (max-width: 960px) {
  .visual__box {
    padding: 40px 32px;
  }

  .visual__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }

  .visual--polaroid .visual__item{
    max-width: none;
  }
}

/* スマホ横〜小さめタブレット：2カラム */
@media (max-width: 720px) {
  .visual__box {
    padding: 32px 20px;
  }

  .visual__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  /* モバイルでは回転を抑える */
  .visual--polaroid .visual__item{
    --pz-rot: 0deg;
    transform: rotate(var(--pz-rot));
  }
  .visual--polaroid .visual__item:hover,
  .visual--polaroid .visual__item:focus-visible{
    transform: rotate(var(--pz-rot)) translateY(-2px) scale(1.01);
  }
}

/* いちばん狭いスマホ */
@media (max-width: 480px) {
  .visual__box {
    padding: 24px 14px;
  }

  .visual__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
}