/*
 * 記事系ページの2カラム(コンテンツ + サイドバー)とサイドバーの中身。
 *
 * 対象は記事詳細(子テーマ single.php)と一覧系(子テーマ page-information.php /
 * category.php)。この2つは同じ2カラムで、幅の比率・溝・折返し点・カードの寸法を
 * すべて共有する。そのためカラムの定義は .bal-cols / .bal-cols__main / .bal-side の
 * 1組だけを持ち、ページごとの分岐を作らない。
 *
 * カラム構成: コンテンツ 1000px + 溝 40px + サイドバー 250px。
 * サイドバーはコンテンツの「外側」に足す。記事詳細では見出し・本文・記事下CTA・
 * 戻るボタンがすべて .bal-cols__main に入っているので、本文と記事下の幅は常に
 * 一致し、サイドバーが本文幅を削ることもない。
 * コンテンツは親テーマの本文幅(1000px)を上限にし、画面が足りないときだけ縮む。
 *
 * 一覧系は親テーマ information.css の .news_wrap / .news_outer / .news_outer_side を
 * マークアップに残す(記事カードの段組みがそれらを前提にしているため)。
 * 幅の指定だけをここで打ち消し、記事詳細と同じ寸法に揃える。
 * 一方 information.css そのものは記事詳細では読み込まない。
 * `h2 { margin-bottom: 22.5vw }` などモバイルで記事本文を壊す指定を含むため。
 *
 * 親テーマ CSS は子テーマ CSS より後に読み込まれる(実測: article-cta →
 * article-sidebar → information / single の順)。そのため打ち消しは読み込み順に
 * 頼らず、必ず親より高い詳細度のクラス指定で効かせる。
 */

/* ==========================================================================
   2カラム
   ========================================================================== */

.bal-cols {
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    gap: 40px;
    /* コンテンツ1000 + 溝40 + サイドバー250 + 左右余白40 */
    max-width: 1330px;
    margin: 0 auto;
    padding: 0 20px;
}

.bal-cols *,
.bal-cols *::before,
.bal-cols *::after {
    box-sizing: border-box;
}

.bal-cols__main {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 1000px;
}

.bal-side {
    flex: 0 0 250px;
}

/* 一覧系: 親テーマの幅(.news_outer 70% / .news_outer_side 25%)を打ち消し、
 * 記事詳細と同じ 1000px + 40px + 250px に揃える。 */
.news_wrap.bal-cols {
    max-width: 1330px;
    padding: 0 20px;
}

.news_outer.bal-cols__main {
    width: auto;
}

.news_outer_side.bal-side {
    width: auto;
}

/* 一覧の記事カードのサムネイル。全カードで同じ高さに揃え、はみ出す下部を切る。
 *
 * 親テーマは .news_thumbnail に height:120px + overflow:hidden を指定し、
 * 中の img には width:100% だけを与えている。切り抜きのつもりの指定だが、
 * reset.css の `img { max-block-size: 100% }` が効いて画像の高さが箱の120pxに
 * 押し込められるため、実際には切り抜かれず縦につぶれる
 * (実測 1440px: 元 300x200 の画像が 310x120 = 比率 1.5 → 2.58)。
 * カラムを700→1000pxに広げてカードが1枚217→310pxになった分、歪みも大きくなった。
 *
 * 箱の縦横比は、アイキャッチ73点の実測でいちばん低い 300x144 に合わせる
 * (内訳: 300x144 が18点 / 300x157 が20点 / 300x169 が25点 / 300x171 が4点 /
 *  300x200 が3点 / 300x212 が2点 / 300x223 が1点)。
 * いちばん低いものを基準にすれば、どの画像も箱より高い＝必ず下が切れるだけで、
 * 上下に余白が出るカードは生まれない。高さを px ではなく縦横比で持つので、
 * カラム幅が変わっても全カードの高さは揃ったままになる。
 *
 * img は object-fit:cover で縦横比を保ったまま箱を埋め、object-position:top で
 * 上端を基準にする。サムネは記事名を上寄せで入れた作成物が多く、
 * 切るなら下からでないと文字が欠けるため。
 *
 * カテゴリーページ(category.php)は .news_thumb という別のクラスで、
 * 親テーマに定義が無く元寸(300px)のまま出ていた。同じ扱いに揃える。 */
.news_wrap.bal-cols .news_thumbnail,
.news_wrap.bal-cols .news_thumb {
    aspect-ratio: 300 / 144;
    height: auto;
    overflow: hidden;
}

