/* ============================================================
 * Sound Collective — Private Lessons ページを Elementor で「コピーだけ編集可能」に
 * するためのブリッジCSS。手法は sc-disciplines-elementor.css / sc-catalog-elementor.css と
 * 同一(見出し/本文/ボタンを Elementor ネイティブウィジェットの内側要素へ継承させ、
 * hero 背景は ::before で描画、コンテナのflexはビルドスクリプト側のネイティブ設定を
 * !important で保険)。スコープはすべて sc-pl-* 配下のみ。
 * 読み込み: functions/enqueues.php の scltv_enqueue_design_tokens() 配列に
 * 'sc-private-lessons-elementor' を追加。
 * ============================================================ */

/* ------------------------------------------------------------
 * 見出し(Heading ウィジェット) — 外側の font-size/color/weight を内側へ継承
 * ------------------------------------------------------------ */
.sc-pl-hero__title .elementor-heading-title,
.sc-pl-choice__title .elementor-heading-title,
.sc-pl-instructors__title .elementor-heading-title,
.sc-pl-price__badge .elementor-heading-title,
.sc-pl-price__title .elementor-heading-title,
.sc-pl-price__amount .elementor-heading-title,
.sc-pl-feature__title .elementor-heading-title {
	color: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; margin: 0;
}

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

/* ------------------------------------------------------------
 * ボタン(Button ウィジェット) — Elementor 既定の背景/パディングを無効化し、
 * 元の .sc-pl-btn(--outline/--filled) の見た目を .elementor-button に適用する。
 * ------------------------------------------------------------ */
