/* =============================================================================
   seminar.css — seminar.html 専用の追補（説明会カレンダーの自前描画）
   -----------------------------------------------------------------------------
   /calendar（バロウズ生成）の日程データを seminar-calendar.js が取得し、
   ネイティブな日程カード＋「この日程で参加する」ボタンとして描画する。
   すべて tokens.css の意味トークンを参照する（生の数値は書かない）。
   このファイルは seminar.html のみが読み込むため、他ページに影響しない。
   02_conventions/css.md / accessibility.md 準拠。
   ============================================================================= */

@layer components {
  /* ページ内アンカー（「参加する」→ 申込フォーム）をなめらかに移動 */
  html {
    scroll-behavior: smooth;
  }

  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }
  }

  /* JS が日程取得に成功したときだけ表示（空の間は不可視・余白も出さない） */
  .event-list--ready {
    display: grid;
    gap: var(--space-md);
    margin-block-start: var(--space-lg);
  }

  .event-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-md);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-inline-start: 4px solid var(--color-primary);
    border-radius: var(--radius-md);
  }

  .event-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
    min-inline-size: 0;
  }

  .event-card__when {
    color: var(--color-primary-ink);
    font-size: var(--text-sm);
    font-weight: 700;
  }

  .event-card__title {
    font-size: var(--text-md);
    font-weight: 700;
    line-height: var(--leading-heading);
  }

  .event-card__meta,
  .event-card__desc {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
  }

  /* モバイル: ボタンは下部・全幅で目立たせる */
  .event-card__cta {
    inline-size: 100%;
  }

  /* デスクトップ: 情報を左、ボタンを右に配置 */
  @media (width >= 36rem) {
    .event-card {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
    }

    .event-card__body {
      flex: 1 1 auto;
    }

    .event-card__cta {
      inline-size: auto;
      flex: 0 0 auto;
    }
  }
}