/**
 * 共有レイアウト: サムネイル付きリスト
 *
 * 参照デザイン（with-planning.co.jp/blog）に寄せた記事一覧の体裁。
 * サムネイルを左に回り込ませ、日付・カテゴリ・著者のメタをタイトルの前に置き、
 * 「続きを読む」をホバーで右から出す。
 *
 * このディレクトリには同名のテンプレートパーツも入っている
 * （template-parts/post/content-excerpt.php）。
 * メタの並べ替えと --date / --cat / --author のモディファイアは
 * CSS だけでは作れないため。
 *
 * 読まれるのは、外観設定のレイアウトが「リスト」のときである
 * （inc/appearance.php の OPTIB_CHILD_LAYOUT_PARTS が list => layouts/thumb-list）。
 * 読み込み順は palettes/ → layouts/ → skins/ で、色は合わせ目
 * skins/thumb-list-light / skins/thumb-list-dark が後から書く。
 *
 * ---------------------------------------------------------------
 * 配色は持たない。
 *
 * ここに置いたのは「どこに何があるか」を決める指定だけである
 * （display / position / float / 余白 / 寸法 / 文字サイズ / 角丸 /
 *  重ね順 / トランジション）。
 * background / color / border-color を伴う指定は、どの配色でも成立する
 * とは限らないので、合わせ目（presets/_shared/skins/thumb-list-light /
 * skins/thumb-list-dark）に残してある。
 *
 * border の一括指定（border: solid 1px 〈色〉）は分割していない。
 * 幅と線種だけをここに書くと、色を書かなかった側で border-color が
 * currentColor に落ち、この共有部品が配色を決めてしまうためである。
 * 角丸（border-radius）は色を含まないので、ここに置いてある。
 * ---------------------------------------------------------------
 *
 * 一覧の main のクラスは画面で違うが（l-grid__main / col-lg-8）、
 * このレイアウトは幅とグリッドに触れないため、
 * card-grid のような :is() での画面限定は要らない。
 * 起点はすべて .p-post 系・.page-title・.taxonomy-description・
 * .nav-links / .page-numbers のいずれかである（.l-grid__* は起点にしない）。
 * ウィジェットが空のときの1カラム化は、このレイアウトの持ち物ではなく
 * 子テーマ直下の style.css にある。
 */

/* (1) 記事1件コンテナ */
.optib-layouts-thumb-list .p-post--list {
  display: block;
  position: relative;
  overflow: hidden;
  gap: 0;
  margin-bottom: 0;
  padding: 16px;
  font-size: 13px;
}

/* (3) サムネイル */
.optib-layouts-thumb-list .p-post--list .p-post__thumbnail {
  float: left;
  margin: 0 1.6% 0 0;
  width: 37.377%;
  border-radius: 0;
}

.optib-layouts-thumb-list .p-post--list .p-post__thumbnail img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: fill;
}

/* (4) 本文ブロックとタイトル。サムネがある記事だけ左に寄せる */
.optib-layouts-thumb-list .p-post--list .p-post__body {
  display: block;
}

.optib-layouts-thumb-list .p-post--list.has-post-thumbnail .p-post__body {
  margin-left: 37.377%;
}

.optib-layouts-thumb-list .p-post--list .p-post__title {
  margin: 0 0 8px;
  font-size: 16px;
}

/* (5) 日付バッジ */
.optib-layouts-thumb-list .p-post--list .p-post__meta-item--date {
  display: inline-block;
  padding: 2px 8px;
  vertical-align: middle;
  text-align: center;
}

/* (6) カテゴリチップ。the_category() がリンクを出すので a に当てる */
.optib-layouts-thumb-list .p-post--list .p-post__meta-item--cat a {
  display: inline-block;
  margin-bottom: 4px;
  padding: 2px 8px;
  border: 0;
  border-radius: 2px;
  text-align: center;
}

/* (7) 著者 */
.optib-layouts-thumb-list .p-post--list .p-post__meta-item--author i {
  margin-right: .3em;
}

