/*
 * 下層ページ ヒーローエリア（SWELL純正タイトルエリアの拡張）
 * ------------------------------------------------------------------
 * 何を補うか（SWELL標準で不足する3点だけを対象にする）
 *   1. サブタイトルがタイトルの「後ろ」に出る仕様を、「上」に変更する
 *   2. カラーオーバーレイが画像フィルターと連動しており、網点だけを外せない
 *   3. タイトル文字サイズとタイトルエリア高さが固定値で変更できない
 *
 * 値は持たない。値は案件側（サイト全体の追加CSS）で変数へ入れる。
 * 戻し方: functions.php の 'dotpress-page-hero' の読み込みを外す。
 */

:root {
  /* 既定値＝SWELL標準と同じ見た目。案件側で上書きする。 */
  --c-hero-title-size: 24px;
  --c-hero-eyebrow-color: #ffffff;
  --c-hero-eyebrow-size: 14px;
  --c-hero-eyebrow-spacing: normal;
  --c-hero-eyebrow-gap: 4px;
  --c-hero-min-height: 11em;
}

/* 2. 網点テクスチャ（::after）だけを外し、カラーオーバーレイ（::before）は残す */
.l-topTitleArea.c-filterLayer::after {
  content: none;
}

/* 1. サブタイトルをタイトルの上へ／3. タイトルサイズを変数化 */
.l-topTitleArea .c-pageTitle {
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: var(--c-hero-eyebrow-gap);
  font-size: var(--c-hero-title-size);
}

.l-topTitleArea .c-pageTitle__subTitle {
  color: var(--c-hero-eyebrow-color);
  font-size: var(--c-hero-eyebrow-size);
  letter-spacing: var(--c-hero-eyebrow-spacing);
  line-height: 1;
}

/* 3. タイトルエリアの高さを変数化 */
.l-topTitleArea {
  min-height: var(--c-hero-min-height);
}