/* ============================================================
 * Sound Collective — NYC Custom Music Programs ページを Elementor で「コピーだけ編集
 * 可能」にするためのブリッジCSS。手法は sc-disciplines-elementor.css / sc-private-lessons-
 * elementor.css と同一。スコープはすべて sc-cmp-* 配下のみ。
 * 読み込み: functions/enqueues.php の scltv_enqueue_design_tokens() 配列に
 * 'sc-nyc-custom-music-programs-elementor' を追加。
 * ============================================================ */

/* ------------------------------------------------------------
 * 見出し(Heading ウィジェット) — 外側の font-size/color/weight を内側へ継承
 * ------------------------------------------------------------ */
.sc-cmp-hero__title .elementor-heading-title,
.sc-cmp-intro__title .elementor-heading-title,
.sc-cmp-compare__title .elementor-heading-title,
.sc-cmp-programs__title .elementor-heading-title,
.sc-cmp-steps__title .elementor-heading-title,
.sc-cmp-cases__title .elementor-heading-title,
.sc-cmp-cta__title .elementor-heading-title,
/* カード見出し(Heading ウィジェット化) */
.sc-cmp-program-item__title .elementor-heading-title,
.sc-cmp-pcard__title .elementor-heading-title,
.sc-cmp-step__title .elementor-heading-title,
.sc-cmp-case__title .elementor-heading-title {
	color: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; margin: 0;
}

/* ------------------------------------------------------------
 * 本文(Text Editor ウィジェット) — 同様に内側へ継承
 * ------------------------------------------------------------ */
.sc-cmp-intro__desc .elementor-widget-container,
.sc-cmp-intro__desc .elementor-widget-container p,
.sc-cmp-compare__desc .elementor-widget-container,
.sc-cmp-compare__desc .elementor-widget-container p,
.sc-cmp-programs__desc .elementor-widget-container,
.sc-cmp-programs__desc .elementor-widget-container p,
.sc-cmp-cases__desc .elementor-widget-container,
.sc-cmp-cases__desc .elementor-widget-container p,
.sc-cmp-cta__desc .elementor-widget-container,
.sc-cmp-cta__desc .elementor-widget-container p,
/* カード本文(Text Editor ウィジェット化) */
.sc-cmp-program-item__text .elementor-widget-container,
.sc-cmp-program-item__text .elementor-widget-container p,
.sc-cmp-pcard__text .elementor-widget-container,
.sc-cmp-pcard__text .elementor-widget-container p,
.sc-cmp-step__text .elementor-widget-container,
.sc-cmp-step__text .elementor-widget-container p,
.sc-cmp-case__text .elementor-widget-container,
.sc-cmp-case__text .elementor-widget-container p {
	color: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; margin: 0;
}

/* ------------------------------------------------------------
 * Hero 背景写真 / 装飾バナー。モノリスは絶対配置 <div> / プレーンな装飾 <div> を使うが、
 * Elementor 版はそれを ::before として直接描画する(ショートコードウィジェットで
 * 絶対要素・背景要素を包むと Elementor のラッパーが包含ブロックになり幅/高さが潰れるため)。
 * 画像はテーマ同梱(assets/images/)を相対パス参照 = 環境非依存(添付IDに依存しない)。
 * ------------------------------------------------------------ */
.elementor-element.sc-cmp-hero {
	position: relative; overflow: hidden;
	display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important;
	min-height: 320px; padding: 96px 16px 48px;
}
.elementor-element.sc-cmp-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-cmp-hero__title, .sc-cmp-hero__title.elementor-widget { position: relative; z-index: 1; }

.elementor-element.sc-cmp-banner {
	position: relative; width: 100%; aspect-ratio: 1975 / 326; overflow: hidden;
}
.elementor-element.sc-cmp-banner::before {
	content: ""; position: absolute; inset: 0;
	background: #4d4d4d center/cover no-repeat url("../images/sc-facility-bg.png");
}

/* ------------------------------------------------------------
 * コンテナのフレックス指定を強制(Elementor のインライン per-element CSS は
 * `.elementor-element.elementor-element-xxxxxxx` という複合クラスで詳細度が高いため、
 * !important と具体的なプロパティ限定でここだけ上書きする。基本値はビルドスクリプト側でも
 * ネイティブ設定として二重に設定済み)。
 * ------------------------------------------------------------ */
