/* =====================
   Hero バリアントB: hero--split
   左: キャッチコピー / 右: 画像（50/50 分割）
   -----------------------------------------------------------
   モバイルファースト（min-width拡張）で書く。基準（無条件）ルールはモバイル＝縦積みで、
   高さはmin-heightではなく.hero-img-colのaspect-ratioで確保する（min-height/heightの
   二重指定を避ける）。「画面いっぱいの存在感」というPC専用の要求（min-height:75vh）は、
   モバイルで打ち消す形にせず、最初から@media(min-width:769px)側だけに書く。
   2026-09-22、旧版（PC基準+max-width打ち消し方式）から書き換え。旧版はパン工房むぎの
   Hero〜Concept間の白い隙間バグと同型の危険パターンだった（詳細: CLAUDE.md「CSS 設計ルール」、
   検証過程はtools/comparisons/css-structure-pilot/参照。旧内容はhero-b-legacy.cssに保管） */
.hero--split {
  display: flex;
  flex-direction: column;
}

.hero--split .hero-text-col {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 104px 24px 32px;
  background: var(--color-bg-page);
}

.hero--split .hero-img-col {
  min-width: 0;
  background: #CCCCCC;
  /* モバイルの高さ確保はaspect-ratioで行う。min-heightは使わない
     （.hero--split側にPC用min-heightを足しても、子のこの指定と二重にならないため） */
  aspect-ratio: 16 / 10;
}

.hero--split .hero-catch {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-text-dark);
  margin-bottom: 16px;
}

.hero--split .hero-sub {
  font-size: 1.1rem;
  color: var(--color-text-muted);
  margin-bottom: 32px;
  line-height: 1.7;
}

/* ロゴ・ナビは.site-header--split（css/base.css）が担当するため、
   hero-text-col内には持たない */

/* =====================
   769px以上（PC）：横並び＋画面いっぱいの存在感を追加する
   -----------------------------------------------------------
   モバイル側で「打ち消す」のではなく、最初からPCにしか要らない値として
   min-width側だけに書く。.hero-img-colは自分でmin-heightを持たず、
   flexのalign-items既定値(stretch)で親(.hero--split)の高さに自動で揃うため、
   min-height/heightの二重指定が発生しない
===================== */
@media (min-width: 769px) {
  .hero--split {
    flex-direction: row;
    min-height: 75vh;
  }

  .hero--split .hero-text-col {
    flex: 0 0 50%;
    padding: 48px;
    padding-top: 112px;
  }

  .hero--split .hero-img-col {
    flex: 0 0 50%;
    aspect-ratio: auto;
  }

  .hero--split .hero-catch {
    font-size: 2.8rem;
  }
}