/* =========================================================
   イベント一覧（events/index.html）専用の部品　2026-10-17
   使い方: top.css → page.css → motion.css の後に読み込む。
   方針:
     - 既存 CSS（top.css / page.css / motion.css）は一切書き換えない。追加だけで成立させる。
     - 色・字サイズは top.css の :root トークンを使う。生の色を書くのは、
       page.css の .phero::before と同じ値（紺地のにじみ）と、白の透過だけ。
     - 新規クラスは3系統: .evp-（開催予定のポスター）/ .past-（開催済み）/ .tl-（記録のタイムライン）。
   考え方:
     開催予定の1大会＝サービス各ページの「写真つきページ見出し（.phero--media）＋要点帯（.pkeys）」を
     1大会ぶんに縮めた形。日付を最も大きく組み、会場・賞金・締切は帯に並べて一目で拾えるようにする。
   ========================================================= */

/* --- 開催予定のポスター（.evp） --- */
.evp-list { display: grid; gap: clamp(28px, 3vw, 48px); }
.evp { position: relative; overflow: hidden; border-radius: 10px; background: var(--navy-900); color: #fff; }

/* 写真の面。地色のにじみは .phero::before と同じ値 */
.evp__stage {
  position: relative;
  background: radial-gradient(60% 80% at 78% 12%, rgba(124, 86, 168, .45), transparent 65%),
              radial-gradient(70% 90% at 12% 100%, rgba(61, 90, 171, .5), transparent 70%),
              linear-gradient(180deg, #0b1438, #0a1130);
}
.evp__bg { position: absolute; inset: 0; overflow: hidden; }
.evp__bg img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); opacity: .7; }
/* 暗幕: 上は写真を見せ、文字の乗る下ほど紺に落とす（.phero__bg::after と同じ考え方） */
.evp__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10, 17, 48, .36) 0%, rgba(10, 17, 48, .12) 28%, rgba(10, 17, 48, .82) 66%, rgba(10, 17, 48, .97) 100%);
}
/* 上の余白＝写真が見える帯。本文は下詰め */
.evp__in {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(24px, 3vw, 64px); align-items: end;
  padding: clamp(150px, 16vw, 220px) clamp(24px, 3.6vw, 64px) clamp(28px, 3.2vw, 52px);
}

