/* gallery.css — 写真ギャラリー（2段・横並び）
   Figma: 1960:52416。各段は中央揃えで左右にはみ出し、上段は左に 80px ずらす。
   動き：Figma 注記「アニメーション：左右に流れる」→ 上段は右→左、下段は左→右へ無限に流れる（JS 有効時）。
   prefers-reduced-motion では静止 */

.gallery {
  --gallery-item-width: 17.5rem;             /* 280px */
  --gallery-item-height: calc(165 / 16 * 1rem);
  --gallery-mark-width: 11.25rem;            /* 180px */
  --gallery-mark-height: calc(118.797 / 16 * 1rem);

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-16);
  width: 100%;
  overflow: hidden;
}

.gallery__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-16);
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gallery__row--offset {
  padding-left: var(--space-80);
}

/* 画面幅いっぱいに広げる（メインカラムから左右にはみ出し、サイドナビの下を通る）。
   左のはみ出し量＝画面左端からメイン列までの距離（layout.css の --site-main-offset）*/
.site__main .gallery--marquee {
  flex-shrink: 0;
  align-self: flex-start;
  width: 100vw;
  max-width: none;
  margin-left: calc(-1 * var(--site-main-offset, 0px));
}

/* マーキー：同じ列を4セット並べ、1セット分（25%）だけ移動してループする。
   列は左端から始める（中央寄せのまま動かすと周回の終盤で右側に空白が出る）。
   4セットあるので、1セット幅（約2070px）の3倍までの画面幅で途切れない */
.js .gallery--marquee {
  align-items: flex-start;
}

.js .gallery--marquee .gallery__row {
  justify-content: flex-start;
  gap: 0; /* セット間の余白は .gallery__track の padding-right で 16px に揃える */
  width: max-content;
  padding-left: 0;
  animation: ic-marquee var(--marquee-duration) linear infinite;
}

.js .gallery--marquee .gallery__row--reverse {
  animation-direction: reverse;
}

.js .gallery--marquee .gallery__track {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  padding-right: var(--space-16);
}

@keyframes ic-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-25%); }
}

@media (prefers-reduced-motion: reduce) {
  .js .gallery--marquee {
    align-items: center;
  }

  .js .gallery--marquee .gallery__row {
    animation: none;
    justify-content: center;
    width: 100%;
  }
  .js .gallery--marquee .gallery__track + .gallery__track { display: none; }
}

.gallery__track {
  display: flex;
  align-items: center;
  gap: var(--space-16);
}

/* JS 無効時は1セットだけ中央揃え（2セット目は出力されるが非表示）*/
html:not(.js) .gallery__track + .gallery__track {
  display: none;
}

.gallery__item {
  display: block;
  position: relative;
  flex-shrink: 0;
  width: var(--gallery-item-width);
  height: var(--gallery-item-height);
  border-radius: var(--radius);
  overflow: hidden;
}

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

/* 写真の上に 20% の黒（Figma 既定）。例外は修飾子で指定 */
.gallery__item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-overlay-20);
}

.gallery__item--overlay-30::after { background: var(--color-overlay-30); }
.gallery__item--overlay-none::after { content: none; }

.gallery__mark-item {
  display: flex;
  flex-shrink: 0;
}

/* 上段の左 80px ずらしは、マーキー時は最初のセットの前に余白として再現 */
.js .gallery--marquee .gallery__row--offset .gallery__track:first-child {
  padding-left: 0;
}

.gallery__mark {
  flex-shrink: 0;
  width: var(--gallery-mark-width);
  height: var(--gallery-mark-height);
}

/* SP：写真・マークを PC の 70% に縮小（比率は維持。SPデザイン未支給のため仮値）*/
@media (max-width: 767px) {
  .gallery {
    --gallery-item-width: calc(280 / 16 * 0.7rem);
    --gallery-item-height: calc(165 / 16 * 0.7rem);
    --gallery-mark-width: calc(180 / 16 * 0.7rem);
    --gallery-mark-height: calc(118.797 / 16 * 0.7rem);
  }
}