/*
 * 賛同企業・団体一覧。 ロゴ + 名称のカードをグリッドで敷き詰める。
 *
 * Figma 参照:
 *   - セクション: 715:10003 (desktop) / 715:9713 (mobile)
 *   - カード: 844:6522 (card-partner)
 *
 * デザイン準拠点:
 *   - グリッドは モバイル 2 列 / デスクトップ 4 列、gap は共に 16px
 *   - カードは background-light (#eeeeeb) + radius 24、角丸で中身をクリップ
 *   - 上段の logo は 3:2 の白ベタに padding 32。 ロゴは contain で中央配置
 *   - 下段の name は padding 16 / 16px / line-height 1.25。 文字色は Figma が
 *     #000 を指定しており、本文の --color-text-default (#363636) ではない
 *
 * デザインから意図的に外した点:
 *   - Figma の名称は 1 行 truncate だが、「公益財団法人東京都歴史文化財団」の
 *     ような実データがほぼ読めなくなるため 2 行 clamp にした
 *   - Figma のカードはリンクを持たないが、URL 入力時は外部リンクになるため
 *     hover / focus-visible の合図を最小限だけ足した (テーマの .entry-body a
 *     の緑 + 下線は名称の可読性を損なうので打ち消す)
 *   - 同じく URL がある時だけ名称の後ろに別タブアイコンを出す。 グリフは
 *     フッタ・CTA と共通の assets/images/icon-arrow-up-right.svg を mask で
 *     流用する (blocks/button と同じ手法)
 *
 * 閾値はプロジェクト標準の 769px。 blocks/card のように 1024px へ上げる必要は
 * ない (769px でも 4 列で 1 カード 160px 前後を確保できる)。
 *
 * `.entry-body` プレフィックスで specificity 稼ぎ。 縦マージンは持たず
 * entry-body の owl ルール ([class*="wp-block-lazyblock-"]) に一任する。
 */
.entry-body .lazyblock-supporter-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;

  & .card {
    display: flex;
    flex-direction: column;
    /* grid の stretch と合わせて、同じ行のカード高さを揃える。 */
    height: 100%;
    overflow: hidden;
    background: var(--color-background-light);
    border-radius: var(--radius-default);
    color: var(--color-neutral-black);
    text-decoration: none;
  }

  & .logo {
    display: flex;
    flex-shrink: 0;
    /* .card (縦 flex) の item なので min-height は auto = コンテンツ由来。
     * 縦長のロゴだとその最小高さが aspect-ratio を押し広げて 3:2 が崩れる
     * ため 0 に落とす。 img 側の min-* も同じ理由。 */
    min-height: 0;
    align-items: center;
    justify-content: center;
    aspect-ratio: 3 / 2;
    padding: var(--space-8);
    background: var(--color-fill-light);
  }

  /* 入稿ロゴは縦横比がばらつくので contain で歪ませずに収める。 */
  & .logo img {
    display: block;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    object-fit: contain;
  }

  /* カードが縦に伸びたぶんは名称帯が吸収する。 flex/grid コンテナにすると子の
   * -webkit-box が blockify されて line-clamp が壊れるので block のままにする。
   * 組版は .entry-body から継承する本文の値 (18px / 36px) に引きずられないよう、
   * ここで確定させる (.text も継承する)。 */
  & .name {
    display: block;
    flex: 1 0 auto;
    padding: var(--space-4);
    font-size: var(--font-size-text-16);
    line-height: 1.25;
  }

  & .name .text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    /* 区切り文字を持たない長い法人名でもカード幅で折り返す。 */
    overflow-wrap: anywhere;
  }

  /* URL を持つカードだけに出る別タブアイコン。 名称と同じインライン整形文脈に
   * 置いてあるので、折り返しても最後の文字の直後に続く。 グリフはフッタ・CTA と
   * 共通のアセットを mask で流用する (blocks/button と同じ手法)。 */
  & .name .icon {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-left: var(--space-1);
    /* ベースラインに乗せる。 line box 下端に揃えると descender ぶん沈んで見える。 */
    vertical-align: baseline;
    background-color: currentColor;
    mask-image: url('../../assets/images/icon-arrow-up-right.svg');
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-image: url('../../assets/images/icon-arrow-up-right.svg');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
  }

  & a.card:hover,
  & a.card:focus-visible {
    text-decoration: none;
    opacity: 0.7;
  }

  @media (min-width: 769px) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}