/**
 * ソリューション詳細（single-solution.php）のブロック間余白補正
 *
 * 静的サンプル（fuji-seiki-static の index-solution.php）では、各メジャーセクション
 * （動画 / 独自技術 / 導入シミュレーション / ラインレイアウト 等）が 1 つの .p-section に
 * まとまり、見出し・本文・グリッド等のサブブロックは .p-section の gap = --space-xl で
 * 配置される。セクション同士は .p-main の gap = --space-6xl で配置される。
 *
 * 一方 WordPress 版はブロックパターンがサブブロックごとに個別の .p-section を出力するため、
 * すべてが .p-main の gap = --space-6xl で並び、本来 --space-xl であるべきセクション内の
 * 余白まで開きすぎてしまう。
 *
 * そこで .p-main の既定 gap をセクション内間隔（--space-xl）に下げ、メジャーセクションの
 * 「開始」ブロックにだけ上マージンを足してセクション間隔（--space-6xl）へ引き上げ、
 * 静的サンプルの 2 段階リズムを復元する。
 */

.single-solution .p-main {
    gap: var(--space-xl);
}

.single-solution .p-main > .p-section:first-child {
    margin-top: 0;
}

/* メジャーセクションの開始ブロック:
 *   - #section_Movie / Technology / Simulation / Layout（scaffold パターンの id）
 *   - h2 下線見出し（.p-section-heading）を持つブロック（使用機種 等）
 *   - 背景つき CTA バナー（[data-theme="fujisei-dark"]）
 *   - 静的テンプレートで .is-solution-section を付与したブロック（一覧に戻る）
 * flex の gap(--space-xl) と合算して --space-6xl になるよう差分を上マージンに足す。 */
.single-solution .p-main > [id^="section_"],
.single-solution .p-main > .p-section:has(> .p-section-heading),
.single-solution .p-main > .p-section:has(> [data-theme="fujisei-dark"]),
.single-solution .p-main > .p-section.is-solution-section {
    margin-top: calc(var(--space-6xl) - var(--space-xl));
}

/* CTA バナー背景画像
 *
 * 静的サンプル（index-solution.php）の CTA バナーは detail_hero.png を背景画像に持つが、
 * cta-banner ブロックパターンは背景色（bg-base-300）のみで画像指定が欠けている。
 * 既存の全ソリューション投稿に同パターンが挿入済みのため、各投稿を編集せず一括で
 * 復元できるよう CSS で背景画像を付与する。url() は本 CSS からの相対パスでドメイン非依存。
 * 対象は .p-main 内のダークテーマブロック（CTA バナー）のみ。ヒーローは .p-main 外のため非対象。 */
