/**
 * ファイル: /wp-content/themes/deer_child/assets/css/movie-tab-switching.css
 * 役割: single-movie.php の「レビュー / 作品ギャラリー」タブ切替のスタイル一式
 * 対応HTML: .movie-tab-section / .movie-tabs / .movie-tab / .movie-tab-content
 * 備考: 影響範囲を .movie-tab-section 内に限定。既存スタイルと衝突しにくい設計。
 */

/* =====================================
 *  ラッパー
 * ===================================== */
.movie-tab-section {
  margin-top: 24px;
}

/* =====================================
 *  タブ見出し（ボタン群）
 * ===================================== */
.movie-tab-section .movie-tabs {
  display: flex;
  flex-wrap: wrap;            /* 画面幅が狭いときは折り返し */
  gap: 4px;
  margin-top: 16px;
  align-items: flex-end;
}

/* タブボタン（<button class="movie-tab">） */
.movie-tab-section .movie-tab {
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  padding: 10px 16px;
  background: #f4f4f4;
  color: #333;
  border: 1px solid #ddd;
  border-radius: 8px 8px 0 0; /* 上側だけ角丸 */
  font-size: 16px;
  line-height: 1.2;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .05s ease;
  position: relative;
  top: 1px;                   /* アクティブ時に下のコンテンツ枠線と面一に */
}

.movie-tab-section .movie-tab:hover {
  background: #e9e9e9;
}

.movie-tab-section .movie-tab:focus-visible {
  outline: 2px solid #3498db;
  outline-offset: 2px;
}

/* アクティブなタブ */
.movie-tab-section .movie-tab.active {
  background-color: #3498db;
  color: #fff;
  border-color: #3498db;
  z-index: 1;                 /* 下のコンテンツより前面へ */
}

/* 最後のタブの右余白除去（gapで管理しているので任意） */
.movie-tab-section .movie-tab:last-child {
  margin-right: 0;
}

/* =====================================
 *  タブの中身
 * ===================================== */
.movie-tab-section .movie-tab-content {
  display: none;              /* JSで .active を付与して表示 */
  padding: 24px;
  border: 1px solid #ddd;
  border-top: none;           /* アクティブタブと境界をシームレスに */
  margin-top: 0;
  border-radius: 0 8px 8px 8px;
  background: #fff;
}

.movie-tab-section .movie-tab-content.active {
  display: block;
}

/* =====================================
 *  レスポンシブ調整
 * ===================================== */
@media (max-width: 640px) {
  .movie-tab-section .movie-tab {
    font-size: 14px;
    padding: 8px 12px;
  }
  .movie-tab-section .movie-tab-content {
    padding: 16px;
  }
}

/* =====================================
 *  アニメーションを減らす設定
 * ===================================== */
@media (prefers-reduced-motion: reduce) {
  .movie-tab-section .movie-tab,
  .movie-tab-section .movie-tab-content {
    transition: none;
  }
}