/* 著者名は the_author_posts_link() の a。親の点線下線を解く */
.optib-layouts-thumb-list .p-post--list .p-post__meta-item--author a {
  border-bottom: 0;
}

/* (8) メタ
 *
 * display: flow-root は overflow: hidden の置き換えである。
 * どちらも .p-post__meta-item の float を含める（BFC を作る）目的だが、
 * overflow: hidden はそれと引き換えに子孫のはみ出しを切り落とす。
 * カテゴリ / 著者リンクのフォーカスリング
 * （親テーマ foundation/_base.css の :where(a:focus) と :where(:focus-visible)、
 *  component/_c-btn.css の .c-btn:focus。いずれも outline: 2px solid + outline-offset: 2px
 *  なのでボーダーボックスの外側4pxに描かれる）は、
 * チップ上端が .p-post__meta のコンテンツボックス上端と面一のため上辺が切れていた。
 * position: relative で重ね順を上げても、祖先の overflow クリップからは逃れられない。
 * flow-root なら float は含めたまま、クリップだけが無くなる。
 * リングのはみ出し先である .p-post__body に overflow 指定は無く
 * （親テーマ project/_p-post.css:150 は display/flex-direction/justify-content のみ）、
 * その外の (1) .p-post--list の overflow: hidden までは padding 16px の余裕がある。 */
.optib-layouts-thumb-list .p-post--list .p-post__meta {
  display: flow-root;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
}

.optib-layouts-thumb-list .p-post--list .p-post__meta-item {
  display: inline-block;
  float: left;
  margin: 0 8px 8px 0;
  list-style-type: none;
}

/* (9) 抜粋
 *
 * margin-bottom は (15) が通常フローから抜いたボタンの居場所でもある。
 * 減らすと、ホバーで出るボタンが抜粋に重なる。 */
.optib-layouts-thumb-list .p-post--list .p-post__excerpt {
  display: block;
  margin-bottom: 32px;
}

/* (10) 続きを読む（箱の寸法だけ。線と地の色は合わせ目 skins/thumb-list-<配色>） */
.optib-layouts-thumb-list .p-post--list .c-btn--outline-primary {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 2px;
  font-size: 12px;
  font-weight: normal;
  line-height: 1.4;
  text-align: center;
}

/* (11) 大見出しとアーカイブ説明 */
.optib-layouts-thumb-list main .page-title {
  font-size: 24px;
  line-height: 54px;
}

.optib-layouts-thumb-list main .taxonomy-description {
  padding: 0 16px;
  font-size: 14px;
}

/* (14) 記事ブロック全体をクリック可能にする（stretched link）
 *
 * マークアップは変えられないので、リンクの入れ子は作らない。
 * .p-post__title a の ::after をブロック全体へ広げ、これを当たり判定にする。
 * 当たり判定が増えるだけで、SR / キーボードのタブ順は元のまま。
 *
 * 土台の position: relative は (1) に既にある。ここでは重ねない。
 * (1) の overflow: hidden は inset: 0 の擬似要素を切り落とさない。
 *
 * 親テーマ側は .p-post 系に z-index を一切持たない
 * （optib/assets/css/src/flocss/object/project/_p-post.css）。
 * 親が position を持つのは .p-post__thumbnail の relative だけで z-index は auto。
 * よって 0 / 1 の二段で足りる。
 *
 * 受け入れ済みの副作用: 抜粋テキストのドラッグ選択ができなくなる。
 * ::after が .p-post__excerpt の上を覆うため、ドラッグは選択ではなく
 * 当たり判定に吸われる。一覧の抜粋をコピーする用途は無いと判断して受け入れている。
 * 見落としではない。抜粋を選択可能に戻したくなったら、この方式ごと見直すこと
 * （::after の範囲を狭めると「ブロック全体が押せる」が成立しなくなる）。
 *
 * 対応ブラウザについて: このリポジトリにも親テーマにも browserslist / .browserslistrc /
 * postcss・vite の targets 指定は存在せず、対応範囲はどこにも宣言されていない（確認済み）。
 * よって「宣言された下限を満たすか」では判断できないため、
 * 親テーマが既に無前置きで使っている機能と同じ水準を下限とみなす。
 * 親テーマは :where() と :focus-visible を素で使い（foundation/_base.css:43,60,66）、
 * さらに inset と :has() も既にフォールバック無しで使っている。
 *   - inset: object/project/_p-social-cta.css:64（#social-cta .p-social-cta__message）
 *   - :has(): assets/css/src/tailwind.css:200、assets/css/manga-generator.css:83
 * つまり inset も :has() もこの製品の実効下限を押し上げない。
 * 子テーマ側では初出なので、初出であることだけをここに記録しておく。
 * inset は top/right/bottom/left へ展開しても意味は同じなので、
 * 将来下限を下げる必要が出たら、そのとき機械的に展開すればよい。
 * 非対応ブラウザでの壊れ方は下の各所に書く。
 */
