/* =====================================================================
   NGFES タイムテーブル（[ngfes_timetable]）
   ---------------------------------------------------------------------
   ■ デザインを変えるときは、まず下の「設定値（CSS 変数）」を変えてください。
     ほとんどの見た目（大きさ・色・フォント・角丸など）はここだけで変わります。

   ■ デザイン違いを作りたいときは、ショートコードに class を付けて
       [ngfes_timetable class="is-dark"]
     テーマの「追加 CSS」などで、その class に変数を上書きします。
       .ngfes-tt.is-dark { --ngfes-tt-bg: #111; --ngfes-tt-text: #fff; }

   ■ 優先順位（下ほど強い）
     1. このファイルの設定値（@layer の中なので最も弱い）
     2. WordPress 管理画面の色設定
     3. テーマの追加 CSS などで .ngfes-tt に書いた指定
     4. ショートコードの属性（hour_height など）
   ===================================================================== */

@layer ngfes-tt-defaults {
  :where(.ngfes-tt) {
    /* --- 大きさ --- */
    --ngfes-tt-hour-h: 120px;                      /* 1時間あたりの高さ */
    --ngfes-tt-col-w: clamp(130px, 38vw, 180px);   /* 会場1列の幅（スマホでは少し狭く） */
    --ngfes-tt-time-w: 52px;                       /* 時間軸の幅 */
    --ngfes-tt-head-h: 38px;                       /* 会場名の行の高さ */
    --ngfes-tt-pad: 12px;                          /* 時間軸の上下の余白 */
    --ngfes-tt-gap: 4px;                           /* 企画の枠と列の左右のすき間 */
    --ngfes-tt-sticky-top: 0px;                    /* 会場名の行を固定する位置（固定ヘッダーの高さ） */

    /* --- 色（管理画面の色設定があれば、そちらが優先される） --- */
    --ngfes-tt-bg: #fff;                           /* 背景 */
    --ngfes-tt-text: #111;                         /* 文字 */
    --ngfes-tt-muted: #666;                        /* 補足の文字（時刻・団体名） */
    --ngfes-tt-track1: #9acd32;                    /* 1番目の会場の色 */
    --ngfes-tt-track2: #ffd700;                    /* 2番目 */
    --ngfes-tt-track3: #8b008b;                    /* 3番目 */
    --ngfes-tt-track4: #405f99;                    /* 4番目（5番目以降は 1 に戻る） */
    --ngfes-tt-event: #00008b;                     /* 会場の色がないときの色 */
    --ngfes-tt-alpha: 0.2;                         /* 企画の枠の背景の濃さ（0〜1） */
    --ngfes-tt-dot: #787878;                       /* 30分ごとの点線 */
    --ngfes-tt-now: #ff0000;                       /* 現在時刻の線 */
    --ngfes-tt-shadow: rgba(0, 0, 0, .10);         /* 固定部分の影 */

    /* --- 文字 --- */
    --ngfes-tt-font: inherit;                      /* inherit ならテーマと同じフォント */
    --ngfes-tt-venue-size: 14px;                   /* 会場名 */
    --ngfes-tt-time-size: 12px;                    /* 時間軸の時刻 */
    --ngfes-tt-event-time-size: 10px;              /* 企画の時刻 */
    --ngfes-tt-event-name-size: 12px;              /* 企画名 */
    --ngfes-tt-event-holder-size: 10px;            /* 出演団体名 */

    /* --- 形 --- */
    --ngfes-tt-radius: 0px;                        /* 企画の枠の角丸 */
    --ngfes-tt-bar-w: 5px;                         /* 企画の枠の左の色帯の太さ */
  }
}

/* =====================================================================
   ここから下はレイアウト。通常は変更不要です。
   ===================================================================== */

.ngfes-tt {
  position: relative;
  font-family: var(--ngfes-tt-font);
  color: var(--ngfes-tt-text);
  background: var(--ngfes-tt-bg);
  line-height: 1.4;
}
.ngfes-tt *,
.ngfes-tt *::before,
.ngfes-tt *::after { box-sizing: border-box; }

