/* ============================================================
 * Sound Collective — Disciplines 詳細ページ 新カード(GitHub #64)
 * Figma:  Full Program ワイド 2400:79430 / Course 2119:23475 / Online 2107:46367
 *         フィルタチップ行 2107:47662
 * デザイントークンは sc-design-tokens.css の :root を利用。
 * クラスは sc-disc2-*(既存 sc-disc-card / sc-<prefix>-card と衝突回避)。
 * カテゴリ色は wrapper の data-cat から --sc-dcat を切替。
 * 各 sc-<prefix>-*.css より後に読み込まれる(enqueue priority 102)。
 * ============================================================ */

/* ===== カテゴリ色(6ディシプリン)===== */
.sc-disc2-cards[data-cat="dj"],   .sc-disc2-features[data-cat="dj"]   { --sc-dcat: var(--sc-brand-dj); }
.sc-disc2-cards[data-cat="mp"],   .sc-disc2-features[data-cat="mp"]   { --sc-dcat: var(--sc-brand-production); }
.sc-disc2-cards[data-cat="se"],   .sc-disc2-features[data-cat="se"]   { --sc-dcat: var(--sc-brand-studio); }
.sc-disc2-cards[data-cat="voc"],  .sc-disc2-features[data-cat="voc"]  { --sc-dcat: var(--sc-brand-vocal); }
.sc-disc2-cards[data-cat="mb"],   .sc-disc2-features[data-cat="mb"]   { --sc-dcat: var(--sc-brand-business); }
.sc-disc2-cards[data-cat="inst"], .sc-disc2-features[data-cat="inst"] { --sc-dcat: var(--sc-white); }