.optib-layouts-thumb-list .p-post--list .p-post__title a::after {
  position: absolute;
  z-index: 0;
  inset: 0;
  content: "";
}

/* 個別に押せるリンクは当たり判定の上に出す。
 * サムネイルの a は同梱のテンプレートパーツが tabindex="-1" aria-hidden="true" を付けており、
 * 支援技術からは元々隠れている。マウスでの挙動を変えないために上へ出すだけ。
 *
 * .p-post__excerpt a も同じ扱いにする。自動生成の抜粋ではタグが落ちるので出ないが、
 * 投稿の post_excerpt に手書きで <a> を書いた場合に実在する。上へ出さないと
 * Tab では到達して Enter で正しく飛ぶのに、クリックだけ記事本体へ吸われ、
 * キーボードとマウスで挙動が割れる。 */
.optib-layouts-thumb-list .p-post--list .p-post__thumbnail a,
.optib-layouts-thumb-list .p-post--list .p-post__excerpt a,
.optib-layouts-thumb-list .p-post--list .p-post__meta-item--cat a,
.optib-layouts-thumb-list .p-post--list .p-post__meta-item--author a,
.optib-layouts-thumb-list .p-post--list .p-post__more {
  position: relative;
  z-index: 1;
}

/* stacking context をカード内に閉じる。
 * 上の z-index: 0 / 1 が一覧の外（サイドバーの重なり、将来の固定ヘッダなど）へ
 * 漏れて順序に加わらないようにする。isolation は position を要求しないが、
 * 土台の position: relative は (1) に既にある。 */
.optib-layouts-thumb-list .p-post--list {
  isolation: isolate;
}

