/*
 * イベントの導線 (2026-10-15)。既存の区画・ヘッダーの CSS には手を入れず、足す分だけをここに置く。
 * デザインはスキル hp-part-proposal で GPT に 5 案描かせた案 1 (今の LP に忠実な基準) を写した。
 */

/* ── ヘッダー: スマホ幅でも「イベント」だけは出す (ナビは 1100px 以下で隠れるため) ── */
.header-event-link {
  display: none;
}
@media (max-width: 1100px) {
  /* 横にすべるナビ (既存) は残し、その右に「イベント」を重ねずに並べる */
  .cinematic .site-header .desktop-nav {
    min-width: 0;
    flex: 1 1 auto;
  }
  /* 右の「イベント」と重複するので、すべるナビの中の「イベント」は隠す */
  .cinematic .site-header .desktop-nav .nav-event {
    display: none;
  }
  .cinematic .header-event-link {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 16px;
    margin-left: auto;
    border: 1px solid #364353;
    border-radius: 7px;
    background: #101720;
    color: #dce4ee;
    font-size: 14px;
    white-space: nowrap;
    text-decoration: none;
  }
  .cinematic .header-event-link:hover {
    background: #23344b;
    border-color: #7796b9;
    color: #fff;
  }
}

/* ── トップの「イベント」区画 ── */
.events-band {
  position: relative;
  overflow: hidden;
}
.events-band .events-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 640px);
  align-items: center;
  gap: 40px;
  min-height: 360px;
  padding: 56px 56px;
  border: 1px solid #222c3c;
  border-radius: 4px;
  background:
    linear-gradient(90deg, rgba(5, 9, 18, 0.96) 0%, rgba(5, 9, 18, 0.86) 45%, rgba(5, 9, 18, 0.15) 100%),
    #050a14 url("../img/cinematic/horizon.webp") right center / cover no-repeat;
  overflow: hidden;
}
.events-band h2 {
  margin: 14px 0 0;
  /* 案のとおり 1 行で収める (LP 全体の h2 は大きいので、この区画だけ下げる) */
  font-size: clamp(26px, 2.6vw, 38px);
  line-height: 1.5;
}
.events-band .events-lead {
  margin: 22px 0 0;
  line-height: 2;
  color: #c9d0dc;
}
.events-band .button {
  margin-top: 30px;
}
@media (max-width: 900px) {
  .events-band .events-panel {
    grid-template-columns: 1fr;
    min-height: 420px;
    align-items: start;
    padding: 40px 28px;
    gap: 28px;
    background:
      linear-gradient(180deg, rgba(5, 9, 18, 0.95) 0%, rgba(5, 9, 18, 0.82) 60%, rgba(5, 9, 18, 0.55) 100%),
      #050a14 url("../img/cinematic/horizon.webp") center bottom / cover no-repeat;
  }
}
@media (max-width: 640px) {
  .events-band .events-panel {
    padding: 32px 20px;
  }
  .events-band .button {
    width: 100%;
    justify-content: center;
  }
}

/* スマホのメニュー (#440 のハンバーガー・700px 以下) と並べる: 右端に「イベント」→「Menu」の順・高さをそろえる */
@media (max-width: 700px) {
  .cinematic .header-event-link {
    order: 2;
    margin-left: auto;
    min-height: 36px;
    height: 36px;
    padding: 0 14px;
    font-size: 13px;
  }
  .cinematic.narrative .site-header .menu-toggle {
    order: 3;
    margin-left: 8px;
  }
}