/*
 * 定義リスト。 dt / dd 形式で「項目名」と「内容」を並べる。 イベント CPT では
 * 「日程」「会場」等のメタ情報テーブルとして、他 CPT では仕様表や Q&A 用途に。
 * Figma 参照 (event 単一ページ):
 *   - モバイル: 715:17490
 *   - デスクトップ: 715:17614
 *
 * 主要デザイン:
 *   - 外枠を `overflow: hidden` + 24px 角丸で囲み、内部の行の色を切り抜く
 *   - 奇数行に `--color-fill-base` の塗り (ゼブラ) で区切りを表現。 上下
 *     ボーダーは使わない
 *   - モバイルは dt (上) + dd (下) の縦積み、デスクトップは 200px + 1fr
 *   - 内容 (dd) は classic_editor (TinyMCE / 段落 + リンクのみ) 由来の
 *     `<p>` を素直に縦積み。 リンクの色は `.entry-body a` が担当
 */
.lazyblock-definition-list {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-default);

  & .row {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-5);
    /* label / value / value 内の <p> が共通で継承するタイトめのリーディング。
     * body の line-height: 2 のままでは desktop 時に label と value の行の
     * ベースラインがズレて見えるため、行全体で 1.5 に揃える。 */
    line-height: 1.5;
    background: var(--color-fill-base);
  }

  /* 奇数行 (1, 3, 5, ...) にゼブラ塗り。 border は使わない。 */
  & .row:nth-child(odd) {
    background: var(--color-fill-light);
  }

  & .label {
    margin: 0;
    font-weight: var(--font-weight-bold);
  }

  & .value {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    word-break: break-word;
  }

  & .value p {
    margin: 0;
  }

  @media (min-width: 769px) {
    & .row {
      flex-direction: row;
      align-items: flex-start;
      gap: var(--space-4);
    }

    /* dt は 200px 固定、dd は残り全部 (flex-1)。 */
    & .label {
      flex: 0 0 200px;
    }

    & .value {
      flex: 1 1 0;
      min-width: 0;
    }
  }
}