/* (15) 「続きを読む」をホバーで出す
 *
 * 参照デザイン（with-planning.co.jp）と同じ方式を採る。
 * 向こうの実装は .archive-style .read-more span に対する
 *   position:absolute; right:-100px; bottom:8px; display:none; transition:all .3s;
 * ＋ 記事ブロック側の overflow:hidden; position:relative;
 * ＋ .type-post:hover .read-more span { right:0 }
 * ＋ @media (min-width:480px) { .read-more span { display:block } }
 * の4点である。
 *
 * こちらのマークアップには <p class="read-more"><a><span> の入れ子が無く、
 * ボタンは <a class="c-btn c-btn--outline-primary p-post__more"> の1枚だけなので、
 * 向こうの span に当てていた指定をこの <a> に直接当てて同じ見え方にする。
 * 土台の position: relative と overflow: hidden は (1) に既にあり、ここでは重ねない。
 *
 * 隠し方は「消す」ではなく「コンテナ外へ逃がして (1) の overflow: hidden で切る」。
 * transition できる right を動かすので、出入りがスライドになる（display では動かせない）。
 *
 * 高さの扱い: absolute にすることでボタンは通常フローから抜ける。
 * 抜けた分は (9) の .p-post__excerpt { margin-bottom: 32px } と
 * (1) の padding: 16px が作る下端 48px の帯が受け持つ。
 * ボタンは bottom: 8px・高さおよそ22px なので、この帯の中に完全に収まり、
 * 抜粋テキストへは重ならない。
 * カード高さはボタン1個分だけ一度縮むが、これは静的な変化であって、
 * ホバー中に動くのは right だけなのでリフローは起きない＝他の行はガタつかない。
 *
 * (14) の stretched link との関係:
 * (14) は .p-post__more に position: relative; z-index: 1 を与えて
 * .p-post__title a::after（z-index: 0）の上に出している。
 * ここで position だけを absolute に上書きする（セレクタは (14) と同一詳細度で後方＝後勝ち）。
 * z-index: 1 は (14) のまま残るので積み重ね順は変わらず、
 * ボタンは当たり判定の上に居続ける。遷移先も ::after と同じ記事URLである。
 * right: -100px の位置では overflow: hidden に切り取られており、
 * 切り取られた領域はヒットテストの対象にならないので、
 * 「見えないボタンを踏む」も起きない。
 * 積み重ね文脈は (14) の isolation: isolate でカード内に閉じたままである。
 *
 * キーボード: 参照サイトはホバーしか持たないが、それをそのまま写すと
 * Tab でボタンにフォーカスしたとき、フォーカス先が画面外のままになる。
 * フォーカス時も右へ出す。着地点を right: 6px にしてあるのは、
 * 親テーマのフォーカスリングが outline 2px + offset 2px＝外側4px あり
 * （optib/assets/css/src/flocss/foundation/_base.css:60-63）、
 * right: 0 だとリングの右側が (1) の overflow: hidden に切られるためである。
 * ただし right: 4px はリング外縁がクリップ矩形とちょうど面一で余裕0になり、
 * 非整数ズームやサブピクセル丸めで最外周が欠けうるので、2px 足して 6px にした。
 * ホバー時は right: 0（参照どおり）、フォーカス時だけ 6px 内側に止める。
 * ホバーとフォーカスが同時に成立したときは後方のこの規則が勝って 6px 側に止まるが、
 * リングが出ている以上リングを切らない位置に居るべきなので、これが正しい。
 *
 * ボタン側は :focus-visible ではなく :focus で受ける。
 * 参照サイトでオフキャンバスへ出るのはフォーカスを持てない <span> だが、
 * こちらはフォーカス可能な <a> 自身が出ているので、
 * :focus-visible が立たない種類のフォーカス（script の element.focus() など）でも
 * 画面外に取り残させないためである。
 * タイトルリンク側（:has(.p-post__title a:focus-visible)）は
 * オフキャンバスに居ないのでこの経路に該当せず、:focus-visible のままにしてある。
 *
 * 480px 未満: 参照サイトに合わせて display: none のまま出さない。
 * ホバーの無い端末で永久に出ない状態を避けるための割り切りで、
 * 記事へは (14) の stretched link とタイトルリンクから行ける。
 * display: none なのでタブ順からも外れ、「見えないフォーカス先」は生じない。
 *
 * 同じ理由で、表示側のメディアクエリには (hover: hover) を足してある。
 * これが無いと 480px 以上のホバーを持たない端末（タブレット等）で
 * ボタンが一度も可視にならないままタブ順に残り、外部キーボードの Tab が
 * 画面外の要素に着地する。参照サイトに (hover: hover) は0件だが、
 * 向こうの <span> が構造として持っていた「フォーカス不可」という性質を、
 * <a> しか無いこちらで再現するための条件であって、見え方は足していない。
 * 参照サイトに prefers-reduced-motion の考慮は0件だったので、ここでも足していない。 */
.optib-layouts-thumb-list .p-post--list .p-post__more {
  display: none;
  position: absolute;
  right: -100px;
  bottom: 8px;
  transition: all 0.3s;
}

@media screen and (min-width: 480px) and (hover: hover) {
  .optib-layouts-thumb-list .p-post--list .p-post__more {
    display: inline-block;
  }

  .optib-layouts-thumb-list .p-post--list:hover .p-post__more {
    right: 0;
  }

  .optib-layouts-thumb-list .p-post--list .p-post__more:focus,
  .optib-layouts-thumb-list .p-post--list:has(.p-post__title a:focus-visible) .p-post__more {
    right: 6px;
  }
}


