/* ======================================================
   tab-slider.css
   お部屋紹介・ギャラリー（メイン＋サムネイル）専用スタイル
   Fix: 垂直方向のズレを「align-items: center」と「overflow」で解消
===================================================== */

/* --- ギャラリーコンテナ --- */
.room-gallery {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

/* --- メイン画像エリア --- */
.room-gallery-main {
  width: 100%;
  overflow: hidden;
  border-radius: 4px;
  background: var(--color-bg-light);
  border: 1px solid var(--border-color-light);
}

.room-gallery-main img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
  transition: opacity 0.4s ease;
}

/* --- サムネイル（小窓）エリア --- */
.room-gallery-thumbs {
  /* グリッドレイアウトの強制 */
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 10px !important;
  width: 100% !important;

  /* 【解決策】垂直方向のズレを中央で相殺する */
  align-items: center !important; 
  /* 余計な行の発生を防ぐ */
  grid-auto-rows: min-content;
  
  margin-top: 12px;
  padding: 0;
}

/* サムネイル画像本体 */
.room-gallery-thumbs img {
  /* vertical-alignを削除し、完全にブロック要素として扱う */
  display: block !important;
  width: 100% !important;
  
  /* 高さ計算を1/1に固定 */
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  
  object-fit: cover !important;
  border-radius: 2px;
  
  /* 枠線によるサイズ変化（数ピクセルのズレ）を防ぐ */
  box-sizing: border-box !important;
  border: 2px solid transparent !important;
  
  /* マージンによるズレを徹底排除 */
  margin: 0 !important;
  
  cursor: pointer;
  transition: all 0.3s ease;
  opacity: 0.7;
  
  /* 画像の計算上の最小サイズを0にして、親のグリッドに従わせる */
  min-width: 0 !important;
}

/* ホバー・アクティブ時の演出 */
.room-gallery-thumbs img:hover {
  opacity: 1;
  /* 垂直方向のガタつきを確認するため、一度動きをオフにします */
  /* transform: translateY(-2px); */
}

/* 現在選択中のスタイル */
.room-gallery-thumbs img.is-active {
  opacity: 1;
  border-color: var(--color-accent) !important;
}

/* --- レスポンシブ対応 --- */
@media (max-width: 768px) {
  .room-gallery {
    gap: 8px;
  }
  .room-gallery-thumbs {
    gap: 6px !important;
  }
  .room-gallery-main img {
    aspect-ratio: 4 / 3;
  }
  .room-gallery-thumbs img {
    border-width: 1.5px !important;
  }
}

/* 最終微調整：全アイテムを1行目のセンターに強制配置 */
.room-gallery-thumbs img {
    grid-row: 1 / 2 !important;
    align-self: center !important;
    justify-self: center !important;
}