/* 全体コンテナ幅 */
.thumbs-section {
  box-sizing: border-box;
  margin: 20px auto;
  padding: 0 10px;
  max-width: 1000px; /* 指定通り最大幅1000px */
}

/* グリッド共通 */
.thumbs-grid {
  display: grid;
  gap: 10px; /* 写真どうしの空間10px */
  grid-auto-flow: row; /* 左上から右下へ横並び（行優先）*/
}

/* サムネイルリンク */
.thumb {
  display: block;
  position: relative;
  overflow: hidden; /* ← 今は visible になっていますが、これを hidden に変更 */
  text-decoration: none;
  border-radius: 6px;
  transform-origin: center center;
}

/* 画像は縦横比を維持してそのまま表示 */
.thumb img {
  display: block;
  width: 100%;
  height: auto; /* 縦横比を維持 */
  border-radius: 4px;
  transition: transform 250ms ease, filter 250ms ease;
  will-change: transform;
}

/* 白の半透明オーバーレイ（hover 用） */
.thumb .overlay {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0); /* デフォルトは透明 */
  border-radius: 4px;
  pointer-events: none;
  transition: background 250ms ease, opacity 250ms ease;
}

/* ホバー/フォーカスで拡大＋半透明白 */
.thumb:hover img,
.thumb:focus img,
.thumb.hover-active img {
  transform: scale(1.05);
}

.thumb:hover .overlay,
.thumb:focus .overlay,
.thumb.hover-active .overlay {
  background: rgba(255,255,255,0.45);
}

/* keyboard フォーカスの見た目向上 */
.thumb:focus {
  outline: 3px solid rgba(0,0,0,0.08);
}

/* ====== 各セクションの列数（モバイル優先） ====== */

/* 上部：最小幅時（スマホ）横に3枚、最大時（ >=856px ）で横に5枚 */
.thumbs-top .thumbs-grid {
  grid-template-columns: repeat(3, 1fr);
}
@media (min-width: 656px) {
  .thumbs-top .thumbs-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (min-width: 856px) {
  .thumbs-top .thumbs-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* 中部：最小幅時 横に2枚、最大時で横に3枚 */
.thumbs-mid .thumbs-grid {
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 856px) {
  .thumbs-mid .thumbs-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 下部：最小幅時 横に1枚、最大時で横に2枚 */
.thumbs-bottom .thumbs-grid {
  grid-template-columns: repeat(1, 1fr);
}
@media (min-width: 856px) {
  .thumbs-bottom .thumbs-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 画像の行方向の並びを自然に（高さは写真により変わる） */
/* 追加の見た目調整 */
@media (max-width: 420px) {
  .thumbs-section { padding-left: 6px; padding-right: 6px; }
}