/**
 * 共有レイアウト: カードグリッド
 *
 * 記事一覧をカードのグリッドで並べる。
 * 配色は持たない。どの配色と組んでも同じように当たるよう、
 * すべてのセレクタを .optib-layouts-card-grid の配下に置く。
 *
 * このディレクトリには同名のテンプレートパーツも入っている
 * （template-parts/post/content-excerpt.php）。
 * カードのマークアップは CSS だけでは作れないため。
 *
 * 読まれるのは、外観設定のレイアウトが「カード」のときである
 * （inc/appearance.php の OPTIB_CHILD_LAYOUT_PARTS が card => layouts/card-grid）。
 * 読み込み順は palettes/ → layouts/ → skins/ で、
 * ライトでは合わせ目 skins/card-grid-light が後から色の実値を上書きする。
 */

/* ---------------------------------------------------------------
   記事一覧をグリッドにする。

   親テーマには記事だけを囲むラッパー要素が無い。
   一覧の main 直下には、アーカイブ見出し・説明文・記事・ページネーションが
   すべて並列で並ぶ（archive.php:25-26, index.php:29, search.php:23）。

   さらに main のクラスが画面によって違う。
     index.php / archive.php  → main.l-grid__main
     search.php               → main.col-lg-8

   そのため次の形をとる。
     1. 一覧系の画面に限って、両方の main をグリッドにする
     2. 直下の要素は既定で全幅（見出し・説明文・ページネーション）
     3. カードだけが1マスを占める

   こうすると「カード以外は全部全幅」が既定になるので、
   親テーマが一覧に要素を1つ足しても崩れない。

   列数はビューポート幅だけで決める（スマホ1 / タブレット2 / PC3）。
   auto-fill + minmax(下限, 1fr) をやめた理由:
   auto-fill はコンテナ幅で列数が決まるため、サイドバーの有無で
   main の幅が変わると（子 style.css:68 の
   .optib-no-sidebar .l-grid__main { grid-column: span 12 } と
   親 _l-container.css:46-49 の @media (min-width:992px) 内 span 8）
   同じ画面幅でも列数が変わってしまう。

   トラックは minmax(0, 1fr)。1fr は minmax(auto, 1fr) と同義で、
   下限が min-content になるため、長い URL や折り返せない語が
   あるとトラックが膨らんで main からはみ出す。0 を明示して
   「常にきっかり等分」を保証する。
   --------------------------------------------------------------- */
.optib-layouts-card-grid:is(.home, .blog, .archive, .search) :is(.l-grid__main, .col-lg-8) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--spacing-xl);
  align-items: start;
  /* main 自身が、外側の .l-grid（本文とサイドバーを並べているグリッド）の
     行の高さいっぱいに伸びるのを止める。既定は align-items: stretch なので、
     サイドバーの中身が長いと main もサイドバーと同じ高さまで伸びる。
     main の中の .p-post--card は height: 100% を持つため、
     main が必要以上に伸びるとカードもそのぶん一緒に伸びてしまう
     （投稿数が少ないほどサイドバーとの差が大きく、目立つ）。
     align-self: start でこの伸びを止め、main は自分の中身の高さだけを取る。 */
  align-self: start;
}

/* タブレット: 2列。
   768px は親テーマで最も多く使われている md 境界の値を揃えたもの。
   ただし _l-container.css:70 の @media (min-width: 768px) の中身は
   .l-grid__col-md-* の定義だけで、一覧の main はそれを使っていない。
   つまりここで main の幅が変わるわけではなく、
   新しい値を発明しないために揃えている。 */
