/* ============================================================
 * /oripa/event/（イベント／抽選情報まとめ）のページ個別スタイル。
 *
 * best-pillar の共通パーツ（.hero / .section / .section__inner）は style.css が
 * 持っているが、素の <p> <ul> <a> には何も当たらない（style.css の reset が
 * `ul, ol { list-style: none; padding: 0 }` を掛けているため、リンクの箇条書きが
 * ただの黒い行に見える）。他の柱ページは専用クラスで組んでいるので共通側は
 * 触らず、このページのモディファイア配下でだけ本文の既定を与える。
 *
 * 本文の既定は **`.section > .section__inner > *`** に限定して当てている。
 * `.section__inner` だけで書くと、同じクラスを使う `<nav class="oripa-anchor-nav">`
 * 配下の <ul> にも「1行1カード」のスタイルが当たってボタン列が縦積みになる
 * （実際にそれで一度潰れた）。`.section__inner` を別の親で使い回すときは同じ穴に注意。
 *
 * 値はすべて --ds-* トークン経由で参照する（生hex / 生px 禁止）。
 * ============================================================ */

.area-article--page-oripa-event .hero__lead {
  max-width: 76ch;
  font-size: var(--ds-text-body-size);
  line-height: var(--ds-text-body-lh);
}

.area-article--page-oripa-event .section > .section__inner > h2 {
  font-size: var(--ds-text-h2-size);
  font-weight: var(--ds-text-h2-weight);
  line-height: var(--ds-text-h2-lh);
  margin: 0 0 var(--ds-space-stack-sm);
}

.area-article--page-oripa-event .section > .section__inner > p {
  max-width: 76ch;
  margin: 0 0 var(--ds-space-stack-sm);
  font-size: var(--ds-text-body-size);
  line-height: var(--ds-text-body-lh);
  color: var(--ds-color-text);
}

/* リンクの箇条書き（行き先カード）。reset で消えた list-style は戻さず、
   1行1カードのリストにして「押せる」ことを見た目で示す。 */
.area-article--page-oripa-event .section > .section__inner > ul {
  display: grid;
  gap: var(--ds-space-inline-sm);
  max-width: 76ch;
  margin: 0;
  padding: 0;
  list-style: none;
}
.area-article--page-oripa-event .section > .section__inner > ul > li { margin: 0; }
.area-article--page-oripa-event .section > .section__inner > ul > li > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-inline-md);
  padding: var(--ds-space-inline-md);
  border: var(--ds-border-width) solid var(--ds-color-border);
  border-radius: var(--ds-radius-card);
  background: var(--ds-color-bg-elevated);
  color: var(--ds-color-text);
  font-size: var(--ds-text-body-sm-size);
  font-weight: var(--ds-text-h3-weight);
  line-height: var(--ds-text-body-sm-lh);
  text-decoration: none;
}
/* 右端の「›」。SVG を1本ずつ置くほどの要素ではないので擬似要素の山形で出す。 */
.area-article--page-oripa-event .section > .section__inner > ul > li > a::after {
  content: "";
  flex: 0 0 auto;
  width: var(--ds-space-inline-sm);
  height: var(--ds-space-inline-sm);
  border-top: var(--ds-border-width-heading-accent) solid var(--ds-color-text-subtle);
  border-right: var(--ds-border-width-heading-accent) solid var(--ds-color-text-subtle);
  transform: rotate(45deg);
}
.area-article--page-oripa-event .section > .section__inner > ul > li > a:hover {
  border-color: var(--ds-color-border-strong);
  background: var(--ds-color-bg-paper);
}

/* ------------------------------------------------------------
 * ページ内リンクのボタン列（目次）。body_html の <nav class="oripa-anchor-nav">。
 *
 * 「カレンダー」「月別の一覧表」等のセクションへ飛ばすだけの**内部リンク**で、
 * 外部（アフィリエイト）へは飛ばさない。外部への遷移はカレンダー・一覧表の
 * アイコン側が持つ（partials/oripa-event-calendar.php・oripa-event-table.php）。
 *
 * 記事の .article-toc とは別物なので独自クラスで持つ（柱ページには .article-toc の
 * スタイルが配られていない）。
 * ------------------------------------------------------------ */
.area-article--page-oripa-event .oripa-anchor-nav {
  margin: var(--ds-space-stack-sm) 0 0;
}

.area-article--page-oripa-event .oripa-anchor-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-inline-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}
.area-article--page-oripa-event .oripa-anchor-nav__list > li { margin: 0; }

.area-article--page-oripa-event .oripa-anchor-nav__list > li > a {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-inline-xs);
  min-height: var(--ds-touch-target-min);
  padding: var(--ds-space-inline-xs) var(--ds-space-inline-md);
  border: var(--ds-border-width) solid var(--ds-color-border-strong);
  border-radius: var(--ds-radius-chip);
  background: var(--ds-color-bg-elevated);
  color: var(--ds-color-text);
  font-size: var(--ds-text-body-sm-size);
  font-weight: var(--ds-text-h3-weight);
  line-height: var(--ds-text-body-sm-lh);
  text-decoration: none;
}
/* 下向きの山形で「ページ内を下に飛ぶ」ことを示す。 */
.area-article--page-oripa-event .oripa-anchor-nav__list > li > a::after {
  content: "";
  flex: 0 0 auto;
  width: var(--ds-space-inline-sm);
  height: var(--ds-space-inline-sm);
  border-right: var(--ds-border-width-heading-accent) solid var(--ds-color-text-subtle);
  border-bottom: var(--ds-border-width-heading-accent) solid var(--ds-color-text-subtle);
  transform: rotate(45deg);
  align-self: center;
}
.area-article--page-oripa-event .oripa-anchor-nav__list > li > a:hover {
  background: var(--ds-color-bg-paper);
}

/* アンカー先が固定ヘッダー・下タブに隠れないよう、飛び先の上に余白を確保する。 */
.area-article--page-oripa-event [id^="sec-"] {
  scroll-margin-top: var(--ds-space-stack-lg);
}

/* 本文中（<p> 内）のリンクは下線で示す。 */
.area-article--page-oripa-event .section > .section__inner > p a {
  color: var(--ds-color-text-link);
  text-decoration: underline;
  text-underline-offset: var(--ds-space-inline-xs);
}