.sc-pl-btn .elementor-widget-container { display: flex; }
.sc-pl-btn .elementor-button-wrapper { display: flex; }
.sc-pl-btn .elementor-button {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	min-height: 48px; padding: 7px 24px !important; width: max-content; margin: 0;
	border-radius: var(--sc-radius-pill) !important; text-decoration: none; cursor: pointer;
	font-size: 18px; font-weight: var(--sc-fw-bold); line-height: 1.4;
	background: transparent !important; box-shadow: none !important; border: none !important;
	transition: background-color .15s ease, color .15s ease;
}
.sc-pl-btn.sc-pl-btn--outline .elementor-button {
	min-height: 32px; padding: 7px 12px !important; font-size: 12px; line-height: 1.5;
	border: 1px solid var(--sc-border-invert) !important; color: var(--sc-fg);
}
.sc-pl-btn.sc-pl-btn--outline .elementor-button:hover,
.sc-pl-btn.sc-pl-btn--outline .elementor-button:focus {
	background: var(--sc-bg-hover-strong) !important; color: var(--sc-fg);
}
.sc-pl-btn.sc-pl-btn--filled .elementor-button {
	background: var(--sc-white) !important; color: var(--sc-pl-ink, #0b0d27);
}
.sc-pl-btn.sc-pl-btn--filled .elementor-button:hover,
.sc-pl-btn.sc-pl-btn--filled .elementor-button:focus {
	color: var(--sc-primary);
}
.sc-pl-btn .elementor-button-content-wrapper { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
/* 元の .sc-pl-btn* はラッパー(.elementor-element)にも付き、枠線/背景/余白が
 * 内側 .elementor-button と二重描画される。ラッパー側の箱スタイルを打ち消す。 */
.elementor-element.sc-pl-btn {
	border: none !important; background: transparent !important;
	padding: 0 !important; min-height: 0 !important; border-radius: 0 !important;
}

/* ============================================================
 * 料金カード / 特徴カードの native ウィジェット分解(ビルドスクリプトが
 * [sc_pl_pricing_cards] / [sc_pl_features] ショートコードの代わりに native コンテナ+
 * Heading/Text/Button を出力する)。カードのボックス見た目(背景/角丸/余白/最小高さ)は
 * sc-private-lessons.css のクラス指定がそのまま効く。ここでは Elementor コンテナ/ウィジェット
 * ラッパーに対して flex レイアウトと文字継承/ボタン中和だけを補強する。
 * ============================================================ */

/* --- 料金カード grid とカード本体 --- */
.elementor-element.sc-pl-pricing__grid {
	display: flex !important; flex-direction: row !important; gap: 16px !important;
}
.elementor-element.sc-pl-price {
	display: flex !important; flex-direction: column !important;
	justify-content: space-between !important; gap: 16px !important;
	flex: 1 0 0 !important; min-width: 0 !important;
}
.elementor-element.sc-pl-price__info {
	display: flex !important; flex-direction: column !important; gap: 8px !important;
}
.elementor-element.sc-pl-price__foot {
	display: flex !important; flex-direction: column !important; gap: 16px !important;
}
/* Most Popular バッジ(pill 見た目は .sc-pl-price__badge クラスがラッパーへ効く)。
 * flex 列の中で content 幅に収める。 */
.elementor-element.sc-pl-price__badge { align-self: flex-start !important; }

/* Book Now(primary filled pill)。Button ウィジェット既定の背景/枠/余白を無効化し、
 * 元の .sc-pl-price__cta の塗り+pill 見た目を .elementor-button へ適用。ラッパー側に
 * 二重描画されるボックスは打ち消す。 */
.elementor-element.sc-pl-price__cta {
	align-self: flex-start !important;
	background: transparent !important; border: none !important;
	padding: 0 !important; min-height: 0 !important; border-radius: 0 !important;
}
.sc-pl-price__cta .elementor-widget-container,
.sc-pl-price__cta .elementor-button-wrapper { display: flex; }
.sc-pl-price__cta .elementor-button {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 48px; padding: 7px 24px !important; width: max-content; margin: 0;
	border-radius: var(--sc-radius-pill) !important; text-decoration: none; cursor: pointer;
	font-size: 18px; font-weight: var(--sc-fw-bold); line-height: 1.4;
	background: var(--sc-primary) !important; color: var(--sc-white) !important;
	box-shadow: none !important; border: none !important;
	transition: background-color .15s ease, color .15s ease;
}
.sc-pl-price__cta .elementor-button:hover,
.sc-pl-price__cta .elementor-button:focus {
	background-image: linear-gradient(rgba(255,255,255,.10), rgba(255,255,255,.10)) !important;
	color: var(--sc-white) !important;
}
.sc-pl-price__cta .elementor-button-content-wrapper { display: inline-flex; align-items: center; justify-content: center; }

/* --- 特徴カード grid とカード本体 --- */
.elementor-element.sc-pl-features {
	display: flex !important; flex-direction: row !important; gap: 16px !important;
}
.elementor-element.sc-pl-feature {
	display: flex !important; flex-direction: column !important; gap: 16px !important;
}
.elementor-element.sc-pl-feature__info {
	display: flex !important; flex-direction: column !important; gap: 8px !important;
}
/* アイコンは [sc_pl_icon] ショートコード出力の <i>。モノリスの `.sc-pl-feature > i` は
 * Elementor ではショートコードウィジェット配下にネストするため、子孫セレクタで拾う。 */
.sc-pl-feature .elementor-widget-shortcode { line-height: 0; }
.sc-pl-feature i[class*="fa-"] { font-size: 32px; line-height: 1; color: var(--sc-primary); }

/* ------------------------------------------------------------
 * Hero 背景写真。モノリスは .sc-pl-hero__bg という絶対配置 <div> を使うが、Elementor版は
 * それを ::before としてセクションコンテナ(.elementor-element.sc-pl-hero は
 * position:relative)から直接描画する(disciplines と同じ理由: ショートコードウィジェットで
 * 絶対要素を包むと Elementor のラッパーが包含ブロックになり幅が潰れる)。
 * 画像はテーマ同梱(assets/images/)を相対パス参照 = 環境非依存(添付IDに依存しない)。
 * ------------------------------------------------------------ */
.elementor-element.sc-pl-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 のインライン per-element CSS は
 * `.elementor-element.elementor-element-xxxxxxx` という複合クラスで詳細度が高いため、
 * !important と具体的なプロパティ限定でここだけ上書きする。基本値はビルドスクリプト側でも
 * ネイティブ設定として二重に設定済み)。
 * ------------------------------------------------------------ */
.elementor-element.sc-pl-hero {
	display: flex !important; flex-direction: column !important;
	align-items: center !important; justify-content: center !important;
}
.elementor-element.sc-pl-hero__inner {
	display: flex !important; flex-direction: column !important; align-items: center !important; gap: 8px !important;
}
.elementor-element.sc-pl-pricing {
	display: flex !important; flex-direction: column !important; gap: 16px !important;
}
.elementor-element.sc-pl-pricing__foot {
	display: flex !important; justify-content: flex-end !important;
}
.elementor-element.sc-pl-choice {
	display: flex !important; flex-direction: column !important; gap: 24px !important;
}
.elementor-element.sc-pl-choice__head {
	display: flex !important; flex-direction: column !important; align-items: center !important; gap: 8px !important; text-align: center !important;
}
.elementor-element.sc-pl-instructors {
	display: flex !important; align-items: stretch !important; gap: 24px !important;
}
.elementor-element.sc-pl-instructors__text {
	display: flex !important; flex-direction: column !important; gap: 24px !important;
}

@media (max-width: 1024px) {
	.elementor-element.sc-pl-pricing__foot { justify-content: stretch !important; }
	.elementor-element.sc-pl-instructors { flex-direction: column !important; }
	.elementor-element.sc-pl-instructors__text { max-width: none !important; }

	/* 料金カードは縦積み。列方向コンテナ(高さ auto)へ持ち込むと flex:1 0 0 の basis:0 で
	 * カード高さが 0 起点に潰れ 3 枚が重なるバグ(sc-private-lessons.css §SP 参照)。列方向では
	 * flex:none + min-height:0 に戻す。 */
	.elementor-element.sc-pl-pricing__grid { flex-direction: column !important; }
	.elementor-element.sc-pl-price { flex: none !important; min-height: 0 !important; }

	/* #167: 特徴カードは全幅で縦積み(Figma 1822-43652)。横スクロールは廃止。
	 * カード内はアイコン左・テキスト右の行レイアウト。 */
	.elementor-element.sc-pl-features { flex-direction: column !important; }
	.elementor-element.sc-pl-feature {
		flex: none !important; width: 100% !important;
		flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important;
	}
	.elementor-element.sc-pl-feature__info { flex: 1 1 auto !important; min-width: 0 !important; }
}

/* ------------------------------------------------------------
 * ワイド表示での中央寄せ崩れ対策(Elementor コンテナは margin を 0 にするため、
 * max-width + margin-inline:auto の中央寄せが崩れる。auto マージンを復元する)。
 * ------------------------------------------------------------ */
.elementor-element.sc-pl-pricing,
.elementor-element.sc-pl-choice,
.elementor-element.sc-pl-instructors {
	margin-left: auto !important;
	margin-right: auto !important;
}