/* 大会名: 英字ラベル（.phero__en と同じ作り）→ 和文 h3 */
.evp__en { font-family: var(--f-en); font-weight: var(--fw-medium); font-size: var(--fs-eyebrow); letter-spacing: .24em; color: rgba(255, 255, 255, .72); display: flex; align-items: center; gap: 22px; }
.evp__en .bar { width: 54px; flex: none; }
.evp__title { margin-top: 16px; font-size: var(--fs-h2); font-weight: var(--fw-bold); line-height: 1.4; letter-spacing: -.01em; color: #fff; }

/* 日付: このページの主役。英字 800 で最大級に組む */
.evp__date { margin: clamp(18px, 2vw, 30px) 0 0; display: flex; align-items: baseline; gap: clamp(12px, 1.4vw, 22px); font-family: var(--f-en); }
.evp__md { font-weight: 800; font-size: clamp(60px, 8.4vw, 136px); line-height: .9; letter-spacing: -.035em; font-variant-numeric: tabular-nums; color: #fff; }
.evp__dow { display: grid; gap: 4px; font-weight: var(--fw-semibold); font-size: var(--fs-label); letter-spacing: .22em; line-height: 1.2; color: rgba(255, 255, 255, .7); }
.evp__dow b { font-weight: var(--fw-bold); color: #fff; }

/* 右側: 要約とエントリー導線 */
.evp__side { display: grid; gap: clamp(20px, 2vw, 28px); justify-items: start; }
.evp__lead { font-size: var(--fs-lead); line-height: 1.95; letter-spacing: .016em; color: rgba(255, 255, 255, .88); max-width: 34em; }

/* 要点帯（.pkeys と同じ作り。3列×2行で端数を出さない） */
.evp__keys { position: relative; background: var(--evp-keys, var(--navy-950)); border-top: 1px solid rgba(255, 255, 255, .08); padding: clamp(20px, 2.2vw, 30px) clamp(24px, 3.6vw, 64px); }
.evp__keys dl { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2vw, 28px) clamp(16px, 2vw, 32px); }
.evp__keys dl > div { position: relative; padding-left: clamp(14px, 1.4vw, 22px); border-left: 1px solid rgba(255, 255, 255, .16); }
.evp__keys dt { font-family: var(--f-en); font-size: var(--fs-label); font-weight: var(--fw-semibold); letter-spacing: .14em; color: rgba(255, 255, 255, .55); }
.evp__keys dt span { display: inline-block; font-family: var(--f-jp); font-weight: var(--fw-regular); letter-spacing: .06em; margin-left: 10px; }   /* 和文ラベルの途中で折らない */
.evp__keys dd { margin: 6px 0 0; font-size: var(--fs-item-title); font-weight: var(--fw-bold); line-height: 1.45; color: #fff; }
.evp__keys dd small { display: block; margin-top: 6px; font-size: var(--fs-label); font-weight: var(--fw-regular); line-height: 1.7; letter-spacing: .02em; color: rgba(255, 255, 255, .72); }

/* 紺地の上のフォーカス輪郭は、top.css の .dark と同じ明色にする */
.evp :focus-visible { outline-color: #aab8ff; }

/* --- 開催済み（.past） --- */
.past__status { display: inline-block; margin-left: 14px; padding: 3px 12px; border: 1px solid rgba(255, 255, 255, .42); border-radius: 999px; font-family: var(--f-jp); font-size: 11px; font-weight: var(--fw-semibold); letter-spacing: .12em; line-height: 1.6; vertical-align: middle; color: rgba(255, 255, 255, .86); }
.past__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 3.4vw, 64px); align-items: center; }
.past__visual { margin: 0; position: relative; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 10px; background: var(--navy-950); }
.past__visual img { width: 100%; height: 100%; object-fit: cover; }
/* 数字（.facts の暗色版。罫は白の透過、左端の印はブランドのグラデ） */
.past__facts { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(22px, 2.4vw, 32px) clamp(18px, 2vw, 32px); }
.past__facts > div { position: relative; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .18); }
.past__facts > div::before { content: ""; position: absolute; top: -1px; left: 0; width: 28px; height: 2px; background: var(--grad); }
.past__facts dt { font-size: var(--fs-label); font-weight: var(--fw-semibold); letter-spacing: .06em; color: rgba(255, 255, 255, .6); }
.past__facts dd { margin: 8px 0 0; font-size: var(--fs-h3); font-weight: var(--fw-medium); line-height: 1.4; color: #fff; }
.past__facts dd time, .past__facts dd [data-num] { font-family: var(--f-en); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.past__facts dd small { display: block; margin-top: 6px; font-size: var(--fs-body); font-weight: var(--fw-regular); line-height: 1.7; color: rgba(255, 255, 255, .78); }
.past__h3 { font-size: var(--fs-h3); font-weight: var(--fw-bold); line-height: 1.5; letter-spacing: .02em; color: #fff; }
.past__h3::after { content: ""; display: block; width: 32px; height: 2px; margin-top: 14px; background: var(--grad); border-radius: 2px; }

/* --- 記録のタイムライン（.tl）: 告知→開発→成果報告会の順を1本の罫でつなぐ --- */
.tl { margin: clamp(24px, 2.4vw, 36px) 0 0; padding: 0; list-style: none; position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 clamp(14px, 1.6vw, 28px); }
.tl::before { content: ""; position: absolute; left: 0; right: 0; top: 5px; height: 1px; background: rgba(255, 255, 255, .2); }
.tl__item { position: relative; padding-top: 26px; }
.tl__item::before { content: ""; position: absolute; left: 0; top: 0; width: 11px; height: 11px; border-radius: 50%; box-sizing: border-box; background: var(--navy-900); border: 2px solid var(--c3); }
.tl__item--news::before { background: var(--c3); }
.tl__item > a { display: block; }
.tl__date { font-family: var(--f-en); font-weight: var(--fw-semibold); font-size: var(--fs-label); letter-spacing: .1em; color: rgba(255, 255, 255, .72); }
.tl__kind { margin-top: 8px; font-size: var(--fs-eyebrow); letter-spacing: .08em; color: rgba(255, 255, 255, .55); }
.tl__title { margin-top: 6px; font-size: var(--fs-body); font-weight: var(--fw-semibold); line-height: 1.75; color: #fff; transition: color .3s; }
.tl__item > a:hover .tl__title { color: #b9c6ff; }
.tl__more { margin-top: 12px; }
.past__note { margin-top: clamp(16px, 1.6vw, 22px); font-size: var(--fs-eyebrow); line-height: 1.85; color: rgba(255, 255, 255, .62); }
.past__note a { color: #b9c6ff; border-bottom: 1px solid currentColor; }

/* --- 幅別 --- */
@media (max-width: 1099px) {
  .past__grid { grid-template-columns: 1fr; gap: 28px; }
  .past__visual { aspect-ratio: 2 / 1; }
}
@media (max-width: 900px) {
  .evp__in { grid-template-columns: 1fr; gap: 24px; padding: clamp(140px, 36vw, 200px) 22px 26px; }
  .evp__md { font-size: clamp(58px, 17vw, 96px); }
  .evp__side .btn-grad { width: 100%; }
  .evp__keys { padding: 22px 22px 24px; }
  .evp__keys dl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; }
  .past__facts { gap: 20px 16px; }
  /* タイムラインは縦に。罫を左に立て、点をその上に置く */
  .tl { grid-template-columns: 1fr; gap: 22px; padding-left: 24px; }
  .tl::before { left: 5px; right: auto; top: 4px; bottom: 4px; width: 1px; height: auto; }
  .tl__item { padding-top: 0; }
  .tl__item::before { left: -24px; top: 3px; }
}
@media (max-width: 560px) {
  /* 要点帯は1列に。2列だと会場名や対象が4行に折れて、かえって一目で拾えない */
  .evp__keys dl { grid-template-columns: 1fr; gap: 16px; }
  .past__status { display: inline-block; margin: 10px 0 0; }
  .past__facts { grid-template-columns: 1fr 1fr; }
  .past__facts dd { font-size: var(--fs-item-title); }
}
@media (max-width: 359px) {
  .past__facts { grid-template-columns: 1fr; }
}

/* =========================================================
   ポスターごとの世界観（各特設LPのヒーローに寄せる）2026-10-18
   作り（英字ラベル→和文名→日付／要約→CTA／要点帯）は共通のまま、背景と地色だけを変える。
   ここで書く生の色は、各LPの styles.css から持ってきた値（帯の色・緑の地色・オレンジの印）で、
   使うのはそのポスターの中だけ。
   ========================================================= */

/* --- 東京: 白地に斜めの太い帯（LP .fv/.strokes と同じ座標・色）。文字は白い箱に載せる（LP .box/.stamp/.fv__lead span） --- */
.evp--tokyo { --evp-keys: var(--navy-900); background: #fff; color: var(--ink); }
.evp--tokyo .evp__stage { background: #fff; }
.evp--tokyo .evp__bg::after { content: none; }
.evp__strokes { position: absolute; inset: 0; width: 100%; height: 100%; }
.evp__strokes line { fill: none; stroke-linecap: round; stroke-dasharray: 1; }
/* 帯は left→right に描く。JS が動くときだけ隠しておき、.evp が見えた合図（top.js の .is-in）で引く */
.js .evp--tokyo .evp__strokes line { stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s cubic-bezier(.55, 0, .2, 1); transition-delay: var(--d, 0s); }
.js .evp--tokyo.is-in .evp__strokes line { stroke-dashoffset: 0; }
/* 箱は中身の幅に縮め、1行ずつ縦に積む（幅に余裕があっても横に並ばない） */
.evp--tokyo .evp__en { display: flex; width: fit-content; padding: 8px 14px; border: 1px solid var(--ink); background: rgba(255, 255, 255, .92); color: var(--ink); }
.evp--tokyo .evp__title { display: block; width: fit-content; padding: .08em .3em .12em; background: #fff; color: var(--ink); box-shadow: 0 18px 50px -30px rgba(17, 26, 60, .45); }
.evp--tokyo .evp__date { display: flex; width: fit-content; padding: .04em .18em .08em .16em; background: #fff; box-shadow: 0 18px 50px -30px rgba(17, 26, 60, .45); }
.evp--tokyo .evp__md { color: var(--c1); }
.evp--tokyo .evp__dow { color: var(--ink-3); }
.evp--tokyo .evp__dow b { color: var(--ink); }
.evp--tokyo .evp__lead { color: var(--ink); line-height: 2.1; }
.evp--tokyo .evp__lead span { background: #fff; padding: .18em .5em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.evp--tokyo :focus-visible { outline-color: var(--c1); }

/* --- 広島: 植物工場の写真を暗い緑に沈める（LP .v10/.v10n2）。印はLPのオレンジ、要点帯はLPの深緑 --- */
.evp--foodtech { --evp-keys: #10231a; background: #06120c; }
.evp--foodtech .evp__stage { background: #06120c; }
.evp--foodtech .evp__bg picture { display: block; height: 100%; }
.evp--foodtech .evp__bg img { opacity: 1; filter: brightness(.56) saturate(1.05); }
.evp--foodtech .evp__bg::after {
  background: linear-gradient(180deg, rgba(2, 10, 5, .2) 0%, rgba(2, 10, 5, .06) 26%, rgba(2, 10, 5, .8) 64%, rgba(2, 10, 5, .96) 100%),
              radial-gradient(120% 90% at 55% 45%, rgba(0, 8, 4, .08) 20%, rgba(0, 8, 4, .5) 100%);
}
.evp--foodtech .evp__en::before { content: ""; width: 8px; height: 8px; margin: .5em -10px 0 0; align-self: flex-start; border-radius: 50%; background: #e2762a; flex: none; }   /* ラベルが折り返しても1行目に付く */
.evp--foodtech .evp__en .bar { background: #e2762a; }
.evp--foodtech .evp__keys { border-top-color: rgba(255, 255, 255, .1); }

@media (prefers-reduced-motion: reduce) {
  .js .evp--tokyo .evp__strokes line { stroke-dashoffset: 0; transition: none; }
}