/* ===========================================================
   ここから下は、移植元の子テーマが style.css 側に置いて
   この部品を上書きしていた 3 ブロックである。

   子テーマ側は部品より先に読み込まれるため、body を前置して
   詳細度で勝たせていた。部品の中へ移した以上、同じファイルの
   後勝ちで足りるので前置は外してある。

   thumb-list の見た目に関する規則を 2 ファイルに分けておく理由が
   無いので、ここに一本化した。
   =========================================================== */
/* ===========================================================
   記事一覧カード（thumb-list）：見出しを大きく、上下の余白を均一に
   -----------------------------------------------------------
   親テーマの thumb-list プリセット
   (presets/_shared/layouts/thumb-list/style.css) は
   - タイトルを 16px 固定
   - サムネイルを float: left、本文を margin-left で右に
     寄せるだけ（.p-post__body は display: block のまま上詰め）
   にしていた。カードの高さは float したサムネイルの高さで決まる
   一方、本文側は中身の高さぶんしか使わないため、本文が短い記事
   ほど下側に余白が偏っていた（本文が長い記事はほぼ埋まる）。

   タイトルは 16px → 20px に拡大。

   余白の均一化は、本文ブロック（.p-post__body）全体を
   align-items: center で中央に寄せる方式を最初に試したが、
   それは失敗だった。.p-post__excerpt の margin-bottom: 32px
   （同プリセット (9) のコメントにある通り、ホバーで出る
   .p-post__more の「居場所」として意図的に確保されたスペース）
   が本文ブロックの高さに含まれてしまい、見えるテキスト
   （meta + title + excerpt）の重心が中心より上にずれ、
   「上が詰まって下だけ余る」という、直した意味が無い見た目に
   なった（実機で確認済み）。

   採ったのは、32px のスペースを中央揃えの計算そのものから
   除外する方式である。
   - .p-post__body を flex-direction: column にする
   - 最初の要素 .p-post__meta に margin-top: auto
   - 最後のテキスト要素 .p-post__excerpt に margin-bottom: auto
     （固定 32px をやめて auto に置き換える）
   - .p-post__body::after で高さ 32px の空ボックスを1つ追加する
     （flex-shrink: 0 で潰れないようにする。ボタン用スペースの
     置き場所を、テキストのマージンから本文末尾の専用の1マスへ
     移すのが目的で、疑似要素はそのための場所でしかない）
   auto マージンは flex の余白を均等に分け合うため、
   meta〜excerpt のかたまりが「本文の高さ − 32px」の中で中央に
   揃い、32px は常に下端に固定される。
   さらに .p-post--list.has-post-thumbnail の align-items は
   center ではなく stretch にする。center のままだと本文の高さが
   中身ぶんに縮み、auto マージンが分け合う余白が生まれない
   （stretch で本文をカード（画像）の高さいっぱいまで伸ばして
   初めて auto マージンが効く）。

   .p-post__more（ホバーで右からスライドインする「続きを読む」）
   は thumb-list (14) で position: relative; z-index: 1 を与え
   られており、絶対配置の基準は記事カード自身（同 (1) の
   position: relative）。本文側を上記のとおり変更しても、
   ボタンの基準・オフセットには触れていないので変化しない
   （実機ホバーで、テキストとボタンが重ならないことを確認済み。
   before: excerpt margin-bottom を単純に 0 にする案も試したが、
   その場合はテキストがボタンの直下まで下がり、ホバー時に
   重なったため不採用にした）。

   float を外すのはサムネイルの並び方向のみで、比率
   （37.377% / 残り + 1.6% の隙間）は元の値をそのまま使う。
   =========================================================== */
.optib-layouts-thumb-list .p-post--list .p-post__title {
  font-size: 20px;
}

.optib-layouts-thumb-list .p-post--list.has-post-thumbnail {
  display: flex;
  align-items: stretch;
}

.optib-layouts-thumb-list .p-post--list.has-post-thumbnail .p-post__thumbnail-wrap {
  flex: 0 0 37.377%;
}

