/* =====================
   Hero バリアントB 追加オプション: .hero--split-photoless
   -----------------------------------------------------------
   写真を用意できない案件向けに、hero-img-col（画像枠）を
   ブランドカラーのグラデーション＋抽象的な円形装飾に置き換える。
   hero-b.htmlは無改造のまま使い、実装時にsection要素へ
   ' hero--split-photoless' を追加クラスとして足すだけで適用できる
   （テキストを一切使わないので、案件ごとの編集がCSS側に発生しない）
===================== */
/* 変数の既定値は.hero--split-photoless（ヒーローセクション本体）側に置く。
   .hero-img-col側で既定値を宣言すると、案件側CSSが.hero--split-photolessに
   上書きを書いても「自分自身に直接宣言された値」の方が優先されてしまい、
   継承による上書きが効かなくなるため（CSS変数のカスケードの仕様） */
.hero--split-photoless {
  /* 案件ごとの見た目の重複を避けるための調整点。
     形の系統（円）はテーマ（ムード）に紐づけたまま、位置・大きさ・不透明度・色だけを
     案件側のCSS（company.css等）で上書きすれば同じテーマでも別物に見える。
     デフォルト値はこのオプションを最初に作ったときの見た目と同じ */
  --deco-angle: 160deg;
  --deco-color-1: var(--color-primary);
  --deco-color-2: var(--color-secondary);
  --deco-1-size: 60%;
  --deco-1-x: -15%;
  --deco-1-y: -10%;
  --deco-1-opacity: 0.08;
  --deco-2-size: 40%;
  --deco-2-x: -10%;
  --deco-2-y: -5%;
  --deco-2-opacity: 0.15;
}

.hero--split-photoless .hero-img-col {
  position: relative;
  overflow: hidden;
  background: linear-gradient(var(--deco-angle), var(--deco-color-1) 0%, var(--deco-color-2) 100%);
}

.hero--split-photoless .hero-img-col::before {
  content: '';
  position: absolute;
  width: var(--deco-1-size);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, var(--deco-1-opacity));
  top: var(--deco-1-y);
  right: var(--deco-1-x);
}

.hero--split-photoless .hero-img-col::after {
  content: '';
  position: absolute;
  width: var(--deco-2-size);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, var(--deco-2-opacity));
  bottom: var(--deco-2-y);
  left: var(--deco-2-x);
}