/**
 * 共有レイアウト: サムネイル付きリスト
 *
 * 参照デザイン（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;
  }
}