.optib-layouts-thumb-list .p-post--list.has-post-thumbnail .p-post__thumbnail {
  float: none;
  width: 100%;
  margin: 0;
}

.optib-layouts-thumb-list .p-post--list.has-post-thumbnail .p-post__body {
  margin-left: 1.6%;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.optib-layouts-thumb-list .p-post--list.has-post-thumbnail .p-post__meta {
  margin-top: auto;
}

.optib-layouts-thumb-list .p-post--list.has-post-thumbnail .p-post__excerpt {
  margin-bottom: auto;
}

.optib-layouts-thumb-list .p-post--list.has-post-thumbnail .p-post__body::after {
  content: "";
  display: block;
  height: 32px;
  flex-shrink: 0;
}

/* ===========================================================
   記事一覧カード（thumb-list）：サムネイルを 16:9 に統一
   -----------------------------------------------------------
   親テーマは .p-post__thumbnail { aspect-ratio: auto } と
   .p-post__thumbnail img { object-fit: contain; height: auto }
   で、画像そのものの縦横比のまま表示していた。実際にアップロード
   されている画像はほぼ 845x522（比率約 1.62 : 1）で 16:9
   （比率 1.78 : 1）になっていなかった（1件だけ 798x445 で
   別の比率）。記事によって高さがまちまちになるため、
   .p-post__thumbnail に aspect-ratio: 16 / 9 を固定し、
   img は object-fit: cover; height: 100% でその枠を埋める
   （contain のままだと枠の中で余白ができるだけで、比率は揃わない）。

   .p-post__thumbnail は親テーマ側で overflow: hidden 済みなので、
   cover ではみ出す部分は自動でクリップされる。
   =========================================================== */
.optib-layouts-thumb-list .p-post--list .p-post__thumbnail {
  aspect-ratio: 16 / 9;
}

.optib-layouts-thumb-list .p-post--list .p-post__thumbnail img {
  object-fit: cover;
  height: 100%;
}

/* ===========================================================
   記事一覧カード（thumb-list）：スマホ幅では縦積みにする
   -----------------------------------------------------------
   親テーマの thumb-list プリセットは画面幅を問わず横並び
   （サムネイル 37.377% + 本文 残り）で、メディアクエリを
   一切持っていない（実装時に確認済み）。デスクトップでは
   問題ないが、スマホ幅（実測 iframe 375px 相当）では画像が
   小さくつぶれ、タイトル・本文が狭い右カラムに押し込まれて
   読みにくくなる（実機スクリーンショットで指摘を受けて確認）。

   599px 以下では、上に置いた flex 化した本文レイアウトを
   flex-direction: column に切り替え、サムネイルを幅いっぱい、
   本文をその下に縦積みにする。
   - サムネイル側の flex-basis（37.377%）を解除して幅 100% に
   - 本文の margin-left（横並び用の隙間）を margin-top に置き換え
   - 本文末尾の 32px スペーサー（thumb-list (15) のホバー用の
     居場所、このファイル内で .p-post__body::after として追加
     したもの）は、縦積みでは本文の下がそのままカード下端に
     近いため不要。表示を消して、ホバー時の右スライドインで
     ボタンがそのまま出るのに任せる。
   ブレークポイントは 599px。親テーマ唯一の 992px は
   サイドバー有無の切り替えであり、この崩れとは無関係な値
   なので流用しない。600px 前後は一般的なスマホ幅の上限として
   採用した。
   =========================================================== */
@media (max-width: 599px) {
  .optib-layouts-thumb-list .p-post--list.has-post-thumbnail {
    flex-direction: column;
    align-items: stretch;
  }

  .optib-layouts-thumb-list .p-post--list.has-post-thumbnail .p-post__thumbnail-wrap {
    flex: none;
    width: 100%;
  }

  .optib-layouts-thumb-list .p-post--list.has-post-thumbnail .p-post__body {
    margin-left: 0;
    margin-top: 16px;
  }

  .optib-layouts-thumb-list .p-post--list.has-post-thumbnail .p-post__body::after {
    display: none;
  }
}