/* ==============================================================
   top-hero.css — イベントのトップ掲載(17、2026-10-22)
   - トップのヒーロースライダーの 1 枚(.teh--slide。SP 4:5 / PC 16:9)と、全ページ下部の共通バナー枠の 1 枚(.teh--banner。10:3)
   - 背景は背景セットの画像(文字なし)。文字は HTML で重ね、カンプ(docs/reference/design/top-event-hero/comp/)の配置を
     コンテナクエリ単位 cqi(枠の幅 = 100cqi)で再現する。どの画面幅でも比率は同じ
   - 色は tokens.css、書体は --ff-top-hero(Zen Maru Gothic。掲載中のイベントがあるページだけ読む)
   - 日付チップが多いとき(PC・バナー 7 件以上、SP 10 件以上)はチップの代わりに「M/D〜M/D」を出す(.teh--many-pc / --many-sp)
   - 読み込むのは functions.php acmssa_enqueue_styles()(掲載中のイベントがあるとき)
   ============================================================== */
.teh {
  position: relative; width: 100%; overflow: hidden;
  container-type: inline-size;
  font-family: var(--ff-top-hero); color: var(--c-offwhite); line-height: 1;
  background: var(--c-milan-red);
}
.teh--slide { aspect-ratio: 4 / 5; }
.teh--banner { aspect-ratio: 10 / 3; }
.teh__bg, .teh__bg img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.teh__bg img { object-fit: cover; object-position: center; }
.teh__body { position: absolute; inset: 0; }
.teh__body p, .teh__body ul { margin: 0; padding: 0; list-style: none; }
.teh__line1, .teh__title {
  position: absolute; font-weight: 700; white-space: nowrap;
  text-shadow: 0 0.25cqi 0.6cqi rgba(0, 0, 0, .55);
  paint-order: stroke fill; -webkit-text-stroke: 0.45cqi #1a0000;   /* 濃い縁取り(カンプ) */
}
.teh__title { font-weight: 900; letter-spacing: -0.01em; }
/* クラスバッジ: 黒い円に赤と白の縁、文字 2 行 */
.teh__classes { position: absolute; display: flex; }
.teh__badge {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  aspect-ratio: 1; border-radius: 50%; background: var(--c-black); color: var(--c-offwhite); text-align: center; font-weight: 700;
  box-shadow: 0 0 0 0.22cqi var(--c-offwhite), 0 0 0 0.5cqi var(--c-milan-red);
}
.teh__badge-main { line-height: 1; }
.teh__badge-sub { line-height: 1; margin-top: 0.3em; font-size: 55%; }
/* 会場・全N回・日付チップ(背景が赤ベースなので、日付チップと回数は黒のボックス。カンプの赤から変更 = ユーザー指示 2026-10-23) */
.teh__sched { position: absolute; display: grid; grid-template-columns: 1fr auto; column-gap: 1cqi; align-items: end; }
.teh__venue, .teh__count { font-weight: 700; text-shadow: 0 0.15cqi 0.4cqi rgba(0, 0, 0, .6); }
.teh__count { text-align: right; white-space: nowrap; background: var(--c-black); border-radius: 0.4cqi; padding: 0.3em 0.6em; text-shadow: none; justify-self: end; box-shadow: 0 0 0 0.12cqi rgba(255, 255, 255, .7); }   /* 背景の暗い部分でも箱が見えるよう細い白縁 */
.teh__chips { grid-column: 1 / -1; display: flex; flex-wrap: wrap; }
.teh__chip {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.28em; padding: 0 0.55em;
  background: var(--c-black); color: var(--c-offwhite); border-radius: 0.5cqi; font-weight: 700; white-space: nowrap;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 0.12cqi rgba(255, 255, 255, .7), 0 0.15cqi 0.4cqi rgba(0, 0, 0, .35);
}
.teh__chip-w {   /* 曜日: 白い円に黒文字(CSS で描く)。大きさはチップの文字に対する em */
  display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; flex: none;
  width: 1.3em; height: 1.3em; font-size: 0.6em;
  background: var(--c-offwhite); color: var(--c-black); line-height: 1;
}
.teh__range { grid-column: 1 / -1; display: none; font-weight: 700; text-shadow: 0 0.15cqi 0.4cqi rgba(0, 0, 0, .6); white-space: nowrap; }

/* ---------- スライド SP(4:5、1080 幅基準。1cqi = 10.8px) ---------- */
.teh--slide .teh__classes { left: 3.7cqi; top: 3.7cqi; gap: 0.6cqi; }
.teh--slide .teh__badge { width: 13.3cqi; font-size: 4.6cqi; }
.teh--slide .teh__badge-sub { font-size: 2.6cqi; }
.teh--slide .teh__line1 { left: 7.4cqi; top: 69.5cqi; font-size: min(5.3cqi, calc(85cqi / var(--l-len, 16))); }
.teh--slide .teh__title { left: 7.4cqi; top: 76.5cqi; font-size: min(15.4cqi, calc(86cqi / var(--t-len, 7))); -webkit-text-stroke-width: 1.08cqi; }   /* 縁取りは元(0.9)の 1.2 倍(ユーザー指示 2026-10-23) */
.teh--slide .teh__sched { left: 48cqi; right: 3.7cqi; top: 102cqi; row-gap: 1.2cqi; }
.teh--slide .teh__venue { font-size: 2.9cqi; line-height: 1.25; }
.teh--slide .teh__count { font-size: 2.9cqi; }
.teh--slide .teh__chips { gap: 1cqi; display: grid; grid-template-columns: repeat(3, 1fr); }
.teh--slide .teh__chip { height: 5.6cqi; font-size: 3.9cqi; }
.teh--slide .teh__range { font-size: 5cqi; }
.teh--slide.teh--many-sp .teh__chips { display: none; }
.teh--slide.teh--many-sp .teh__range { display: block; }