.sc-disc2-cards, .sc-disc2-features { --sc-dcat: var(--sc-primary); --sc-dcat-ink: #0b0d27; }
.sc-disc2-cards *, .sc-disc2-cards *::before, .sc-disc2-cards *::after,
.sc-disc2-features *, .sc-disc2-features *::before, .sc-disc2-features *::after { box-sizing: border-box; }

/* margin above the card block (旧 .sc-<prefix>-cards と同等の余白) */
.sc-disc2-cards, .sc-disc2-features { position: relative; z-index: 1; margin-top: 32px; }
.sc-disc2-features { display: flex; flex-direction: column; gap: 16px; }

/* ============================================================
 * Course / Online カード(縦カード)
 * ============================================================ */
.sc-disc2-card {
	position: relative; display: flex; flex-direction: column; overflow: hidden;
	background: var(--sc-bg-bright); border: 1px solid var(--sc-border-dim); border-radius: var(--sc-radius-card);
	font-family: var(--sc-font); line-height: var(--sc-lh); color: var(--sc-fg);
}
.sc-disc2-card h3, .sc-disc2-card p, .sc-disc2-card dl, .sc-disc2-card dd { margin: 0; }

/* サムネイル(inset 8px / rounded 8px / 16:9) */
.sc-disc2-card__media { position: relative; padding: 8px; }
.sc-disc2-card__thumb {
	width: 100%; aspect-ratio: 768 / 432; border-radius: 8px;
	background: #4d4d4d center/cover no-repeat;
}
.sc-disc2-card__badge {
	position: absolute; top: 16px; right: 16px;
	display: inline-flex; align-items: center; height: 32px; padding: 4px 10px;
	background: var(--sc-bg-invert); color: #0b0d27; border-radius: 54px;
	font-size: 14px; font-weight: var(--sc-fw-bold); line-height: 1.4;
}

/* #163-3: body を伸縮させ CTA の margin-top:auto をカード下端に効かせる(catalog .sc-cat-card__body 準拠)。 */
.sc-disc2-card__body { display: flex; flex-direction: column; gap: 16px; padding: 16px; flex: 1 1 auto; }
.sc-disc2-card__details { display: flex; flex-direction: column; gap: 16px; }
.sc-disc2-card__head { display: flex; flex-direction: column; gap: 4px; }
.sc-disc2-card__title { font-size: 24px; font-weight: var(--sc-fw-bold); line-height: 1.2; color: var(--sc-fg); }

/* ===== タグ(カテゴリ + レベル)===== */
.sc-disc2-card__tags { display: flex; gap: 4px; }
/* #203: padding は catalog カード(`.sc-cat-tag` / sc-catalog.css)= 2px 8px が正。
 * 0 8px だとタグの高さだけが catalog と違い、同じコースのカードがページ間で別物に見えていた。 */
.sc-disc2-tag { display: inline-flex; align-items: center; padding: 2px 8px; font-size: 12px; font-weight: var(--sc-fw-bold); line-height: 1.2; }
.sc-disc2-tag--cat { background: var(--sc-dcat); color: var(--sc-dcat-ink); }
.sc-disc2-tag--level { background: var(--sc-bg-hover-strong); color: var(--sc-fg); }

/* ===== メタ行(Duration / Schedule / Hours)===== */
.sc-disc2-card__meta { display: flex; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--sc-border); }
.sc-disc2-meta { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.sc-disc2-meta--center { text-align: center; }
.sc-disc2-meta--right { text-align: right; }
.sc-disc2-meta dt { font-size: 12px; font-weight: var(--sc-fw-medium); color: var(--sc-fg-secondary); }
.sc-disc2-meta dd { font-size: 16px; font-weight: var(--sc-fw-bold); color: var(--sc-fg); }

/* Online メタ: 講師(アバター+名前)が 2/3 / Hours が右 1/3 */
.sc-disc2-card__meta--online { align-items: flex-start; }
.sc-disc2-instr { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; }
.sc-disc2-instr__ava { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; background: #4d4d4d center/cover no-repeat; }
.sc-disc2-instr__text { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.sc-disc2-instr__text dt { font-size: 12px; font-weight: var(--sc-fw-medium); color: var(--sc-fg-secondary); }
.sc-disc2-instr__text dd { font-size: 16px; font-weight: var(--sc-fw-bold); color: var(--sc-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-disc2-card__meta--online .sc-disc2-meta { flex: 0 0 auto; margin-left: auto; }

/* ===== 説明(2行クランプ)===== */
.sc-disc2-card__desc {
	font-size: 12px; font-weight: var(--sc-fw-medium); line-height: 1.4; color: var(--sc-fg-secondary);
	display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ===== 価格 + サブ表記 ===== */
.sc-disc2-card__footer { display: flex; flex-direction: column; gap: 4px; }
.sc-disc2-card__price { font-size: 20px; font-weight: var(--sc-fw-bold); line-height: 1.2; color: var(--sc-fg); }
.sc-disc2-card__pricenote { font-size: 12px; font-weight: var(--sc-fw-medium); line-height: 1.4; color: var(--sc-fg-secondary); }
/* #203: 「✓ Counts toward Full Program enrollment」注記の色。catalog の同注記
 * (`.sc-cat-card__price span.sc-cat-card__note--check` / sc-catalog.css)= var(--sc-primary)(赤)が正。
 * --sc-brand-studio(緑)は Studio Engineering のディシプリン色を全ディシプリンに決め打ちしていた誤りで、
 * 同じコースが catalog では赤・Hub6/講師詳細では緑になっていた。 */
.sc-disc2-card__pricenote--fp { color: var(--sc-primary); }

/* ===== CTA(赤ピル・中央)===== */
.sc-disc2-card__cta {
	margin-top: auto; /* #163-3: カード下端に固定して CTA の縦位置を揃える(catalog 準拠) */
	align-self: center; display: inline-flex; align-items: center; justify-content: center;
	min-height: 44px; padding: 7px 24px; border-radius: var(--sc-radius-pill);
	background: var(--sc-primary); color: var(--sc-white); text-decoration: none;
	font-size: 14px; font-weight: var(--sc-fw-bold); line-height: 1.2;
}
.sc-disc2-card__cta:hover { background-image: linear-gradient(rgba(255,255,255,.10), rgba(255,255,255,.10)); color: var(--sc-white); }

/* ============================================================
 * Full Program ワイドカード(feature)
 * ============================================================ */
.sc-disc2-feature {
	position: relative; display: flex; align-items: stretch; overflow: hidden;
	background: var(--sc-bg-bright); border: 1px solid #6a6a6a; border-radius: var(--sc-radius-card);
	box-shadow: 0 4px 30px rgba(0,0,0,.5);
	font-family: var(--sc-font); line-height: var(--sc-lh); color: var(--sc-fg);
}
.sc-disc2-feature h3, .sc-disc2-feature p, .sc-disc2-feature dl, .sc-disc2-feature dd { margin: 0; }
/* 下部アクセントグロー(Figma: mix-blend lighten) */
.sc-disc2-feature::after {
	content: ""; position: absolute; right: -8%; bottom: -110px; width: 70%; height: 300px; z-index: 0;
	background: radial-gradient(60% 100% at 100% 100%, var(--sc-dcat) 0%, transparent 72%);
	mix-blend-mode: lighten; opacity: .5; pointer-events: none;
}

.sc-disc2-feature__media { position: relative; z-index: 1; flex: 0 0 auto; width: min(50%, 640px); padding: 8px; }
.sc-disc2-feature__thumb {
	width: 100%; aspect-ratio: 640 / 354; border-radius: 8px;
	background: #4d4d4d center/cover no-repeat;
	filter: drop-shadow(0 4px 10px rgba(0,0,0,.35));
}
.sc-disc2-feature__body {
	position: relative; z-index: 1; flex: 1 1 0; min-width: 0;
	display: flex; flex-direction: column; gap: 16px; padding: 32px; justify-content: center;
}
.sc-disc2-feature__main { flex: 1 1 0; display: flex; flex-direction: column; gap: 16px; }
.sc-disc2-feature__info { display: flex; flex-direction: column; gap: 4px; }
.sc-disc2-feature__head { display: flex; flex-direction: column; gap: 4px; padding-bottom: 4px; }
.sc-disc2-feature__title { font-size: 32px; font-weight: var(--sc-fw-bold); line-height: 1.2; color: var(--sc-dcat); }
.sc-disc2-feature__desc {
	font-size: 12px; font-weight: var(--sc-fw-medium); line-height: 1.4; color: var(--sc-fg-secondary);
	display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sc-disc2-feature__footer { display: flex; flex-direction: column; gap: 4px; }

/* feature の CTA は白ピル(Figma) */
.sc-disc2-feature__cta {
	align-self: center; display: inline-flex; align-items: center; justify-content: center;
	min-height: 44px; padding: 7px 24px; border-radius: var(--sc-radius-pill);
	background: var(--sc-white); color: #0b0d27; text-decoration: none;
	font-size: 14px; font-weight: var(--sc-fw-bold); line-height: 1.2;
}
.sc-disc2-feature__cta:hover { color: var(--sc-primary); }

/* feature 内でタグ/メタ/価格は縦カードのスタイルを共有(sc-disc2-card__* を再利用) */

/* ============================================================
 * カルーセル(Course/Online/Workshop)
 * ============================================================ */
.sc-disc2-carousel { position: relative; }
.sc-disc2-carousel__track {
	display: flex; gap: 16px; overflow-x: auto; padding-bottom: 8px;
	scroll-snap-type: x mandatory; scroll-behavior: smooth;
	scrollbar-width: none; -ms-overflow-style: none;
}
.sc-disc2-carousel__track::-webkit-scrollbar { display: none; }
.sc-disc2-carousel__track > .sc-disc2-card { flex: 0 0 340px; scroll-snap-align: center; } /* #110: 中央スナップ */
.sc-disc2-carousel__nav { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.sc-disc2-navbtn {
	display: inline-flex; align-items: center; justify-content: center; width: 35px; height: 36px;
	border: none; border-radius: var(--sc-radius-pill); cursor: pointer;
	background: var(--sc-bg-hover-strong); color: var(--sc-fg); font-size: 14px;
}
.sc-disc2-navbtn:hover { background: rgba(255,255,255,.16); color: var(--sc-primary); }

/* ============================================================
 * フィルタチップ行(GitHub #64: 中央揃え / 順序は sc-disciplines-config.php の $filters6)
 * 当初は Figma 2107:47662 準拠で右寄せだったが、レビュー指摘(2026-07-13)で中央揃えへ変更。
 * 6ディシプリン詳細ページの各 .sc-<prefix>-controls > .sc-<prefix>-filterbar に共通で効く。
 * これらのクラスは詳細ページ以外には存在しないため他ページへ影響しない。
 * ============================================================ */
.sc-dj-controls  .sc-dj-filterbar,
.sc-mp-controls  .sc-mp-filterbar,
.sc-se-controls  .sc-se-filterbar,
.sc-voc-controls .sc-voc-filterbar,
.sc-mb-controls  .sc-mb-filterbar,
.sc-inst-controls .sc-inst-filterbar { justify-content: center; }

/* アクティブチップも他チップと同じ 14px(Figma 2107:47662。既存 CSS の 12px 縮小を打ち消す) */
.sc-dj-controls  .sc-dj-fchip.is-active span,
.sc-mp-controls  .sc-mp-fchip.is-active span,
.sc-se-controls  .sc-se-fchip.is-active span,
.sc-voc-controls .sc-voc-fchip.is-active span,
.sc-mb-controls  .sc-mb-fchip.is-active span,
.sc-inst-controls .sc-inst-fchip.is-active span { font-size: 14px; }

/* ============================================================
 * SP(≤1024px)
 * ============================================================ */
@media (max-width: 1024px) {
	.sc-disc2-cards, .sc-disc2-features { margin-top: 24px; }

	/* feature は縦積み(アートワーク上 / 詳細下) */
	.sc-disc2-feature { flex-direction: column; align-items: stretch; }
	.sc-disc2-feature__media { width: 100%; }
	.sc-disc2-feature__body { padding: 16px; }
	.sc-disc2-feature__title { font-size: 24px; }
	.sc-disc2-feature::after { right: -20%; bottom: -80px; width: 90%; height: 200px; }

	/* カルーセルカード幅(SP) */
	.sc-disc2-carousel__track > .sc-disc2-card { flex-basis: 300px; }
	/* #110 SP centered/peek: トラックを画面幅まで拡張し両端に (100vw-300)/2 の余白。gap 13px。 */
	.sc-disc2-carousel__track {
		width: calc(100% + 32px); margin-inline: -16px;
		padding-inline: calc((100vw - 300px) / 2); scroll-padding-inline: calc((100vw - 300px) / 2);
		gap: 13px;
	}

	/* prev/next を左右端に振り分けてオーバーレイ */
	.sc-disc2-carousel__nav { position: absolute; inset: 0 0 8px; margin: 0; align-items: center; justify-content: space-between; pointer-events: none; }
	.sc-disc2-navbtn { pointer-events: auto; }
}

/* #110 fix: tablet(768–1024px) は centered/peek のブリード＋(100vw-300)/2 の過大 padding を
 * 打ち消し、PC と同じ通常スクロールカルーセルに戻す(左空白の解消)。中央+peek は ≤767px のみ。 */
@media (min-width: 768px) and (max-width: 1024px) {
	.sc-disc2-carousel__track {
		width: auto; margin-inline: 0;
		padding-inline: 0; scroll-padding-inline: 0; gap: 16px;
	}
}

@media (max-width: 480px) {
	.sc-disc2-carousel__track > .sc-disc2-card { flex-basis: 82vw; }
	.sc-disc2-carousel__track { padding-inline: 9vw; scroll-padding-inline: 9vw; } /* #110: card=82vw なので余白=9vw */
}