/* features-th08.css — 写真3列キャプション（骨格確定型：CSS のみで調整） */
@charset "UTF-8";

/* ── ① 写真の器を比率で確定する ───────────────────────────────────────────
   受領時は img が height:auto（比率まかせ）だったため、3枚の縦横比の差が
   そのまま列の中身の高さ差になっていた（同梱の3枚ですら 1.429 / 1.429 / 1.833）。
   本番写真は AI 生成・顧客支給で比率が一定にならないので、器の側で吸収する。
   比は 4/3・3/2・16/10・16/9 を4つの素材セット（同梱 / 混在 / 全部縦長 / 全部横長）で
   実測し、cover 残存率の平均が最大（0.703）で同梱素材でも最小 0.818 の 3/2 を採った。 */
._th08_module figure img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  /* common.css の `img｛max-height:800px｝` は「高さが intrinsic な内容画像」向けの上限で、
     器と aspect-ratio で高さが決まる cover の画像には当ててはいけない
     （common.css 自身も `.card-img, .two-col img, …｛max-height:none｝` で戻している）。
     実測では現状 498px までしか出ないので発火しないが、発火条件が
     土台の `.lgx .container｛max-width:1000px｝` に依存している状態を残さない。
     ★数値の上限は置かない。`aspect-ratio` と併用すると広い器で実効比が伸びるため。 */
  max-height: none;
}

/* ── ② 列の中身を上端ぞろえにする ─────────────────────────────────────────
   土台 module-base.css の
   `.lgx .row:has(> .col > figure:only-child) > .col:has(> figure:only-child)
      ｛ display:flex; flex-direction:column; justify-content:center ｝`
   が列を縦中央寄せにするため、キャプションの字数差が【写真の縦位置】に転嫁され、
   3列の写真の上端が最大 273.1px ずれていた。
   このセレクタの詳細度は (0,7,2) で、打ち消しに行くと読み込み順に依存する
   （実測: `._th08_module .row > .col｛justify-content:flex-start｝` (0,3,1) は効かない）。
   単一の flex アイテムである figure を器いっぱいに伸ばして
   justify-content そのものを無効化する。実測で上端ズレ 0px。 */
._th08_module .col > figure {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

/* ── ③ キャプション ───────────────────────────────────────────────────────
   受領時は padding:6%（実測 14.36〜44.81px と幅で5通りに振れる）。
   余白スケールの固定値にし、左右の内寄せをやめて文字の左端を写真の左端にそろえる
   （この部品は面を1つも持たないので、文字だけが内側に入るとズレに見える）。
   土台の `.lgx figure figcaption｛margin-top:.5em｝` (0,1,2) は em が .lgx の 22.4px 基準で
   11.2px という半端な値になるので、詳細度 (0,2,2) で 0 にして余白を padding に一本化する。 */
._th08_module .col figure figcaption {
  margin-top: 0;
  /* ★fallback は「本番サイトの common.css にトークンの定義が無い」場合の保険。
     module-base.css の SM-FIX コメントが「--color-heading-ink / --color-surface は
     生成サイトの common.css に定義が無く、参照した宣言が黙って無効になっていた」と
     明記しており、手元の _shared と本番の common.css は同一ではない。
     fallback 無しだと padding が 0 に落ち、文字が写真に接触する。 */
  padding: var(--space-sm, 24px) 0 0;
}

/* 見出し。土台 `.lgx｛font-size:1.4em｝` のせいで受領時は本文 22.4px > 見出し 18px と
   階層が逆転していた。
   ★トークンは --fs-mod-title(clamp 20〜27px) ではなく --fs-h3(1.2rem=19.2px) を当てる。
     この h3 は figure の中に入る【カード見出し】で、列幅は土台の
     `.lgx .container｛max-width:1000px｝` により PC で常に 320px 固定。
     27px だと README 自身が上限とする全角14字（27×14＝378px > 320px）が必ず2行に折れ、
     しかも折れ位置が3列でばらばらになる（実測: 受領時 [1,1,1] 行 → 27px では [2,2,2] 行）。
     19.2px なら受領時と【行数が全幅で完全一致】し、本文 16px との階層も保てる
     （実測: 字数ばらつき時のキャプション下端ズレ 受領時 132.7px → 27px 案 143.8px → 19.2px 案 133.7px）。
     ＝ anti-patterns「全幅ヒーロー前提の字数→サイズ換算を、列に入る見出しにそのまま当てる」。
   フォントは明示する。★ただし h3 に効くのは保険で、実際に効果があるのは本文 p のほう
     （common.css の見出しセレクタ〈h1〜h4〉が `font-family: var(--font-heading)` を
      既に当てているため。`.lgx｛font-family:Arial…｝` に遮断されているのは p のほうだけ）。
   ※コメント内に `セレクタ,セレクタ｛…｝` の形を書くと triage の R10 が死にセレクタとして拾う。
     波括弧は全角にし、セレクタの列挙にカンマを使わないこと。 */
._th08_module figcaption h3 {
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: var(--fs-h3, 1.2rem);
  padding-bottom: 16px;
  margin-bottom: 16px;
  position: relative;
}

/* この部品唯一のアクセント。20px で止まる短いヘアライン（受領時の材料のまま）。
   ★地を2層にする。`_shared/common.css` は --radius / --shadow / --color-footer-bg を
   【空の値】で出荷しており（`--radius: ;`）、空の値は「無効」ではなく「中身の無い正しい値」なので
   `var(--x, fallback)` の fallback が発動しない。`background: ;` は IACVT で transparent になり、
   この部品では【唯一のアクセントが1本残らず消える】（実測で確認済み）。
   床に currentColor（＝見出しの文字色。common.css が地に対し読める色を保証している）を敷き、
   その上にトークン色のベタを background-image で重ねる。トークンが正常なら見た目は完全に同じで、
   空で届いたときだけ床の色で線が残る。 */
._th08_module figcaption h3:before {
  content: "";
  display: block;
  background-color: currentColor;
  background-image: linear-gradient(var(--color-text-muted), var(--color-text-muted));
  width: 20px;
  height: 1px;
  position: absolute;
  bottom: 0;
  left: 0;
}

/* 土台 `.lgx h3:after` の全幅2px下線を止める（受領時どおり）。 */
._th08_module figcaption h3:after {
  display: none;
}

/* 本文。土台の `.lgx .col p｛line-height:1.8｝` (0,2,1) と
   `.lgx p｛margin:.5em 0 1em｝` (0,1,1) に勝つため (0,2,2) で書く。 */
._th08_module .col figcaption p {
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-body, 1rem);
  line-height: var(--lh-body, 1.7);
}

/* ── ④ 縦積み時のカード間の余白 ───────────────────────────────────────────
   受領時は土台の `.lgx .col:not(:last-child)｛margin-bottom:3%｝` だけで、
   375px では 10.65px しかない。キャプションの上余白（24px）より狭いので、
   本文が「次の写真の見出し」に見える（近接のグルーピングが逆転する）。
   カード間を --space-lg にして、カード内（24px）の2倍に開く。
   ★BP が 767.98px なのは、土台が `min-width: 768px` で3列へ切り替わるため。
     規約の `max-width: 768px` にすると 768px ちょうどで3列レイアウトにも当たり、
     1列目と2列目の下にだけ 48px の非対称な余白が出る。 */
@media (max-width: 767.98px) {
  ._th08_module .row > .col:not(:last-child) {
    margin-bottom: var(--space-lg, 48px);
  }
}