/* ═══════════════════════════════════════════════
   gallery.css — gallery page
   胡粉色 / Helvetica Neue Ultra Light

   PC (>768px): 縦長写真 3列グリッド
   SP (≤768px): 縦長写真 1枚ずつフルワイドスクロール
═══════════════════════════════════════════════ */

/* ── Reset & root ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:         #FFFFFB;
  --ink:        #1D1D1F;
  --ink-mid:    #1D1D1F;
  --ink-light:  #1D1D1F;
  --header-h:   64px;
  --col-gap:    16px;   /* PC: gap between columns */
  --row-gap:    40px;   /* PC: gap between rows */
  --font:       "Helvetica Neue", Helvetica, "Raleway", Arial, sans-serif;
  --trans:      0.35s ease;
}

html, body {
  min-height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 100;
  letter-spacing: 0.06em;
  -webkit-tap-highlight-color: transparent;
}

/* ════════════════════════════════════════════
   HEADER — TOPと同スタイル
════════════════════════════════════════════ */
header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-h);
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 44px;
  border-bottom: 1px solid rgba(0, 0, 0, .06);
}

nav {
  display: flex;
  gap: 36px;
  font-size: 11px;
  font-weight: 100;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

nav a {
  color: var(--ink);
  text-decoration: none;
  opacity: 0.4;
  transition: opacity var(--trans);
}
nav a:hover,
nav a.active { opacity: 1; }

/* ════════════════════════════════════════════
   MAIN
════════════════════════════════════════════ */
main {
  padding: 40px 44px 80px;
}

/* ════════════════════════════════════════════
   PC GRID  (>768px)  — 4列
════════════════════════════════════════════ */
#grid.pc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--row-gap) var(--col-gap);
}

/* PC タイル */
.pc-tile {
  cursor: pointer;
  display: flex;
  flex-direction: column;
}

.pc-tile .tile-img-wrap {
  width: 100%;
  overflow: hidden;
  background: #ebebeb;
  /* 縦長写真の縦横比: 3:4 相当の padding-top で高さを確保 */
  position: relative;
  padding-top: 133%;  /* 3:4 = 75%, but portrait → taller: 133% ≈ 3/4 inverted */
}

.pc-tile .tile-img-wrap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.55s ease, transform 0.4s ease;
  transform: scale(1.02);
}

.pc-tile .tile-img-wrap img.loaded {
  opacity: 1;
  transform: scale(1);
}

.pc-tile:hover .tile-img-wrap img {
  transform: scale(1.04);
}

/* ════════════════════════════════════════════
   SP GRID  (≤768px)  — 1枚ずつスクロール
════════════════════════════════════════════ */
#grid.sp-grid {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

/* SP アイテム */
.sp-item {
  cursor: pointer;
  display: flex;
  flex-direction: column;
}

.sp-item .tile-img-wrap {
  width: 100%;
  overflow: hidden;
  background: #ebebeb;
  position: relative;
  /* 縦長写真: 縦横比を維持しながらフルワイド表示 */
  padding-top: 133%; /* 3:4 portrait ratio */
}

.sp-item .tile-img-wrap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.55s ease;
}

.sp-item .tile-img-wrap img.loaded {
  opacity: 1;
}

/* ════════════════════════════════════════════
   CAPTION  (PC / SP 共通)
════════════════════════════════════════════ */
.tile-caption {
  padding: 10px 0 0;
  font-size: 11px;
  font-weight: 100;
  letter-spacing: 0.18em;
  color: var(--ink-light);
  text-transform: uppercase;  /* キャプション大文字強制 */
}

/* ════════════════════════════════════════════
   LOADING MESSAGE
════════════════════════════════════════════ */
.loading-msg {
  padding: 80px 0;
  text-align: center;
  font-size: 11px;
  font-weight: 100;
  letter-spacing: 0.3em;
  color: var(--ink-light);
  text-transform: uppercase;
}

/* ════════════════════════════════════════════
   LIGHTBOX
════════════════════════════════════════════ */
#lb-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 251, .95);
  z-index: 200;
  cursor: zoom-out;
}

#lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 201;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

#lb-overlay.open { display: block; }
#lightbox.open   { display: flex; }

#lb-inner {
  position: relative;
  max-width: min(90vw, 800px);
  max-height: 90vh;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#lb-img {
  display: block;
  max-width: 100%;
  max-height: calc(90vh - 60px);
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.4s ease;
  box-shadow: 0 8px 60px rgba(0, 0, 0, .10);
}

#lb-img.ready { opacity: 1; }

#lb-caption {
  margin-top: 14px;
  font-size: 11px;
  font-weight: 100;
  letter-spacing: 0.22em;
  color: var(--ink-light);
  text-transform: uppercase;
  text-align: center;
}

#lb-prev, #lb-next {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 36px;
  font-weight: 100;
  color: var(--ink);
  opacity: 0.25;
  cursor: pointer;
  padding: 16px 20px;
  z-index: 202;
  pointer-events: auto;
  line-height: 1;
  transition: opacity var(--trans);
  user-select: none;
}
#lb-prev { left: 12px; }
#lb-next { right: 12px; }
#lb-prev:hover, #lb-next:hover { opacity: 0.8; }

#lb-close {
  position: fixed;
  top: 22px;
  right: 28px;
  background: none;
  border: none;
  font-size: 20px;
  color: var(--ink);
  opacity: 0.3;
  cursor: pointer;
  z-index: 202;
  pointer-events: auto;
  line-height: 1;
  letter-spacing: 0;
  transition: opacity var(--trans);
}
#lb-close:hover { opacity: 0.8; }

/* ════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════ */

/* タブレット: 3列 */
@media (max-width: 1024px) and (min-width: 769px) {
  #grid.pc-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px 12px;
  }
}

/* SP */
@media (max-width: 768px) {
  header {
    padding: 0 20px;
    height: 52px;
  }

  main {
    padding: 24px 20px 60px;
  }

  #grid.sp-grid {
    gap: 56px;
  }

  #lb-prev  { left: 4px;  font-size: 28px; padding: 12px; }
  #lb-next  { right: 4px; font-size: 28px; padding: 12px; }
  #lb-close { top: 12px; right: 14px; }

  #lb-inner {
    max-width: 95vw;
  }
}