.elementor-element.sc-cmp-intro {
	/* Elementor の e-con.e-flex は既定で flex-direction:column のため、PC では row を明示して
	 * 左=赤コピー(先頭要素)/右=プログラム一覧の横並びにする(Figma 1831:8879)。SP は
	 * 下部の @media(max-width:1024px) で column に戻す。 */
	display: flex !important; flex-direction: row !important; align-items: stretch !important;
}
.elementor-element.sc-cmp-intro__text {
	display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 24px !important;
	background: var(--sc-primary); color: var(--sc-white); text-align: center;
	padding: 64px 40px;
	flex: 1 0 0 !important; min-width: 0 !important;
}
/* [sc_cmp_intro_programs] ショートコードウィジェットのラッパー(.elementor-element)を
 * intro セクションの右カラムとして左カラム(sc-cmp-intro__text)と等幅にするためのヘルパ
 * クラス(disciplines一覧ページの .sc-disc-stats-cell と同じ手法: 見た目は内側の
 * ショートコードが描画する `.sc-cmp-intro__programs` div 自身が担い、ここは flex サイズ指定のみ)。 */
.elementor-element.sc-cmp-intro__programs-cell {
	flex: 1 0 0 !important; min-width: 0 !important;
}
@media (max-width: 1024px) {
	.elementor-element.sc-cmp-intro__text,
	.elementor-element.sc-cmp-intro__programs-cell { flex: 1 1 auto !important; }
}
.elementor-element.sc-cmp-compare {
	display: flex !important; flex-direction: column !important; align-items: center !important; gap: 16px !important;
	background: var(--sc-bg-bright);
}
.elementor-element.sc-cmp-programs__head,
.elementor-element.sc-cmp-cases__head {
	display: flex !important; flex-direction: column !important; align-items: center !important; gap: 4px !important; text-align: center !important;
	color: var(--sc-fg);
}
.elementor-element.sc-cmp-programs,
.elementor-element.sc-cmp-steps,
.elementor-element.sc-cmp-cases,
.elementor-element.sc-cmp-cta {
	display: flex !important; flex-direction: column !important; align-items: center !important; gap: 24px !important;
}

/* CTA の booking(#166 Google Calendar iframe)は shortcode ウィジェットで包まれる。
 * 親 .sc-cmp-cta は align-items:center のため、ウィジェットが iframe の既定幅(300px)へ縮む。
 * ウィジェットを幅 100% にして中の .sc-cmp-cta__booking(max-width:1280px)を効かせる。 */
.elementor-element.sc-cmp-cta .elementor-widget-shortcode { width: 100%; }

@media (max-width: 1024px) {
	.elementor-element.sc-cmp-intro { flex-direction: column !important; }
}

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

/* ============================================================
 * カードのネイティブウィジェット化(ハイブリッド強化)。各 grid/list はコンテナ、各カードは
 * inner コンテナ、内部の見出し/本文/ボタンはネイティブウィジェット、アイコン/画像は小さな
 * ショートコード。Elementor コンテナは既定 flex-column なので、行/列レイアウトと flex 子の
 * サイズ(1 1 380px 等)を per-element インライン CSS(.elementor-element.elementor-element-xxx
 * = 詳細度0,2,0)へ勝つよう !important で固定する。基本値はビルドスクリプトのネイティブ設定でも
 * 二重に付与済み。
 * ============================================================ */

/* ---- grid/list wrapper のサイズ・中央寄せ・レイアウト ---- */
.elementor-element.sc-cmp-intro__programs {
	display: flex !important; flex-direction: column !important; align-items: center !important; gap: 16px !important;
	padding: 64px 80px;
}
.elementor-element.sc-cmp-programs__grid,
.elementor-element.sc-cmp-cases__grid {
	display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: stretch !important; gap: 16px !important;
	width: 100%; max-width: 1280px; margin-left: auto !important; margin-right: auto !important;
}
.elementor-element.sc-cmp-steps__list {
	display: flex !important; flex-direction: column !important; gap: 24px !important;
	width: 100%; max-width: 624px; margin-left: auto !important; margin-right: auto !important;
	padding: 0 !important; /* Elementor 既定コンテナ padding(10px)を除去=Figma 実幅 624px を保つ #166 */
}