.news_wrap.bal-cols .news_thumbnail img,
.news_wrap.bal-cols .news_thumb img {
    display: block;
    width: 100%;
    height: 100%;
    max-block-size: none;
    object-fit: cover;
    object-position: top;
}

/* 記事カードの段組みは親テーマの定義を使うが、幅の縛りは外してカラムに従わせる。
 *   padding-right:20px … 溝(40px)と二重になる
 *   max-width:860px   … トップページの新着欄と共用の上限。1000pxのカラムに対して
 *                       140px の余りが出て、サイドバーと右端が揃わなくなる
 * これでコンテンツの実寸が記事詳細と同じちょうど1000pxになる。 */
.news_wrap.bal-cols .bal-cols__main .news_inner {
    max-width: 100%;
    padding-right: 0;
}

/* ==========================================================================
   記事詳細のコンテンツ
   ========================================================================== */

/* 親テーマの .single_content / .single_box は自前で中央寄せする。
 * カラムに入れた以上、幅と中央はカラム側に従わせる。 */
.bal-cols__main .single_content {
    max-width: 100%;
}

/* 親テーマは .single_box に width:max-content を指定している。記事名が長いと
 * 折り返さずに1行のまま伸び、記事カラムを越えてサイドバーに重なる。
 * 上限をカラム幅にして、越える分だけ折り返させる。max-content は残すので、
 * 収まる長さの記事名では従来どおり見出しの幅に箱が縮み、日付・カテゴリは
 * 見出しの左端に揃ったままになる。 */
.bal-cols__main .single_box {
    max-width: 100%;
}

/* 折る位置は inc/article-title.php が構造上の切れ目に <br> を入れて決める。
 * 区切り記号を持たない記事名(実測 83件中8件)はブラウザ任せの折返しになるので、
 * 対応ブラウザでは文節で折らせる。未対応(Firefox)では現状のままで悪化しない。
 *
 * 1行が11字ほどしか入らないモバイル(親テーマの見出しは 7.5vw)では使わない。
 * 文節を守る代わりに「〜令和」のような2字だけの行ができて、かえって荒れる。 */
@media screen and (min-width: 1001px) {
    .bal-cols__main .single_box h1 {
        word-break: auto-phrase;
    }
}

/* ==========================================================================
   サイドバーの追従
   ========================================================================== */

/* 記事詳細は縦に非常に長い(本文だけで3,800px超)。上端に置いたままだと
 * スクロールの大半でサイドバーが空白になるので中身を追従させる。
 * 一覧系も同じ規則にする(ページが短ければ動かないだけで、見え方は変わらない)。
 *
 * サイドバー内にスクロールバーは出さない。追従中に下端へ到達できなくなるのを
 * 内側スクロールで逃げると、細いスクロールバーが常時見えて見苦しい。
 * 代わりに (1) 中身を約760pxに収める(カテゴリーを札組み・記事名を2行に)
 *        (2) それでも収まらない縦に狭い画面では追従自体をやめる
 * の2段で対処する。下の @media (min-height) が (2)。
 * 追従をやめた場合はページと一緒に流れるだけなので、中身は必ず全部見える。
 *
 * 貼り付く位置は画面最上部ではなく、常時表示のユーティリティバー
 * (#bal-utility-bar / position:fixed;top:0;高さ --bal-bar-h)の下。記事詳細では
 * 親テーマの single.css が header を position:relative に戻すので、上に居座る
 * 固定要素はこのバーだけになる。バーを読み込まないページ(非公開ローンチ中の
 * 既存ページ)では変数が無いので、フォールバックの 0px で従来どおり上端に貼る。 */
.bal-side__inner {
    position: static;
}

/* 記事詳細のサイドバー(実測758px) + 貼り付き位置(バー40 + 24) + 下の余白24px = 846px。
 * これが収まる高さの画面でだけ追従させる。 */
@media screen and (min-height: 850px) {
    .bal-side__inner {
        position: sticky;
        top: calc(var(--bal-bar-h, 0px) + 24px);
    }
}

/* ==========================================================================
   サイドバー内のカード
   記事下CTAと同じカード部品(.bal-acta__cards-*)を、1列・サムネ左に詰めて使う。
   サイドバー専用のカード様式は作らない。
   ========================================================================== */

.bal-side .bal-acta--cards {
    margin: 0 0 26px;
}

.bal-side .bal-acta--cards:last-child {
    margin-bottom: 0;
}

/* 250px幅では見出しと「一覧へ」が1行に収まらないので折り返させる */
.bal-side .bal-acta__cards-heading {
    flex-wrap: wrap;
    gap: 2px 10px;
    font-size: 14px;
}

