/* timetable-2grid.css
 * タイムテーブル（時間上段 + A/B 2カラムグリッド）のスタイル
 */

/* ----------------------------------------------------------------
 * セッションID（A-1 などの番号バッジ）
 * ---------------------------------------------------------------- */
.tm_session_name {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 1.6rem;
  border-radius: 4px;
  padding: 0 0.5rem;
  background: #e5e7eb;
  color: #6b7280;
  font-size: 0.72rem;
  font-weight: 900;
  margin-right: 0.5rem;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ----------------------------------------------------------------
 * 登壇者名
 * ---------------------------------------------------------------- */
.author {
  margin-top: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: #374151; /* gray-700 */
}

/* ----------------------------------------------------------------
 * テーブル共通（timetable クラスが付いたテーブル向け）
 * ---------------------------------------------------------------- */
table.timetable {
  border-collapse: collapse;
  border: 1px solid #e5e7eb; /* gray-200 */
  line-height: 1.6;
}

@media (width >= 64rem) {
  table.timetable {
    width: 100%;
  }
}

/* ----------------------------------------------------------------
 * スマホ（md 未満）：ブロック化してグリッドレイアウトへ
 * ---------------------------------------------------------------- */
@media (width < 48rem) {
  /* テーブル本体とtbodyをブロック化 */
  table.timetable {
    display: block;
    width: 100%;
    border: 0;
  }

  table.timetable tbody {
    display: block;
    width: 100%;
  }

  /* ── ヘッダー行（thのみ・tdなし） ─────────────────── */

  /* 1列目（「時間」th）を非表示 */
  table.timetable tr:has(th):not(:has(td)) th:first-child {
    display: none;
  }

  /* ヘッダー行全体を A/B 2列グリッドに */
  table.timetable tr:has(th):not(:has(td)) {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  /* 1列目thは高さ0・余白なし（行の列揃えのために残す） */
  table.timetable tr:has(th):not(:has(td)) th:first-child {
    overflow: hidden;
    border: 0;
    padding: 0;
    grid-column: 1 / -1;
    height: 0;
  }

  /* ── データ行（tdあり） ──────────────────────────── */

  /* 行全体を「時間:全幅」＋「A列|B列」のグリッドに */
  table.timetable tr:has(td) {
    display: grid;
    overflow: hidden;
    grid-template-columns: 1fr 1fr;
  }

  /* 時間セル（1列目 td）：全幅で上部に配置 */
  table.timetable tr:has(td) td:first-child {
    color: #0d9488; /* teal-600 */
    font-weight: 700;
    font-size: 0.875rem;
    text-align: left;
    padding-inline: 0.75rem;
    padding-block: 0.5rem;
    grid-column: 1 / -1;
    border-left: 2px solid #0d9488;
  }

  /* 時間セル内の改行を非表示 */
  table.timetable tr:has(td) td:first-child br {
    display: none;
  }

  /* A・B トラックセル（2列目・3列目） */
  table.timetable tr:has(td) td:nth-child(2),
  table.timetable tr:has(td) td:nth-child(3) {
    padding: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.5rem;
    border-top: 1px solid #e5e7eb; /* gray-200 */
    vertical-align: top;
  }

  /* A トラックセル（右に区切り線）：Bトラックがある行のみ */
  table.timetable tr:has(> td ~ td ~ td) td:nth-child(n + 2):not(:last-child) {
    border-right: 1px solid #e5e7eb;
  }

  /* colspan 付き td（基調講演など）：全幅 */
  table.timetable tr:has(td) td[colspan] {
    grid-column: 1 / -1;
  }

  /* お昼休憩など：td 混在行の th[colspan] も全幅 */
  table.timetable tr:has(td) th[colspan] {
    background-color: #f3f4f6; /* gray-100 */
    padding-block: 0.75rem;
    text-align: center;
    grid-column: 1 / -1;
  }

  /* ----------------------------------------------------------------
   * 1列テーブル（Aトラックのみ：th×2、td×2）
   * ---------------------------------------------------------------- */

  /* ヘッダー行：1列グリッドに */
  table.timetable tr:has(th):not(:has(td)):not(:has(th:nth-child(3))) {
    grid-template-columns: 1fr;
  }

  /* データ行：tdが2個のみ（1列テーブル）→ 1列グリッドに */
  table.timetable tr:has(td):not(:has(> td ~ td ~ td)):not(:has(td[colspan])) {
    grid-template-columns: 1fr;
  }

  /* セッションセル（2列目 td）：全幅・右線なし */
  table.timetable
    tr:has(td):not(:has(> td ~ td ~ td)):not(:has(td[colspan]))
    td:nth-child(n + 2) {
    grid-column: 1 / -1;
  }
}