/* ============================================================
 * Sound Collective — Disciplines「タイプ別サブリスト」ページ(24ページ:
 * /disciplines/{disc}/{full-programs|courses|online|workshops}/)を Elementor で
 * 「コピーだけ編集可能」にするためのブリッジCSS。
 *
 * 対象: functions/sc-disciplines-list-blocks.php の [sc_dl_*] ショートコード群 +
 * wp-main/bin/build-disciplines-sublists-elementor.php が組む Hero/Intro のネイティブ
 * Heading/Text-editor ウィジェット。パターンは sc-disciplines-elementor.css
 * (discipline詳細5ページ / disciplines一覧ページ)と同一。
 *
 * スコープ: すべて sc-dl-* 配下のみ。.elementor-* をグローバルに変更しない。
 * 読み込み: functions/enqueues.php の scltv_enqueue_design_tokens() 配列に
 * 'sc-disciplines-list-elementor' を追加。
 * ============================================================ */

/* ------------------------------------------------------------
 * 見出し(Heading ウィジェット) — 外側の font-size/color/weight を内側へ継承。
 * 元CSS(sc-disciplines-list.css)は .sc-dl-hero__title / .sc-dl-intro__title を
 * 見出しタグ自身に直接付ける前提のため、Elementor版ではウィジェット外側ラッパーに
 * 付いたクラスから内側 .elementor-heading-title へ橋渡しする。
 * ------------------------------------------------------------ */
.sc-dl-hero__title .elementor-heading-title,
.sc-dl-intro__title .elementor-heading-title {
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	margin: 0;
}

/* ------------------------------------------------------------
 * 本文(Text-editor ウィジェット) — 同様に内側へ継承。
 * ------------------------------------------------------------ */
.sc-dl-hero__sub .elementor-widget-container,
.sc-dl-hero__sub .elementor-widget-container p,
.sc-dl-intro__desc .elementor-widget-container,
.sc-dl-intro__desc .elementor-widget-container p {
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	margin: 0;
}

/* ------------------------------------------------------------
 * Hero 背景。モノリスは .sc-dl-hero__bg という絶対配置 <div>(インラインstyleで
 * background-image)を使うが、Elementor版でそれをショートコードウィジェットとして
 * 描画すると、Elementorが挟むラッパー(.elementor-widget/.elementor-widget-container)
 * が絶対要素の包含ブロックになり幅が0に潰れて背景が消える。
 * → ウィジェットとして描かず、セクションコンテナ(.elementor-element.sc-dl-hero)の
 *   ::before として CSS から直接描画する。画像はテーマ同梱(assets/images/)を相対パス
 *   参照 = 環境非依存(添付ID・メディアプロキシに依存しない)。モノリス側(素の
 *   div)とは別セレクタなので二重描画しない。
 * ------------------------------------------------------------ */
.elementor-element.sc-dl-hero {
	position: relative;
	overflow: hidden;
}
.elementor-element.sc-dl-hero::before {
	content: "";
	position: absolute; inset: -40px 0; z-index: 0; pointer-events: none;
	background: center/cover no-repeat url("../images/sc-hero-bg.png");
	filter: blur(4px); mix-blend-mode: lighten; opacity: .3;
}
.elementor-element.sc-dl-hero > .elementor-element { position: relative; z-index: 1; }

/* ------------------------------------------------------------
 * コンテナのフレックス指定を強制(Elementorのインライン per-element CSSが
 * `.elementor-element.elementor-element-xxxxxxx{...}` という詳細度の高い形で
 * 素の `.sc-dl-hero{...}` 等より先に評価され得るため、!important で保険をかける。
 * 基本値はビルドスクリプト側でもネイティブ設定(flex_direction等)として設定済み。
 * ------------------------------------------------------------ */
.elementor-element.sc-dl-hero {
	display: flex !important; flex-direction: column !important;
	align-items: center !important; justify-content: center !important;
}
.elementor-element.sc-dl-hero__inner {
	display: flex !important; flex-direction: column !important; align-items: center !important;
	gap: 8px !important; text-align: center;
}
.elementor-element.sc-dl-intro {
	display: flex !important; align-items: flex-start !important;
	justify-content: space-between !important; gap: 24px !important;
}
.elementor-element.sc-dl-intro__head {
	display: flex !important; flex-direction: column !important; gap: 8px !important;
}

@media (max-width: 1024px) {
	.elementor-element.sc-dl-intro {
		flex-direction: column !important; align-items: stretch !important; gap: 16px !important;
	}
}

/* ------------------------------------------------------------
 * Stats ショートコードウィジェット(bareウィジェット)の外側ラッパーは Elementor
 * コンテナの直接の子(flexアイテム)になるため、既定で伸縮してしまう。実際の見た目
 * (幅416px等)は内側の実 `.sc-dl-stats` 自身が sc-disciplines-list.css の素のルール
 * でそのまま担うので、ここでは外側を伸縮させない(flex:0 0 auto)だけに留める。
 * ------------------------------------------------------------ */
.elementor-element.sc-dl-stats-cell { flex: 0 0 auto; }

/* ------------------------------------------------------------
 * ワイド表示(コンテンツ max-width 超)での中央寄せ崩れ対策。
 * 元CSSは `.sc-dl-intro{max-width:1440px; margin-inline:auto;}` で中央寄せするが、
 * Elementor コンテナは margin を 0 にする(per-element CSS)ため左寄せになる。
 * auto マージンを復元する。(Hero内部は親の justify-content:center で中央寄せされる
 * ため margin-auto 復元は不要)
 * ------------------------------------------------------------ */
.elementor-element.sc-dl-intro {
	margin-left: auto !important;
	margin-right: auto !important;
}