/* 画面読み上げ用（見た目には出さない） */
.ngfes-tt__sr-only {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- 会場名の行（ページを縦にスクロールしても上に固定） ---------- */
.ngfes-tt__head {
  position: sticky;
  top: var(--ngfes-tt-sticky-top);
  z-index: 5;
  overflow: hidden;                 /* 横位置は本体のスクロールに合わせて JavaScript が動かす */
  background: var(--ngfes-tt-bg);
  box-shadow: 0 2px 4px var(--ngfes-tt-shadow);
}
/* WordPress にログイン中は、上の管理バーの分だけ下げる */
body.admin-bar .ngfes-tt__head { top: calc(var(--ngfes-tt-sticky-top) + 32px); }
@media (max-width: 782px) {
  body.admin-bar .ngfes-tt__head { top: calc(var(--ngfes-tt-sticky-top) + 46px); }
}
.ngfes-tt__head-inner {
  display: flex;
  width: max-content;
  min-width: 100%;
  height: var(--ngfes-tt-head-h);
}
.ngfes-tt__corner {
  position: sticky; left: 0; z-index: 1;
  flex: 0 0 var(--ngfes-tt-time-w);
  width: var(--ngfes-tt-time-w);
  background: var(--ngfes-tt-bg);
}
.ngfes-tt__venue {
  flex: 0 0 var(--ngfes-tt-col-w);
  width: var(--ngfes-tt-col-w);
  display: flex; align-items: center;
  padding: 0 8px;
  border-bottom: 3px solid var(--venue-color);
  font-size: var(--ngfes-tt-venue-size);
  font-weight: bold;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ngfes-tt__venue-name { overflow: hidden; text-overflow: ellipsis; }

/* ---------- 本体（横スクロール） ---------- */
.ngfes-tt__viewport { position: relative; }
.ngfes-tt__body {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;   /* 横の端まで行っても、ブラウザの「戻る」操作にならないように */
  outline: none;
}
.ngfes-tt__body.is-dragging { cursor: grabbing; user-select: none; }
@media (hover: hover) and (pointer: fine) {
  .ngfes-tt.is-scrollable .ngfes-tt__body { cursor: grab; }   /* PC ではドラッグで横に動かせる */
}

/* 左右にまだ続きがあるときの影（スクロールできることを知らせる） */
.ngfes-tt__viewport::before,
.ngfes-tt__viewport::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 16px;
  pointer-events: none; z-index: 4; opacity: 0; transition: opacity .2s;
}
.ngfes-tt__viewport::before { left: var(--ngfes-tt-time-w); background: linear-gradient(to right, var(--ngfes-tt-shadow), transparent); }
.ngfes-tt__viewport::after  { right: 0; background: linear-gradient(to left, var(--ngfes-tt-shadow), transparent); }
.ngfes-tt.can-scroll-left  .ngfes-tt__viewport::before { opacity: 1; }
.ngfes-tt.can-scroll-right .ngfes-tt__viewport::after  { opacity: 1; }

.ngfes-tt__grid {
  position: relative;
  display: flex;
  width: max-content;
  min-width: 100%;
  height: calc(var(--ngfes-tt-pad) * 2 + (var(--axis-end) - var(--axis-start)) * var(--ngfes-tt-hour-h) / 60);
}

/* 時刻から縦位置を計算する共通の式（--t は 0時からの分） */
.ngfes-tt__line,
.ngfes-tt__time,
.ngfes-tt__now {
  top: calc(var(--ngfes-tt-pad) + (var(--t) - var(--axis-start)) * var(--ngfes-tt-hour-h) / 60);
}

/* 30分ごとの点線 */
.ngfes-tt__line {
  position: absolute; left: var(--ngfes-tt-time-w); right: 0;
  height: 1px;
  background-image: repeating-linear-gradient(to right,
    color-mix(in srgb, var(--ngfes-tt-dot) 70%, transparent) 0 1px,
    transparent 2px 4px);
  pointer-events: none;
}
.ngfes-tt__line.is-half { opacity: .5; }

/* ---------- 時間軸（横にスクロールしても左に固定） ---------- */
.ngfes-tt__times {
  position: sticky; left: 0; z-index: 3;
  flex: 0 0 var(--ngfes-tt-time-w);
  width: var(--ngfes-tt-time-w);
  background: var(--ngfes-tt-bg);
  box-shadow: 2px 0 4px var(--ngfes-tt-shadow);
}
.ngfes-tt__time {
  position: absolute; left: 0; right: 0;
  transform: translateY(-50%);
  padding-right: 8px;
  font-size: var(--ngfes-tt-time-size);
  text-align: right;
  white-space: nowrap;
}
.ngfes-tt__time.is-half { font-size: calc(var(--ngfes-tt-time-size) - 2px); color: var(--ngfes-tt-muted); }

/* ---------- 会場の列と企画 ---------- */
.ngfes-tt__col {
  position: relative;
  flex: 0 0 var(--ngfes-tt-col-w);
  /* width も指定しておかないと、ブラウザによっては全体の幅が「最初に見えていた幅」で止まり、
     点線や現在時刻の線がその先に引かれない（列の中身が位置指定の要素だけで、幅が 0 と数えられるため） */
  width: var(--ngfes-tt-col-w);
}
.ngfes-tt__event {
  position: absolute;
  left: var(--ngfes-tt-gap); right: var(--ngfes-tt-gap);
  top: calc(var(--ngfes-tt-pad) + (var(--start) - var(--axis-start)) * var(--ngfes-tt-hour-h) / 60);
  height: calc(var(--dur) * var(--ngfes-tt-hour-h) / 60);
  padding: 2px 6px 2px calc(var(--ngfes-tt-bar-w) + 6px);
  overflow: hidden;
  border-radius: var(--ngfes-tt-radius);
  background: color-mix(in srgb, var(--venue-color) calc(var(--ngfes-tt-alpha) * 100%), transparent);
  z-index: 1;
}
.ngfes-tt__event::before {   /* 左の色帯 */
  content: ""; position: absolute; top: 0; bottom: 0; left: 0;
  width: var(--ngfes-tt-bar-w);
  background: var(--venue-color);
}
.ngfes-tt__event.is-done { opacity: .55; }   /* 終わった企画（当日のみ） */
.ngfes-tt__event.is-now { box-shadow: inset 0 0 0 2px var(--ngfes-tt-now); }   /* 開催中の企画（当日のみ） */

/* 時刻 → 企画名 → 団体名 の順に縦に並べる（重ならない） */
.ngfes-tt__event-body {
  display: flex; flex-direction: column;
  height: 100%;
  overflow: hidden;
}
.ngfes-tt__event-time {
  flex: none;
  font-size: var(--ngfes-tt-event-time-size);
  line-height: 1.2;
  color: var(--ngfes-tt-muted);
  white-space: nowrap;
}
.ngfes-tt__event-name {
  font-size: var(--ngfes-tt-event-name-size);
  line-height: 1.25;
  overflow-wrap: anywhere;
  /* 入りきらない場合は、入る行数で切って「…」を付ける（行数は JavaScript が自動で決める） */
  display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
}
.ngfes-tt__event-holder {
  flex: none;
  font-size: var(--ngfes-tt-event-holder-size);
  line-height: 1.2;
  color: var(--ngfes-tt-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 枠が小さいときは団体名を省く */
.ngfes-tt__event.no-holder .ngfes-tt__event-holder { display: none; }
/* 枠がとても小さいときは、時刻と企画名を横 1 行に並べる */
.ngfes-tt__event.is-compact .ngfes-tt__event-body { flex-direction: row; align-items: baseline; gap: 4px; }
.ngfes-tt__event.is-compact .ngfes-tt__event-name { -webkit-line-clamp: 1; }

/* ---------- 現在時刻の線（管理画面で設定した日だけ） ---------- */
.ngfes-tt__now {
  position: absolute; left: calc(var(--ngfes-tt-time-w) - 6px); right: 0;
  height: 2px; margin-top: -1px;
  background: var(--ngfes-tt-now);
  z-index: 4; pointer-events: none;
}
.ngfes-tt__now::before {
  content: ""; position: absolute; left: 0; top: -3px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ngfes-tt-now);
}

.ngfes-tt-empty { color: #666; }