.bal-side .bal-acta__cards-all {
    font-size: 11.5px;
}

.bal-side .bal-acta__cards-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding-top: 6px;
}

.bal-side .bal-acta__cards-item {
    border-bottom: 1px solid #eef0f4;
}

.bal-side .bal-acta__cards-item a {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 0;
}

.bal-side .bal-acta__card-thumb {
    flex: 0 0 84px;
    width: 84px;
    margin-bottom: 0;
}

.bal-side .bal-acta__rank {
    width: 20px;
    height: 20px;
    font-size: 10.5px;
}

.bal-side .bal-acta__card-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.bal-side .bal-acta__card-cat {
    margin-bottom: 2px;
    font-size: 10px;
}

/* 3行まで許すと1件78pxになり、サイドバー全体が画面高を超えて
 * 追従できなくなる。2行に詰めて全体を758pxに収める。 */
.bal-side .bal-acta__card-name {
    -webkit-line-clamp: 2;
    font-size: 12.5px;
    line-height: 1.5;
}

/* ==========================================================================
   サイドバーのカテゴリー
   記事見出し下のカテゴリ札(.news_box_mini span)と同じ「札」の形で横に流す。
   縦1列だと10件で約440pxになり、サイドバーが画面高を超えるため。
   ========================================================================== */

.bal-side__cat-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.bal-side__cat-item {
    margin: 0;
    padding: 0;
    list-style: none;
}

.bal-side__cat-item::before {
    content: none;
}

.bal-side__cat-item a {
    display: block;
    padding: 5px 11px;
    background: #f3f5fb;
    border-radius: 999px;
    color: #162a70;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.5;
    text-decoration: none;
    white-space: nowrap;
}

.bal-side__cat-item a:hover {
    background: #162a70;
    color: #ffffff;
}

/* ==========================================================================
   1カラムへの折返し
   サイト全体の折返し点は1000pxだが、この2カラムだけ1180pxで折り返す。
   2カラムのままだとコンテンツが 画面幅 - 330px まで縮み、1000px付近では
   記事下の横並びバナー2枚が1枚330px程度になって画像内の文字が読めなくなるため。
   1180pxで折り返せば2カラム時のコンテンツは850px以上を保てる。

   サイドバーはマークアップ上すでにコンテンツの後ろにあるので、
   縦積みでは自然に 本文 → CTA → サイドバー の順になる(order 指定は不要)。
   ========================================================================== */

@media screen and (max-width: 1180px) {
    .bal-cols {
        flex-direction: column;
        gap: 0;
        /* 1カラムでもコンテンツ幅は親テーマの本文幅(1000px)に揃える。
         * 画面幅いっぱいに広げると1000〜1180pxで左右の余白が消えるため。 */
        max-width: 1000px;
        padding: 0;
    }

    .bal-cols__main {
        max-width: 100%;
    }

    .bal-side {
        flex: none;
        width: 100%;
        margin-top: 48px;
    }

    /* 1カラムでは追従させない(縦に狭い画面の @media より後に置いて打ち消す) */
    .bal-side__inner {
        position: static;
    }

    .bal-side .bal-acta__card-thumb {
        flex: 0 0 110px;
        width: 110px;
    }

    .bal-side .bal-acta__card-name {
        -webkit-line-clamp: 2;
        font-size: 13.5px;
    }

    /* 一覧系: 親テーマの幅指定を打ち消す(1000px以下では .news_outer_side が
     * width:80%・margin:0 auto になるため、詳細度で上回る指定が要る)。 */
    .news_wrap.bal-cols {
        max-width: 1000px;
        padding: 0;
    }

    .news_outer.bal-cols__main {
        width: 100%;
    }

    .news_outer_side.bal-side {
        width: 100%;
        margin-top: 48px;
    }
}

/* サイト全体の折返し点。ここから下は親テーマの main が width:85% になるので、
 * コンテンツはその中で全幅にする。 */
@media screen and (max-width: 1000px) {
    .bal-cols {
        max-width: 100%;
    }

    /* 一覧系: 親テーマは記事詳細だけ main を width:85% に絞り(single.css)、
     * 一覧では main は全幅のまま .news_inner を 80vw にしている。
     * 縦積みの余白が2種類あることになるので、一覧側のカラムを記事詳細と同じ
     * 85%中央寄せに揃える。記事カードの段組みはカラム幅いっぱいに広げる。 */
    .news_wrap.bal-cols {
        width: 85%;
        max-width: 100%;
        margin: 0 auto;
    }

    .news_wrap.bal-cols .bal-cols__main .news_inner {
        width: 100%;
    }
}