/*
 * lazyBlock 内のイベントカード。 archive で使う .event-card (縦積みの
 * グリッドカード) をベースにしつつ、記事本文中に埋め込むパネル形式に
 * 拡張する:
 *   - 白背景 + 20px パディング + var(--radius-default) の角丸で「囲みパネル」化
 *   - モバイル: 画像 (上) + テキスト (下) の縦積み、gap 32px
 *   - デスクトップ (>=769px): 画像 (左 50%) + テキスト (右 50%) の横並び、
 *     items: center で縦方向は中央揃え、gap 32px
 *
 * 参照 Figma:
 *   - モバイル single 内カード: 734:6254
 *   - デスクトップ single 内カード: 734:6223
 */
.lazyblock-event-card {

  & .event-card {
    padding: var(--space-4);
    background: var(--color-fill-light);
    border-radius: var(--radius-default);
  }

  /*
   * `section.single-* .entry-body a { color: green; underline }` は記事本文
   * 中のインラインリンクを緑下線にする意図的なルールだが、カード全体を
   * 包む .card-link にも当たり、タイトルや日付にアンダーラインが乗って
   * しまう。 lazyBlock 内の .card-link に限って打ち消す。
   *
   * 元ルールは `section.single-event .entry-body a` = (0,2,2) の specificity
   * を持つので、こちらは `.lazyblock-event-card .event-card a.card-link`
   * = (0,3,1) にして確実に勝たせる。
   */
  & .event-card a.card-link {
    color: inherit;
    text-decoration: none;
  }

  & .event-card .title {
    margin-top: var(--space-2);
  }

  /*
   * サムネイル画像は archive card の default 24px より一段小さい 8px
   * (--radius-small) にする (Figma 734:6256 / 734:6240)。 パネル外枠の
   * 24px より内側の要素が小さい radius を持つ、というネスト表現。
   * .event-card .thumb 側で overflow: hidden されているので、
   * 外枠の radius だけ変えれば img も追従してクリップされる。
   */
  & .event-card .thumb {
    border-radius: var(--radius-small);
  }

  @media (min-width: 769px) {
    & .event-card {
      padding: var(--space-8);
    }
    /*
     * デスクトップは thumb と body の間隔を 32px に広げて 50/50 横並び。
     * モバイルは base .event-card .card-link の gap: 16px を継承。
     */
    & .event-card .card-link {
      flex-direction: row-reverse;
      align-items: center;
      gap: var(--space-8);
    }

    /*
     * thumb : body = 1 : 2 の比率で分ける。 minmax(0, 1fr) 相当の
     * `min-width: 0` を付けないと flex の内在幅で thumb 側が
     * 潰れないので忘れずに付ける。
     */
    & .event-card .thumb {
      flex: 1 1 0;
      min-width: 0;
    }

    & .event-card .body {
      flex: 2 1 0;
      min-width: 0;
    }
  }

}