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

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

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

/* ------------------------------------------------------------
 * Hero 背景写真。モノリスは絶対配置 <div> を使うが、Elementor 版はそれを ::before として
 * 直接描画する(ショートコード/ネイティブウィジェットで絶対要素を包むと Elementor の
 * ラッパーが包含ブロックになり高さが潰れるため)。
 * 画像はテーマ同梱(assets/images/)を相対パス参照 = 環境非依存(添付IDに依存しない)。
 * ------------------------------------------------------------ */
.elementor-element.sc-osub-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-osub-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-osub-hero__title,
.sc-osub-hero__title.elementor-widget,
.elementor-element.sc-osub-hero__subtitle,
.sc-osub-hero__subtitle.elementor-widget { position: relative; z-index: 1; }

.elementor-element.sc-osub-hero__title .elementor-heading-title {
	max-width: 900px; margin-inline: auto; text-align: center;
	font-size: 40px; font-weight: 700; line-height: 1.2; color: var(--sc-white);
}
.elementor-element.sc-osub-hero__subtitle .elementor-widget-container,
.elementor-element.sc-osub-hero__subtitle .elementor-widget-container p {
	max-width: 720px; margin-inline: auto; text-align: center;
	font-size: 18px; font-weight: 500; line-height: 1.4; color: var(--sc-white);
}

/* ------------------------------------------------------------
 * Main content セクション(サブスクカードを収める。ショートコード [sc_osub_plans] の
 * ラッパー .elementor-element を中央寄せ + パディング)。
 * ------------------------------------------------------------ */
.elementor-element.sc-osub-main {
	display: flex !important; justify-content: center !important;
	background: var(--sc-bg);
	padding: 48px 16px;
}
/* ショートコード [sc_osub_plans] のラッパー(.elementor-element)を中央 + 最大幅1280に。
 * 見た目は内側の .sc-osub-plans が担う(sc-online-subscription.css)。 */
.elementor-element.sc-osub-plans-cell { width: 100%; max-width: 1280px; }

/* Elementor の widget ラッパー(.elementor-shortcode 等)は全幅ブロックになり、
 * 内側の .sc-osub-plans(max-width:1280)が左寄せになる。Elementor はコンテナ margin を
 * 0 に強制するため、プランカード行(grid)を !important で明示的に中央寄せする(issue #41)。 */
.elementor-element.sc-osub-main .sc-osub-plans { margin-inline: auto !important; }

@media (max-width: 1024px) {
	.elementor-element.sc-osub-hero { padding: 64px 16px 40px; min-height: 240px; }
	.elementor-element.sc-osub-hero__title .elementor-heading-title { font-size: 32px; }
	.elementor-element.sc-osub-hero__subtitle .elementor-widget-container,
	.elementor-element.sc-osub-hero__subtitle .elementor-widget-container p { font-size: 16px; }
	.elementor-element.sc-osub-main { padding: 32px 16px; }
}