@media (min-width: 768px) {
  .optib-layouts-card-grid:is(.home, .blog, .archive, .search) :is(.l-grid__main, .col-lg-8) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* PC: 3列。lg（992px）ではなく xl（1200px）を境界にする。

   992px を使わない理由:
   992px は親 _l-container.css:46-53 の @media (min-width: 992px) で
   main が span 8 / sidebar が span 4 に痩せる境界と同じ値である。
   ここで同時に 3列化すると、991px で約437px だったカードが
   992px で約177px まで一気に落ちる（幅が狭まると同時に
   3分割されるため）。

   1200px は親テーマに実在する値であり、ここでの発明ではない:
     - optib/assets/css/woocommerce-custom.css:196 の @media (min-width: 1200px)
     - optib/assets/css/src/flocss/foundation/_variables.css:94 の
       --breakpoint-xl: 1200px（コメントアウトされた定義として存在）
   992–1199px は 2列に倒れる。
   ユーザーの決めた PC3 / タブレット2 / スマホ1 は崩れない。

   なお 1200px 以上でもサイドバー有りのカードは約220px、
   コンテナ上限（1280px）でも約260px で、カードが快適に読める目安とされる
   20rem（320px）にはサイドバー有りでは一度も届かない。
   これは「サイドバーの有無で列数を変えない」という決めから出る帰結である。 */
@media (min-width: 1200px) {
  .optib-layouts-card-grid:is(.home, .blog, .archive, .search) :is(.l-grid__main, .col-lg-8) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* 既定は全幅。カードだけが例外的に1マスに収まる。 */
.optib-layouts-card-grid:is(.home, .blog, .archive, .search) :is(.l-grid__main, .col-lg-8) > * {
  grid-column: 1 / -1;
}

.optib-layouts-card-grid:is(.home, .blog, .archive, .search) :is(.l-grid__main, .col-lg-8) > .p-post--card {
  grid-column: auto;
}

/* ---------------------------------------------------------------
   カード本体。
   親テーマの .p-post--list（下線付き・縦積み）を打ち消して置き換える。
   --------------------------------------------------------------- */
.optib-layouts-card-grid .p-post--card {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin-bottom: 0;
  padding-bottom: 0;
  overflow: hidden;
  background-color: var(--color-bg-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--optib-shadow-sm);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.optib-layouts-card-grid .p-post--card:hover {
  box-shadow: var(--optib-shadow-lg);
  transform: translateY(-2px);
}

.optib-layouts-card-grid .p-post--card .p-post__thumbnail {
  margin-bottom: 0;
  border-radius: 0;
  aspect-ratio: 16 / 9;
}

.optib-layouts-card-grid .p-post--card .p-post__thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.optib-layouts-card-grid .p-post--card .p-post__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--spacing-sm);
  padding: var(--spacing-lg);
}

.optib-layouts-card-grid .p-post--card .p-post__title {
  margin: 0;
  font-size: var(--font-size-xl);
}

.optib-layouts-card-grid .p-post--card .p-post__excerpt {
  margin-bottom: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* メタ情報はカードでは控えめにし、日付とカテゴリーだけを想定する。 */
.optib-layouts-card-grid .p-post--card .p-post__meta {
  margin-top: auto;
  padding-top: var(--spacing-sm);
  font-size: var(--font-size-xs);
  border-top: 1px solid var(--color-border);
}

/* ---------------------------------------------------------------
   マソンリー（レイアウト設定が「カード（マソンリー）」のとき）。

   カードの見た目・列数・間隔はすべて上の規則のままで、
   ここで変えるのは「高さの揃え方」だけである。
   同じ layouts/card-grid が card と masonry の両方から読まれる
   （inc/appearance.php の OPTIB_CHILD_LAYOUT_PARTS）。

   .optib-masonry-ready が付いているときにしか効かない。
   このクラスを付けるのは assets/js/card-masonry.js であり、
   JS が読まれない・失敗する・1カラムに畳まれる場合は付かない。
   付かなければ、この節はまるごと当たらず、見た目は上の
   カードグリッドと完全に同じになる。既定を「効かない側」に
   置いてあるのは、span を計算する JS が動かないまま
   grid-auto-rows: 8px だけが当たると、全カードが 8px の
   1行に潰れて一覧が読めなくなるためである。

   grid-auto-rows: 8px は「積みの解像度」で、各カードは
   自分の高さを賄うだけの行数を span で占める（計算は JS 側）。
   8px は親テーマに実在する間隔の刻みではなく、この積みのための
   目盛りである。細かいほどカード下端の余りが減るが、
   span の値が大きくなる。8px は、余りが最大 7px（本文1行より
   十分小さい）に収まる範囲で選んだ。

   列数のブレークポイントは上の規則をそのまま使う。
   ここで複製すると、列数を直したときに片方だけ古くなる。
   --------------------------------------------------------------- */
.optib-masonry-ready:is(.home, .blog, .archive, .search) :is(.l-grid__main, .col-lg-8) {
  grid-auto-rows: 8px;
  /* 上の規則ですでに start だが、この積み方にとっては必須なので
     打ち消されたときに黙って崩れないよう、ここでも明示する。
     stretch だと、カードが span で確保した行数いっぱいまで
     引き伸ばされ、高さの差が消えてマソンリーにならない。 */
  align-items: start;
}

/* カードの高さを中身なりにする。

   通常のカードグリッドでは height: 100% が「同じ行のカードの
   高さを揃える」役を負っているが、マソンリーでは揃えないことが
   目的である。加えて JS はこの要素の実測値から span を出すので、
   100% のまま測ると「引き伸ばされた後の箱」を測ることになり、
   高さが一度大きく出たらそこから下がらなくなる。 */
.optib-masonry-ready:is(.home, .blog, .archive, .search) :is(.l-grid__main, .col-lg-8) > .p-post--card {
  height: auto;
}