.single-solution .p-main .p-section > [data-theme="fujisei-dark"] {
    background-image: url('../images/product/detail/detail_hero.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

/* 動画ブロックの灰色フレーム
 *
 * 静的サンプル（index-solution.php）では動画を
 *   <div class="p-(--space-xl) bg-light-gray-2 rounded-xs"> … </div>
 * の灰色ボックスで囲っているが、video-youtube ブロックパターンはアスペクト比
 * ボックス（padding-bottom:56.25%）のみで、この枠が欠けている。
 * 既存の全ソリューション投稿が同パターンを挿入済みのため、各投稿を編集せず
 * CSS で灰色フレームを再現する。
 *
 * 動画セクションは .p-section 内にアスペクト比ボックス1つだけを持つので、
 * その .p-section 自体を灰色ボックス化する。幅は静的の内側コンテンツ幅
 * （--g-inner-size）に揃え、モバイルでは左右に --space-lg のガターを残す。 */
.single-solution .p-main .p-section:has(> [style*="56.25%"]) {
    box-sizing: border-box;
    width: min(calc(100% - var(--space-lg) * 2), var(--g-inner-size));
    margin-inline: auto;
    padding: var(--space-xl);
    background-color: var(--color-light-gray-2);
    border-radius: var(--radius-xs);
}

/* 独自技術 3カラムカード: 画像とテキストの間の灰色余白を除去
 *
 * technology-cards-3col パターンは grid 内で各カード(.flex-blocks)を
 * align-self:stretch により最も高いカードへ高さ合わせする。カード内の
 * 画像コンテナは flex-1 で余った縦スペースを吸収するため、文章量が少ない
 * カードでは画像(高さは実寸)の下に bg-gray が露出し、画像とテキストの
 * 間に隙間が生じる。
 *
 * 画像コンテナの flex を解除して実寸に固定し、カード間の高さ差はテキスト
 * 下(カード末尾)の余白へ逃がす。これで画像は上端・高さが揃ったまま、
 * 画像とテキストの隙間が消える。バッジ(.text-detail-cassette-badge)を
 * 持つカードのみに限定し、他パターンへは影響させない。 */
.single-solution .grid-inline-blocks > .flex-blocks:has(.text-detail-cassette-badge) > .flex-1:has(> img) {
    flex: none;
}

/* 導入シミュレーションボックス: 左キャッチコピーが長いと右の数値カードが潰れる問題の補正
 *
 * simulation-box パターン（inc/block-patterns.php「導入シミュレーションボックス」）の親グリッドは
 * grid-template-columns: auto 1fr（sm:grid-cols-[auto_1fr]）で、左カラム(auto)がキャッチコピーの
 * 内容幅を先取りするため、文章量が多いと右カラム(1fr = 残り)が極端に狭くなる。
 * 既存の全ソリューション投稿に同パターンが post_content へ挿入済みのため、各投稿を編集せず
 * CSS で列指定を反転して一括補正する（block-patterns.php 側のクラスは変更不要）。
 *
 * 1fr auto へ変更し、右の数値カードを内容幅(auto)で常に確保、左キャッチコピーを可変(1fr)にして
 * 余白を使って折り返させる。640px 未満は grid-cols-1（縦積み）のため、sm ブレークポイント(640px)
 * 以上に限定して上書きする（無条件にするとモバイルの縦積みまで壊れる）。 */
@media (min-width: 640px) {
    .single-solution .grid-inline-blocks.sm\:grid-cols-\[auto_1fr\] {
        grid-template-columns: 1fr auto;
    }
}

/* 導入シミュレーションボックス: 「作業者人数 / Number of Workers」ラベルの左右余白
 *
 * simulation-box パターンの数値カード上ラベル（.text-2XLarge_Bold.bg-light-gray-2）は
 * py-(--space-xs) で上下 padding のみを持ち、横方向(px-*)が未指定。上の列補正で右カラムが
 * auto 幅になるため、英語ラベル "Number of Workers" が下の数値カードより幅広いとラベル自身が
 * 列幅を決め、テキストが灰色ボックスの左右端に接して余白が無くなる（日本語「作業者人数」も同様に
 * 横余白なし）。下の数値カードが px-(--space-2xl) を持つのに合わせ、ラベルにも横 padding を
 * 足して左右に余白を確保する。既存の全ソリューション投稿にも class が焼き込み済みのため、
 * 各投稿を編集せず CSS で一括補正する（block-patterns.php 側のクラスは変更不要）。 */
.single-solution .grid-inline-blocks.bg-primary .text-2XLarge_Bold.bg-light-gray-2 {
    padding-inline: var(--space-lg);
}

/* ── ヒーロー & サイドナビの SP 対応 ───────────────────────────────
 *
 * single-solution.php のヒーローは画像とテキストを .flex-inline-blocks（常時 row）で
 * 並べているが、single-product.php のヒーローが持つ max-lg:flex-col のような縦積み指定が
 * 無いため、SP でも横並び（PC表示）のまま画像がビューポートからはみ出して見切れていた。
 * またヒーロー左の固定サイドナビ（[data-side-navi]）は PC 専用のホバー展開レールだが、
 * SP でもジャンプナビ等のコンテンツに被さって表示されていた。
 *
 * プリビルド CSS のため max-lg:self-stretch 等の任意ユーティリティが存在せず、ここで
 * lg（1024px）未満を明示的に補正する。ブレークポイントは single-product.php の
 * max-lg:flex-col（@media not all and (min-width:1024px)）に合わせている。 */
@media not all and (min-width: 1024px) {
    /* ヒーロー: 画像とテキストを縦積みに */
    .single-solution .p-hero > .flex-inline-blocks {
        flex-direction: column;
    }
    /* 横並び用の self-center / shrink-0 を解除し、テキスト・画像ブロックを全幅に */
    .single-solution .p-hero > .flex-inline-blocks > div {
        align-self: stretch;
    }
    /* 画像がビューポート幅を超えないように */
    .single-solution .p-hero img {
        max-width: 100%;
        height: auto;
    }
    /* PC 専用の左固定サイドナビは SP では非表示（同内容のジャンプナビが代替となる） */
    .single-solution [data-side-navi] {
        display: none !important;
    }
}