/*
 * mobile-fv.css — TB/SP FV イラスト合成のカバー表示専用CSS
 *
 * WHY: investalk.jp の TB/SP FV は、横長イラスト(837×512)を縦長フレームに object-fit:cover
 *      でクロップ表示し、人物2人がイラスト下端を越えてベージュ帯へ足を出している。
 *      この「coverクロップ＋縦はみ出し」は flavor の size/overflow 拡張（aspect-ratio /
 *      固定高 / object-fit を持たない）では表現できないため、この最小CSSでのみ補う。
 *      ユーザー承認済み（cover化はブロック属性では不可）。
 *
 * SCOPE: ≤959px（Tablet/Mobile）のみ。PC(960+)は一切変更しない。
 *        セレクタは tree.js で box に付与する className `.fv-illo-cover` に限定。
 *
 * 設計差（design準拠）:
 *   - Mobile(≤599): イラストをビューポート全幅へ full-bleed・高さ360px・人物は左右端へ展開。
 *   - Tablet(600-959): 20px余白を残し（full-bleedしない）・aspect-ratio 560/512 でほぼ原寸高・
 *     人物は中央に寄せた2人組（PC寄り構図。overlay側は tree.js の Tablet 値で配置）。
 */

@media (max-width: 959px) {
  /* 親box: 人物の足を下のベージュ帯へ出すため縦クリップを解除。
     specificity (0,3,0): flavor が data-ub-id 属性セレクタ(0,2,0)＋inline<style>で width:100% を
     後出しするため、クラス3つで上回る（data-ub-id はビルド毎に変わるので狙えない）。 */
  .has-device-hide-pc .fv-illo-cover.wp-block-flavor-universal-block {
    overflow: visible;
  }

  /* メインイラストを縦長フレームに cover クロップ。
     figure(.wp-block-image) と内側 img の両方に object-fit を当てる。 */
  .fv-illo-cover > .wp-block-image,
  .fv-illo-cover > figure.wp-block-image {
    width: 100%;
    margin: 0;
    overflow: hidden;          /* イラスト自体の左右クロップはここで閉じる */
  }
  .fv-illo-cover > .wp-block-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom; /* 下端(ビル群＋人物の立つ地面)を残す */
    display: block;
  }
}

/* ── Mobile(≤599): full-bleed + 固定高360px ───────────────────────── */
@media (max-width: 599px) {
  .has-device-hide-pc .fv-illo-cover.wp-block-flavor-universal-block {
    /* イラストを左右コンテンツ余白(20px)の外＝ビューポート全幅へ full-bleed。 */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
  .fv-illo-cover > .wp-block-image,
  .fv-illo-cover > figure.wp-block-image {
    height: 360px;
  }
}

/* ── Tablet(600-959): 余白維持・aspect-ratioでほぼ原寸高のcover ─────── */
@media (min-width: 600px) and (max-width: 959px) {
  /* full-bleed しない（width:100% のまま）= design@600 同様 20px 余白を残す。 */
  .fv-illo-cover > .wp-block-image,
  .fv-illo-cover > figure.wp-block-image {
    aspect-ratio: 560 / 512;   /* design@600 フレーム比。横クロップ・縦はほぼ原寸 */
    height: auto;
  }
}