/* ---------- スライド PC(16:9、1920 幅基準。1cqi = 19.2px) ---------- */
@media (min-width: 768px) {
  .teh--slide { aspect-ratio: 16 / 9; }
  .teh--slide .teh__classes { left: auto; right: 8.3cqi; top: 37.8cqi; gap: 0.4cqi; }
  .teh--slide .teh__badge { width: 7.6cqi; font-size: 2.6cqi; }
  .teh--slide .teh__badge-sub { font-size: 1.45cqi; }
  .teh--slide .teh__line1 { left: 39cqi; top: 20.8cqi; font-size: min(3.2cqi, calc(53cqi / var(--l-len, 16))); -webkit-text-stroke-width: 0.3cqi; }
  .teh--slide .teh__title { left: 39cqi; top: 25.4cqi; font-size: min(8.5cqi, calc(53cqi / var(--t-len, 7))); -webkit-text-stroke-width: 0.66cqi; }   /* 縁取りは元(0.55)の 1.2 倍 */
  /* PC: 会場名とチップは右端(バッジと同じ右 7.9cqi)で右揃え。全N回は上段「ACミランアカデミー愛知 …」の上(左 39cqi)に、バナーと同じ余白で(ユーザー指示 2026-10-23) */
  .teh--slide .teh__sched { left: 45.6cqi; right: 7.9cqi; top: 48.6cqi; row-gap: 0.7cqi; grid-template-columns: 1fr; }
  .teh--slide .teh__venue { font-size: 1.7cqi; line-height: 1.2; text-align: right; }
  .teh--slide .teh__count { font-size: 1.9cqi; padding: 0.35em 0.9em; position: absolute; left: -6.6cqi; top: -32.6cqi; }   /* = 枠の左 39cqi・上 16cqi(.teh__sched 基準の相対値) */
  .teh--slide .teh__chips { display: flex; gap: 0.45cqi; justify-content: flex-end; }
  .teh--slide .teh__chip { height: 2.7cqi; font-size: 2cqi; min-width: 7.3cqi; }
  .teh--slide .teh__range { font-size: 2.6cqi; }
  .teh--slide.teh--many-sp .teh__chips { display: flex; }
  .teh--slide.teh--many-sp .teh__range { display: none; }
  .teh--slide.teh--many-pc .teh__chips { display: none; }
  .teh--slide.teh--many-pc .teh__range { display: block; }
}

/* ---------- バナー(10:3、1000 幅基準。1cqi = 10px) ---------- */
.teh--banner .teh__line1 { left: 28cqi; width: 54cqi; top: 5cqi; font-size: min(3cqi, calc(54cqi / var(--l-len, 16))); text-align: left; -webkit-text-stroke-width: 0.3cqi; }   /* 上段・見出しは 28cqi の線で左揃え(ユーザー指示 2026-10-23) */
.teh--banner .teh__title { left: 28cqi; width: 54cqi; top: 8.6cqi; font-size: min(9.1cqi, calc(54cqi / var(--t-len, 7))); text-align: left; -webkit-text-stroke-width: 0.65cqi; }   /* 見出しは 1.2 倍(7.6 → 9.1cqi)、縁取りは元(0.5)の 1.3 倍(ユーザー指示) */
.teh--banner .teh__classes { right: 2cqi; top: 4.5cqi; display: grid; grid-template-columns: repeat(2, 7cqi); gap: 0.3cqi; }
.teh--banner .teh__badge { width: 7cqi; font-size: 2.4cqi; box-shadow: 0 0 0 0.2cqi var(--c-offwhite), 0 0 0 0.45cqi var(--c-milan-red); }
.teh--banner .teh__badge-sub { font-size: 1.3cqi; }
/* 会場・全N回・チップは 28cqi の線で左揃え。全N回は会場名のすぐ右、文字は 150%(ユーザー指示 2026-10-23) */
.teh--banner .teh__sched { left: 28cqi; right: 3.5cqi; top: 18cqi; row-gap: 2.5cqi; grid-template-columns: 1fr; }   /* 会場名とチップの間は 1 文字分 */
.teh--banner .teh__venue { font-size: 2.55cqi; line-height: 1.2; text-align: right; }   /* 会場名とチップは右端のライン(右から 3.5cqi)で右揃え(ユーザー指示) */
.teh--banner .teh__chips { justify-content: flex-end; }
.teh--banner .teh__count { font-size: 2.55cqi; padding: 0.35em 0.9em; position: absolute; left: -26cqi; bottom: 0; }   /* 全N回はバナーの左下(左端から 2cqi、チップと下端をそろえる) */
.teh--banner .teh__chips { gap: 0.4cqi; }
.teh--banner .teh__chip { height: 3.9cqi; font-size: 2.7cqi; min-width: 10.2cqi; border-radius: 0.6cqi; }
.teh--banner .teh__range { font-size: 3.4cqi; }
.teh--banner.teh--many-pc .teh__chips { display: none; }
.teh--banner.teh--many-pc .teh__range { display: block; }

/* 既存の枠との折り合い: .TopBanner img の aspect-ratio / height 指定を打ち消す(背景は枠いっぱい)。SP の #TopBannerWrap は flex で
   .TopBanner の幅が中身(画像の固有幅)頼みなので、HTML のバナーは幅を明示する */
.TopBanner .teh__bg img { aspect-ratio: auto; height: 100%; }
#TopBannerWrap .TopBanner:has(.teh--banner) { flex: 1 1 100%; max-width: 100%; min-width: 0; }
#ToppageSlider .swiper-slide .teh { display: block; }