/* ---- Intro program-item(icon 左 + info 右の行カード) ---- */
.elementor-element.sc-cmp-program-item {
	display: flex !important; flex-direction: row !important; align-items: flex-start !important; gap: 16px !important;
	width: 100%;
}
.elementor-element.sc-cmp-program-item__icon { flex: 0 0 40px !important; }
.sc-cmp-program-item__icon i { display: block; font-size: 32px; line-height: 40px; text-align: center; color: var(--sc-primary); }
.elementor-element.sc-cmp-program-item__info {
	display: flex !important; flex-direction: column !important; gap: 8px !important; min-width: 0 !important;
}

/* ---- Programs We Build カード(列カード / illust・icon・photo) ---- */
.elementor-element.sc-cmp-pcard {
	flex: 1 1 380px !important; min-width: 0 !important;
	display: flex !important; flex-direction: column !important; align-items: center !important; gap: 8px !important;
}
.elementor-element.sc-cmp-pcard--icon { gap: 4px !important; }
/* カードは position:relative + ::before 暗幕。ウィジェット子は前面(z-index:1)へ。 */
.elementor-element.sc-cmp-pcard > * { position: relative; z-index: 1; }

/* ---- 3 Steps カード(icon 左 + info 右の行カード) ---- */
.elementor-element.sc-cmp-step {
	display: flex !important; flex-direction: row !important; align-items: flex-start !important; gap: 12px !important;
	width: 100%; padding: 0 !important; /* Elementor 既定 10px padding を除去=Figma の行内幅を保つ #166 */
}
.elementor-element.sc-cmp-step__iconwrap { flex: 0 0 48px !important; line-height: 0; }
.elementor-element.sc-cmp-step__info {
	/* Figma 1831:10697 = flex:[1 0 0](残り幅いっぱい)。既定の Elementor --flex-grow:0 だと
	 * テキスト列が本文の最長行(≈524px)幅で止まり、Figma(564px)より早く折り返す。#166 */
	display: flex !important; flex-direction: column !important; gap: 4px !important;
	flex: 1 0 0 !important; min-width: 0 !important;
}

/* ---- Case Studies カード(body 上 + View Case Study ボタン下の列カード) ---- */
.elementor-element.sc-cmp-case {
	flex: 1 1 380px !important; min-width: 0 !important; min-height: 360px;
	display: flex !important; flex-direction: column !important; justify-content: space-between !important; gap: 16px !important;
}
.elementor-element.sc-cmp-case__body {
	display: flex !important; flex-direction: column !important; gap: 8px !important;
}

/* ---- Case ボタン(Button ウィジェット)。Elementor 既定の背景/枠/余白を無効化し、
 *      元の .sc-cmp-btn の見た目を内側 .elementor-button へ適用(二重枠の回避)。 ---- */
.elementor-element.sc-cmp-btn {
	border: none !important; background: transparent !important;
	padding: 0 !important; min-height: 0 !important; border-radius: 0 !important;
}
.sc-cmp-btn .elementor-widget-container,
.sc-cmp-btn .elementor-button-wrapper { display: flex; }
.sc-cmp-btn .elementor-button {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	min-height: 36px; padding: 7px 12px !important; width: max-content; margin: 0;
	border-radius: var(--sc-radius-pill) !important; text-decoration: none; cursor: pointer;
	font-size: 14px; font-weight: var(--sc-fw-bold); line-height: 1.2;
	background: transparent !important; box-shadow: none !important;
	border: 1px solid var(--sc-border-invert) !important; color: var(--sc-fg);
	transition: background-color .15s ease, color .15s ease;
}
.sc-cmp-btn .elementor-button:hover, .sc-cmp-btn .elementor-button:focus {
	background: var(--sc-bg-hover-strong) !important; color: var(--sc-fg);
}
.sc-cmp-btn .elementor-button-content-wrapper { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.sc-cmp-btn .elementor-button-icon, .sc-cmp-btn .elementor-button-icon i { font-size: 14px; margin: 0; }

/* ---- SP: grid カードは 1 列 ---- */
@media (max-width: 1024px) {
	.elementor-element.sc-cmp-intro__programs { padding: 40px 16px; }
	.elementor-element.sc-cmp-pcard,
	.elementor-element.sc-cmp-case { flex: 1 1 100% !important; }
	/* Figma SP 1822:37654 = ステップ間 gap 32px(PC は 24px)。#166 */
	.elementor-element.sc-cmp-steps__list { gap: 32px !important; }
}