/* ============================================================
 * Sound Collective — Events 一覧 / 詳細ページ 専用CSS
 * Figma "/events" 一覧  PC: 1798:6911 / SP: 1106:10129
 *       "/events/:id" 詳細 PC: 1801:19069 / SP: 1106:10194
 * デザイントークンは sc-design-tokens.css の :root を利用。
 * クラスは sc-event-* / sc-events で衝突回避。
 * ============================================================ */

.sc-events, .sc-event-single {
	--sc-ev-margin: 80px;             /* PC ページ左右マージン */
	--sc-ev-card-border: #353739;     /* CardClass の枠線(Figma border/border-dim) */
	background: var(--sc-bg);
	color: var(--sc-fg);
	font-family: var(--sc-font);
	font-weight: var(--sc-fw-medium);
	line-height: var(--sc-lh);
}
.sc-events *, .sc-events *::before, .sc-events *::after,
.sc-event-single *, .sc-event-single *::before, .sc-event-single *::after { box-sizing: border-box; }
.sc-events h1, .sc-events h2, .sc-events h3, .sc-events p, .sc-events dl, .sc-events dd,
.sc-event-single h1, .sc-event-single h2, .sc-event-single p, .sc-event-single dl, .sc-event-single dd { margin: 0; }

/* ===== 共通: Date / Starts / Ends 統計 ===== */
.sc-event-stats { display: flex; gap: 8px; width: 100%; }
.sc-event-stats__item { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: 4px; justify-content: center; }
.sc-event-stats__item:nth-child(2) { text-align: center; }
.sc-event-stats__item:nth-child(3) { text-align: right; }
.sc-event-stats__item dt { font-size: 12px; font-weight: var(--sc-fw-medium); color: var(--sc-fg-secondary); }
.sc-event-stats__item dd { font-size: 16px; font-weight: var(--sc-fw-bold); color: var(--sc-fg); }

/* ===== 共通: カスタムチェックボックス ===== */
.sc-event-check { display: flex; align-items: center; gap: 8px; cursor: pointer; min-height: 30px; }
.sc-event-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.sc-event-check__box {
	flex: 0 0 auto; width: 20px; height: 20px; border-radius: 4px;
	border: 2px solid var(--sc-border); background: transparent; position: relative;
	transition: background-color .12s ease, border-color .12s ease;
}
.sc-event-check input:checked ~ .sc-event-check__box { background: var(--sc-primary); border-color: var(--sc-primary); }
.sc-event-check input:checked ~ .sc-event-check__box::after {
	content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px;
	border: solid var(--sc-white); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.sc-event-check input:focus-visible ~ .sc-event-check__box { outline: 2px solid var(--sc-primary); outline-offset: 2px; }
.sc-event-check__label { flex: 1 1 auto; font-size: 14px; font-weight: var(--sc-fw-medium); color: var(--sc-fg); }
.sc-event-check__count { flex: 0 0 auto; font-size: 14px; font-weight: var(--sc-fw-medium); color: var(--sc-fg-secondary); }

/* ============================== Title Area ============================== */
.sc-event-hero {
	position: relative; overflow: hidden;
	display: flex; flex-direction: column; align-items: center;
	padding: 88px 16px 40px;
}
.sc-event-hero__bg {
	position: absolute; inset: -40px 0; z-index: 0;
	background: center/cover no-repeat;
	filter: blur(4px); mix-blend-mode: lighten; opacity: .3; pointer-events: none;
}
.sc-event-hero__inner {
	position: relative; z-index: 1;
	display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
	max-width: 900px; width: 100%;
}
.sc-event-hero__title { font-size: 40px; font-weight: var(--sc-fw-bold); line-height: 1.2; color: var(--sc-white); }
.sc-event-hero__sub { font-size: 16px; font-weight: var(--sc-fw-medium); line-height: 1.4; color: var(--sc-fg); }

/* ============================== TabGroup ============================== */
.sc-event-tabs {
	display: flex; gap: 0; max-width: 1440px; margin-inline: auto;
	padding: 16px var(--sc-ev-margin) 0; border-bottom: 1px solid var(--sc-border-dim);
}
.sc-event-tab {
	flex: 1 1 0; min-height: 48px; padding: 8px 12px;
	border: none; background: transparent; cursor: pointer; position: relative;
	font-family: var(--sc-font); font-size: 16px; font-weight: var(--sc-fw-bold); line-height: 1.4;
	color: var(--sc-fg-secondary); border-radius: 4px 4px 0 0;
}
.sc-event-tab:hover { color: var(--sc-primary); background: var(--sc-bg-hover-strong); }
.sc-event-tab.is-active { color: var(--sc-primary); }
.sc-event-tab.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--sc-primary); }

/* ============================== Body (sidebar + main) ============================== */
.sc-event-body { display: flex; align-items: flex-start; max-width: 1440px; margin-inline: auto; }

/* ---- Filter sidebar ---- */
.sc-event-sidebar {
	flex: 0 0 320px; width: 320px; align-self: stretch;
	display: flex; flex-direction: column; gap: 16px;
	padding: 32px 16px 32px var(--sc-ev-margin);
}
.sc-event-sidebar__head { display: flex; align-items: center; gap: 12px; }
.sc-event-results { font-size: 16px; font-weight: var(--sc-fw-medium); color: var(--sc-fg); }
.sc-event-results b { font-weight: var(--sc-fw-bold); }
.sc-event-clear {
	margin-left: auto; border: 1px solid var(--sc-border); background: transparent; cursor: pointer;
	border-radius: var(--sc-radius-pill); padding: 4px 12px; min-height: 28px;
	font-family: var(--sc-font); font-size: 12px; font-weight: var(--sc-fw-bold); color: var(--sc-fg);
}
.sc-event-clear:hover { background: var(--sc-bg-hover-strong); }
.sc-event-drawer-close { display: none; }

.sc-event-search { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px;
	background: var(--sc-bg-hover-strong); border: 1px solid var(--sc-border); border-radius: 8px; }
.sc-event-search i { font-size: 14px; color: var(--sc-fg-secondary); }
.sc-event-search input { flex: 1 1 auto; min-width: 0; border: none; background: transparent; color: var(--sc-fg);
	font-family: var(--sc-font); font-size: 14px; font-weight: var(--sc-fw-medium); }
.sc-event-search input:focus { outline: none; }
.sc-event-search input::placeholder { color: var(--sc-fg-secondary); }

.sc-event-facet { display: flex; flex-direction: column; gap: 4px; }
/* ★ 親 `.sc-event-facet` を前置きして (0,2,0)。:21 の `.sc-events p / .sc-event-single p { margin: 0 }`
 *   (0,1,1) が単体クラス (0,1,0) の margin-bottom を食っていた(= #192 と同型。実効は親の gap:4px のみで
 *   意図の 12px にならない)。root(.sc-events / .sc-event-single)ではなく親を使うのは、どちらの
 *   ルート配下でも効かせるため。 */
.sc-event-facet .sc-event-facet__title { font-size: 14px; font-weight: var(--sc-fw-bold); color: var(--sc-fg); margin-bottom: 8px; }

/* ---- Main ---- */
.sc-event-main { flex: 1 1 0; min-width: 0; padding: 32px var(--sc-ev-margin) 40px 64px; }

/* Filter Container */
.sc-event-controls { display: flex; flex-direction: column; gap: 20px; margin-bottom: 24px; }
.sc-event-controls__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
/* #163-1: height:36px + 上下 padding 無しで catalog の .sc-cat-* 系(sc-catalog.css L163-166)に揃える。
   min-height + 上下 8px の実効高さ超過を解消。SP 用 .sc-event-filterbtn にも効くが想定通り。 */
.sc-event-sort, .sc-event-filterbtn {
	display: inline-flex; align-items: center; gap: 8px; position: relative;
	height: 36px; padding: 0 14px; cursor: pointer;
	border: 1px solid var(--sc-border); border-radius: var(--sc-radius-pill); background: var(--sc-bg-hover-strong);
	font-family: var(--sc-font); font-size: 14px; font-weight: var(--sc-fw-bold); color: var(--sc-fg);
}
.sc-event-sort:hover, .sc-event-filterbtn:hover { background: rgba(255,255,255,.16); }
.sc-event-filterbtn__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sc-primary); }
.sc-event-sort__select {
	appearance: none; -webkit-appearance: none; -moz-appearance: none;
	border: none; background: transparent; outline: none; cursor: pointer;
	color: var(--sc-fg); font-family: var(--sc-font); font-size: 14px; font-weight: var(--sc-fw-bold);
	padding-right: 2px;
}
.sc-event-sort__select option { color: #0b0d27; }

/* PC (issue #32): サイドバーが常時表示のため、SP専用の Filter ドロワーボタンは冗長 → 非表示。
   SP/タブレット(<=1024px)側は下の @media で再表示する。 */
@media (min-width: 1025px) {
	.sc-event-filterbtn { display: none; }
}

.sc-event-activechips { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.sc-event-chip {
	display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
	min-height: 24px; padding: 2px 8px; border-radius: 54px; background: var(--sc-bg-hover-strong);
	font-size: 14px; font-weight: var(--sc-fw-bold); color: var(--sc-fg); white-space: nowrap;
}
.sc-event-chip i { font-size: 11px; color: var(--sc-fg-secondary); }
.sc-event-chip:hover i { color: var(--sc-fg); }

/* Card Group */
.sc-event-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.sc-event-empty { grid-column: 1 / -1; padding: 40px 0; text-align: center; color: var(--sc-fg-secondary); font-size: 16px; }

/* ============================== CardClass ============================== */
.sc-event-card {
	display: flex; flex-direction: column; overflow: hidden;
	background: var(--sc-bg-bright); border: 1px solid var(--sc-ev-card-border); border-radius: var(--sc-radius-card);
}
.sc-event-card[hidden] { display: none; }
.sc-event-card__media { padding: 8px; }
.sc-event-card__thumb {
	display: block; width: 100%; aspect-ratio: 333 / 416.25; border-radius: 8px;
	background: #4d4d4d center/cover no-repeat; text-decoration: none;
}
/* #163-3: body を伸縮させ CTA の margin-top:auto をカード下端に効かせる(catalog .sc-cat-card__body 準拠)。
   ※ event カードは Elementor Loop Item。body 要素は .e-con.e-flex(specificity 0,2,0)を持ち、Elementor は
   `flex: var(--flex-grow) var(--flex-shrink) var(--flex-basis)` かつ `.e-con.e-flex{--flex-grow:0}` を出す。
   よって `flex:1 1 auto`(0,1,0)も `.sc-event-card__body{--flex-grow:1}`(0,1,0)も負けて flex-grow:0 に潰れる。
   body は常に e-flex/e-con を持つため、.sc-event-card__body.e-flex.e-con(0,3,0)で --flex-grow:1 を上書きして伸ばす
   (!important 不要。disc2 等 PHP 描画カードは Elementor 非依存なので通常の flex 指定で足りる)。 */
.sc-event-card__body { display: flex; flex-direction: column; gap: 16px; padding: 16px; flex: 1 1 auto; }
.sc-event-card__body.e-flex.e-con { --flex-grow: 1; }
.sc-event-card__info { display: flex; flex-direction: column; gap: 4px; }
/* #163-2: タイトルは 2 行でクランプ(可変高さによるカード高さ/CTA 位置ズレを解消)。 */
.sc-event-card__title {
	padding-bottom: 4px; font-size: 24px; font-weight: var(--sc-fw-bold); line-height: 1.2; color: var(--sc-fg);
	display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sc-event-card__info .sc-event-stats { padding-bottom: 8px; border-bottom: 1px solid #424446; }
.sc-event-card__price { font-size: 20px; font-weight: var(--sc-fw-bold); line-height: 1.2; color: var(--sc-fg); }
.sc-event-card__cta {
	margin-top: auto; /* #163-3: カード下端に固定して CTA の縦位置を揃える(catalog 準拠) */
	align-self: center; display: inline-flex; align-items: center; justify-content: center;
	min-height: 36px; 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-event-card__cta:hover { color: var(--sc-white); background-image: linear-gradient(rgba(255,255,255,.10), rgba(255,255,255,.10)); }

/* ============================== Pagination ============================== */
.sc-event-pagination { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 40px; }
.sc-event-page {
	display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 10px;
	border: none; border-radius: var(--sc-radius-pill); cursor: pointer;
	background: var(--sc-bg-hover-strong); color: var(--sc-fg);
	font-family: var(--sc-font); font-size: 14px; font-weight: var(--sc-fw-bold);
}
.sc-event-page:hover { background: rgba(255,255,255,.16); }
.sc-event-page.is-active { background: var(--sc-primary); color: var(--sc-white); }

/* SP フィルタドロワー用スクリム/背景(PC 非表示) */
.sc-event-scrim { display: none; }

/* ============================================================
 * 詳細ページ (/events/:id)
 * ============================================================ */
.sc-event-single__inner {
	display: grid; grid-template-columns: 518px minmax(0, 1fr); column-gap: 24px; row-gap: 40px;
	align-items: start; max-width: 1440px; margin-inline: auto; padding: 80px var(--sc-ev-margin);
}
/* Dillon 指定(2026-07-27 Ricky 経由): ギャラリーがフライヤー(ポスター)と重なる問題の修正。
 *
 * 症状: `.sc-event-single__extra`(recap + gallery)は `grid-column: 1 / -1` の全幅で、
 *   マークアップ順では RSVP(「This event has passed」)より後ろにある。にもかかわらず
 *   **sticky なポスターがグリッド領域(行1〜2)で止まらず**、スクロールすると全幅の
 *   ギャラリーがポスターの下へ潜り込んで重なっていた(実測: 縦 648px 重複)。
 *
 * 対策: sticky を **グリッド項目(`__media`)から内側の `__poster` へ移す**。
 *   sticky の制約は「包含ブロック = 親要素」なので、内側に移せば `__media` の高さで
 *   確実に止まる。ただし `.sc-event-single__inner` は `align-items: start` なので
 *   `__media` は既定でコンテンツ高さに縮み sticky が効かなくなる →
 *   **`align-self: stretch` で行1〜2の高さまで伸ばす**のが要点(ここを外すと sticky が無効化する)。
 *   これで RSVP 下端でポスターが止まり、ギャラリーは重ならずその下に出る。 */
.sc-event-single__media { grid-column: 1; grid-row: 1 / span 2; align-self: stretch; }
/* #186: 詳細ヒーローも card と同方式の blur letterbox。前面 img を object-fit:contain +
 * object-position:center で全体表示&上下中央、余白は同画像の blur レイヤー(-bg)で埋める。
 * 縦長 4:5(=枠比)は img が枠を隙間無く満たし従来と同一。単一ソースの内側マークアップは
 * PHP の sc_event_letterbox_inner() が出力。 */
/* #224: sticky を __poster から __mediasticky へ移設し、Share ボタンも一緒に追従させる。
 * #191 の「全幅ギャラリーが sticky ポスターに潜り込む」修正は、sticky の包含ブロックが
 * 依然 align-self:stretch の `__media` なので維持される(行1〜2の高さで止まる)。 */
.sc-event-single__mediasticky {
	position: sticky; top: 80px;
	display: flex; flex-direction: column; gap: 8px;
}
/* #224: Share はフライヤー直下・8px ギャップ・右下寄せ */
.sc-event-single__sharerow { display: flex; justify-content: flex-end; }
.sc-event-single__poster {
	/* sticky は `__media` からここへ移設(上のコメント参照)。sticky も positioned なので
	 * `-bg`(absolute inset:0)の包含ブロックは従来どおり成立する。 */
	position: relative; overflow: hidden;
	display: flex; align-items: center; justify-content: center;
	width: 100%; aspect-ratio: 4 / 5; border-radius: 8px;
	background: #4d4d4d;
}
.sc-event-single__poster-bg {
	position: absolute; inset: 0; z-index: 0;
	background: center/cover no-repeat; /* background-image は inline style */
	filter: blur(18px) brightness(.6);
	transform: scale(1.12); /* blur のエッジ透けを防ぐ */
	pointer-events: none;
}
.sc-event-single__poster-img {
	/* #186: card と同方式。flex 中央寄せ + max-width/max-height で枠内に全体表示&上下中央。 */
	position: relative; z-index: 1;
	display: block; max-width: 100%; max-height: 100%; width: auto; height: auto;
}
.sc-event-single__head { grid-column: 2; grid-row: 1; padding-left: 24px; display: flex; flex-direction: column; gap: 40px; }
.sc-event-single__details { display: flex; flex-direction: column; gap: 16px; width: 100%; }
.sc-event-single__topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px;
	font-size: 16px; font-weight: var(--sc-fw-medium); color: var(--sc-fg-secondary); }
.sc-event-single__back { color: var(--sc-fg-secondary); text-decoration: none; }
.sc-event-single__back:hover { color: var(--sc-fg); }
.sc-event-single__share { border: none; background: transparent; cursor: pointer; color: var(--sc-fg-secondary);
	font-family: var(--sc-font); font-size: 16px; font-weight: var(--sc-fw-medium); }
.sc-event-single__share:hover { color: var(--sc-fg); }
.sc-event-single__titles { display: flex; flex-direction: column; gap: 4px; }
.sc-event-single__title { font-size: 40px; font-weight: var(--sc-fw-bold); line-height: 1.2; color: var(--sc-fg); }
.sc-event-single__sub { font-size: 18px; font-weight: var(--sc-fw-medium); line-height: 1.4; color: var(--sc-fg-secondary); }
/* #105: 説明文は HTML(複数段落等)を含み得るので段落間隔・リスト等を整える */
.sc-event-single__sub > :first-child { margin-top: 0; }
.sc-event-single__sub > :last-child { margin-bottom: 0; }
.sc-event-single__sub p { margin: 0 0 12px; }
.sc-event-single__sub ul, .sc-event-single__sub ol { margin: 0 0 12px; padding-left: 1.4em; }
.sc-event-single__sub li { margin: 0 0 4px; }
.sc-event-single__sub a { color: var(--sc-fg); text-decoration: underline; }

/* RSVP フォームカード */
.sc-event-rsvp {
	grid-column: 2; grid-row: 2; margin-left: 24px;
	display: flex; flex-direction: column; gap: 24px; overflow: hidden;
	background: var(--sc-bg-bright); border-radius: var(--sc-radius-card); padding: 32px 23px;
}
.sc-event-rsvp__title { font-size: 24px; font-weight: var(--sc-fw-bold); line-height: 1.2; text-align: center; color: var(--sc-fg); }
.sc-event-form { display: flex; flex-direction: column; gap: 8px; }
.sc-event-form__fields { display: flex; flex-direction: column; gap: 12px; }
.sc-event-field { display: flex; flex-direction: column; gap: 4px; }
.sc-event-field > label, .sc-event-field__label { font-size: 14px; font-weight: var(--sc-fw-medium); color: var(--sc-fg); }
.sc-event-field input {
	width: 100%; min-height: 48px; padding: 8px 12px;
	background: var(--sc-bg-hover-strong); border: 1px solid #424446; border-radius: 8px;
	color: var(--sc-fg); font-family: var(--sc-font); font-size: 14px; line-height: 1.5;
}
.sc-event-field input::placeholder { color: var(--sc-fg-secondary); }
.sc-event-field input:focus { outline: none; border-color: var(--sc-primary); }

.sc-event-interests { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 12px; margin-top: 4px; }
.sc-event-interests .sc-event-check:nth-child(3), .sc-event-interests .sc-event-check:nth-child(5) { grid-column: span 2; }

.sc-event-form__consent { font-size: 14px; font-weight: var(--sc-fw-medium); line-height: 1.4; color: var(--sc-white); }

/* reCAPTCHA プレースホルダー */
.sc-event-recaptcha {
	display: flex; align-items: center; gap: 12px; width: 302px; max-width: 100%; height: 76px; padding: 0 12px;
	background: var(--sc-white); border: 1px solid #d3d3d3; border-radius: 3px; box-shadow: 0 0 4px 1px rgba(0,0,0,.08);
}
.sc-event-recaptcha__box { width: 28px; height: 28px; border: 2px solid #444746; border-radius: 2px; background: #fff; flex: 0 0 auto; }
.sc-event-recaptcha__label { flex: 1 1 auto; font-size: 14px; font-weight: var(--sc-fw-medium); color: #0b0d27; }
.sc-event-recaptcha__brand { display: flex; flex-direction: column; align-items: center; gap: 4px; color: #555; }
.sc-event-recaptcha__brand i { font-size: 22px; color: #4285f4; }
.sc-event-recaptcha__brand small { font-size: 10px; }

.sc-event-rsvp__submit {
	width: 100%; min-height: 44px; margin-top: 8px; padding: 7px 12px;
	border: none; border-radius: var(--sc-radius-pill); cursor: pointer;
	background: var(--sc-primary); color: var(--sc-white);
	font-family: var(--sc-font); font-size: 18px; font-weight: var(--sc-fw-bold); line-height: 1.2;
}
.sc-event-rsvp__submit:hover { background-image: linear-gradient(rgba(255,255,255,.10), rgba(255,255,255,.10)); }

/* past イベント: 「This event has passed」表示(フォームなし・旧サイト踏襲) */
.sc-event-rsvp--passed { align-items: center; justify-content: center; min-height: 160px; }
.sc-event-rsvp__passed { font-size: 18px; font-weight: var(--sc-fw-bold); color: var(--sc-fg-secondary); text-align: center; margin: 0; }

/* ============================================================
 * #105: CF7 出力(.wpcf7-form)を静的フォームの見た目へ寄せる。
 *   CF7 は <p> ラップ / <span.wpcf7-form-control-wrap> / use_label_element の
 *   チェックボックスリストを出力するため、余白リセット + フィールド様式を再現する。
 * ============================================================ */
.sc-event-rsvp--cf7 .wpcf7 { margin: 0; }
.sc-event-rsvp--cf7 .wpcf7-form { display: flex; flex-direction: column; gap: 12px; }
/* DTX の動的 hidden だけを含む段落 / hidden ラップは詰める(余分な余白を出さない) */
.sc-event-rsvp--cf7 .wpcf7-form > p:has(> .wpcf7-form-control-wrap > input[type="hidden"]) { display: none; }
.sc-event-rsvp--cf7 .wpcf7-form-control-wrap:has(> input[type="hidden"]) { display: none; }

/* 各段落 = フィールド行。既定は consent テキスト様式、ラベル/入力を持つ段落で上書き */
.sc-event-rsvp--cf7 .wpcf7-form > p {
	margin: 0; font-size: 14px; font-weight: var(--sc-fw-medium); line-height: 1.4; color: var(--sc-white);
}
/* ラベル付き段落(text/email/tel/checkbox)は縦積み */
.sc-event-rsvp--cf7 .wpcf7-form > p:has(label),
.sc-event-rsvp--cf7 .wpcf7-form > p:has(input:not([type="hidden"]):not([type="submit"])) {
	display: flex; flex-direction: column; gap: 4px; color: var(--sc-fg);
}
.sc-event-rsvp--cf7 .wpcf7-form > p > label { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.sc-event-rsvp--cf7 .wpcf7-form label b { font-size: 14px; font-weight: var(--sc-fw-medium); color: var(--sc-fg); }

/* 単一行入力(text/email/tel) */
.sc-event-rsvp--cf7 .wpcf7-form input.wpcf7-text,
.sc-event-rsvp--cf7 .wpcf7-form input[type="text"],
.sc-event-rsvp--cf7 .wpcf7-form input[type="email"],
.sc-event-rsvp--cf7 .wpcf7-form input[type="tel"] {
	width: 100%; min-height: 48px; padding: 8px 12px;
	background: var(--sc-bg-hover-strong); border: 1px solid #424446; border-radius: 8px;
	color: var(--sc-fg); font-family: var(--sc-font); font-size: 14px; line-height: 1.5;
}
/* #263: text/email/tel 以外の型と textarea / select も明色にする(上と同じ取りこぼし)。 */
.sc-event-rsvp--cf7 .wpcf7-form input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
.sc-event-rsvp--cf7 .wpcf7-form textarea,
.sc-event-rsvp--cf7 .wpcf7-form select { color: var(--sc-fg); }
.sc-event-rsvp--cf7 .wpcf7-form input[type="date"],
.sc-event-rsvp--cf7 .wpcf7-form input[type="time"],
.sc-event-rsvp--cf7 .wpcf7-form input[type="datetime-local"] { color-scheme: dark; }
/* #261 と同根: label 内の <br> が余分な flex 行になる。 */
.sc-event-rsvp--cf7 .wpcf7-form > p > label > br { display: none; }
.sc-event-rsvp--cf7 .wpcf7-form input::placeholder,
.sc-event-rsvp--cf7 .wpcf7-form textarea::placeholder { color: var(--sc-fg-secondary); }
.sc-event-rsvp--cf7 .wpcf7-form input:focus { outline: none; border-color: var(--sc-primary); }
.sc-event-rsvp--cf7 .wpcf7-form-control-wrap { display: block; }

/* Primary Musical Interest = 4 列グリッド(静的 .sc-event-interests 準拠) */
.sc-event-rsvp--cf7 .wpcf7-checkbox { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 12px; margin-top: 4px; }
.sc-event-rsvp--cf7 .wpcf7-list-item { margin: 0; }
/* 長いラベル(Serato Studio=3番目 / Drums/Percussion=5番目)は 2 列ぶん(静的版準拠) */
.sc-event-rsvp--cf7 .wpcf7-checkbox .wpcf7-list-item:nth-child(3),
.sc-event-rsvp--cf7 .wpcf7-checkbox .wpcf7-list-item:nth-child(5) { grid-column: span 2; }
.sc-event-rsvp--cf7 .wpcf7-list-item label { display: flex; align-items: center; gap: 8px; cursor: pointer; margin: 0; }
.sc-event-rsvp--cf7 .wpcf7-list-item input[type="checkbox"] { width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--sc-primary); }
.sc-event-rsvp--cf7 .wpcf7-list-item-label { font-size: 14px; font-weight: var(--sc-fw-medium); color: var(--sc-fg); }

/* 送信ボタン(静的 .sc-event-rsvp__submit 準拠) */
.sc-event-rsvp--cf7 .wpcf7-form input.wpcf7-submit {
	width: 100%; min-height: 44px; margin-top: 8px; padding: 7px 12px;
	border: none; border-radius: var(--sc-radius-pill); cursor: pointer;
	background: var(--sc-primary); color: var(--sc-white);
	font-family: var(--sc-font); font-size: 18px; font-weight: var(--sc-fw-bold); line-height: 1.2;
}
.sc-event-rsvp--cf7 .wpcf7-form input.wpcf7-submit:hover { background-image: linear-gradient(rgba(255,255,255,.10), rgba(255,255,255,.10)); }

/* reCAPTCHA(v2 ウィジェットは既定見た目)— 段落の余白のみ調整 */
.sc-event-rsvp--cf7 .wpcf7-form .g-recaptcha { margin-top: 4px; }

/* バリデーション / 応答メッセージ */
.sc-event-rsvp--cf7 .wpcf7-not-valid-tip { color: #ff6b6b; font-size: 13px; margin-top: 4px; }
.sc-event-rsvp--cf7 .wpcf7-form input.wpcf7-not-valid { border-color: #ff6b6b; }
.sc-event-rsvp--cf7 .wpcf7-response-output {
	margin: 4px 0 0; padding: 10px 12px; border-radius: 8px; font-size: 14px; line-height: 1.4;
}
.sc-event-rsvp--cf7 .wpcf7-spinner { margin: 0 8px; }

/* ============================================================
 * タブレット (≤1200px) — グリッド 2 列
 * ============================================================ */
@media (max-width: 1200px) {
	.sc-events, .sc-event-single { --sc-ev-margin: 40px; }
	.sc-event-grid { grid-template-columns: repeat(2, 1fr); }
	.sc-event-single__inner { grid-template-columns: 420px minmax(0, 1fr); }
	.sc-event-single__media { top: 40px; }
}

/* ============================================================
 * SP (Figma 1106:10129 / 1106:10194) — ≤1024px
 * ============================================================ */
@media (max-width: 1024px) {
	.sc-events, .sc-event-single { --sc-ev-margin: 16px; overflow-x: clip; }

	.sc-event-hero { padding: 56px 16px 32px; }
	.sc-event-hero__title { font-size: 32px; }

	.sc-event-tabs { padding: 16px 16px 0; }
	.sc-event-tab { font-size: 14px; padding: 8px 4px; }

	/* サイドバーはドロワー化(左からスライドイン) */
	.sc-event-body { display: block; }
	.sc-event-sidebar {
		position: fixed; top: 0; bottom: 0; left: 0; z-index: 200;
		width: min(320px, 86vw); flex-basis: auto; padding: 24px 20px;
		background: var(--sc-bg-bright); overflow-y: auto;
		transform: translateX(-100%); transition: transform .25s ease;
		box-shadow: 0 0 40px rgba(0,0,0,.5);
	}
	.sc-events--filters-open .sc-event-sidebar { transform: none; }
	.sc-event-drawer-close {
		display: inline-flex; align-items: center; justify-content: center; margin-left: auto;
		width: 32px; height: 32px; border: none; background: transparent; cursor: pointer; color: var(--sc-fg); font-size: 18px;
	}
	.sc-event-sidebar__head .sc-event-clear { margin-left: 0; }
	.sc-event-scrim {
		position: fixed; inset: 0; z-index: 190; background: rgba(0,0,0,.5);
		-webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
	}
	.sc-events--filters-open .sc-event-scrim { display: block; }

	.sc-event-main { padding: 20px 16px 40px; }
	.sc-event-grid { grid-template-columns: 1fr; }

	/* 詳細 SP(Figma 1796-21876): topbar(See all Events / Share) → ポスター → タイトル/統計 → フォーム
	   の縦積み。#189: 従来は「タイトル/統計 → ポスター」だったのを Figma 順=「ポスター → タイトル/統計」に
	   入替。topbar と details は head の中に入れ子なので、SP では head を display:contents にして両者を inner の
	   直下 grid 項目へ昇格させ、その間に media(ポスター)を order で差し込む(PC/タブレットは現状維持)。
	   head/rsvp は PC 用の grid-row を明示指定したままだと order が無効化される(explicit position が
	   order より優先される)ため、grid-row を auto に戻して order 依存の自動配置にする。 */
	/* ★ SP 横幅崩れの修正(2026-07-27 報告・#189 由来): `1fr` は `minmax(auto, 1fr)` と等価で、
	 *   `auto` の最小値は **min-content**。よって中身(RSVP の CF7 フォーム等)の min-content 幅が
	 *   ビューポートより広いと **トラックが container を超えて広がる**。
	 *   実測(390px ビューポート): トラックが **469px** に膨らみ、`.sc-event-single__media` /
	 *   `__title` が 469px、`.sc-event-rsvp--cf7` が **501px** になって画面外へはみ出していた
	 *   (祖先の overflow-x:hidden で横スクロールは出ないため「切り落とされる」形で気づきにくい)。
	 *   `minmax(0, 1fr)` にすると最小値が 0 になりトラックが container 幅で確定する
	 *   → 実測 469px → **358px**(=390 - 左右 padding 16px×2)、RSVP も 390px に収まる。
	 *   ※ 単一カラムの SP グリッドで `1fr` を使うときは常にこの罠がある。 */
	.sc-event-single__inner { grid-template-columns: minmax(0, 1fr); padding: 16px 16px 0; row-gap: 0; }
	.sc-event-single__head { display: contents; }
	.sc-event-single__topbar { order: 1; }
	/* #164-2: ポスター上下に余白(Figma SP)。RSVP フォーム側は意図的に余白 0 のため media 側で確保。 */
	.sc-event-single__media { grid-column: 1; grid-row: auto; position: static; order: 2; margin-top: 16px; margin-bottom: 16px; }
	.sc-event-single__details { order: 3; padding-left: 0; }
	/* RSVP フォームは Figma SP で画面端まで届くフルブリード(角丸なし)のセクション。
	   親の左右パディング分を負のマージンで打ち消して端まで伸ばす。ポスターとの間は空けない(フォーム自身の
	   32px 上パディングが視覚的な余白になる)。 */
	.sc-event-rsvp { grid-column: 1; grid-row: auto; order: 4; margin: 0 calc(-1 * var(--sc-ev-margin)); border-radius: 0; }
	.sc-event-single__title { font-size: 32px; }
	.sc-event-single__poster { max-width: 420px; margin-inline: auto; }
}

@media (max-width: 560px) {
	.sc-event-controls__row { flex-wrap: wrap; }
}

/* ============================================================
 * #191 (Dillon feedback): 詳細ページの追加要素
 *   #2 recap 動画 / #3 workshop CTA / #4 追加画像ギャラリー
 * ============================================================ */

/* recap 動画 + ギャラリーの全幅コンテナ(PC は 2 カラム grid を跨ぐ / 値があるときのみ出力) */
.sc-event-single__extra { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 40px; }

/* #2 recap 動画(Vimeo/YouTube oembed を 16:9 で埋め込み) */
.sc-event-recap { display: flex; flex-direction: column; gap: 16px; }
.sc-event-recap__title { font-size: 24px; font-weight: var(--sc-fw-bold); line-height: 1.2; color: var(--sc-fg); }
.sc-event-recap__frame { position: relative; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: var(--sc-bg-bright); }
.sc-event-recap__frame iframe, .sc-event-recap__frame video, .sc-event-recap__frame embed, .sc-event-recap__frame object {
	position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}
.sc-event-recap__link { color: var(--sc-fg); text-decoration: underline; }

/* #4 追加画像 / flyer ギャラリー */
.sc-event-gallery { display: flex; flex-direction: column; gap: 16px; }
.sc-event-gallery__title { font-size: 24px; font-weight: var(--sc-fw-bold); line-height: 1.2; color: var(--sc-fg); }
.sc-event-gallery__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.sc-event-gallery__item { display: block; border-radius: 12px; overflow: hidden; background: var(--sc-bg-bright); }
.sc-event-gallery__img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

/* #3 workshop CTA(通常 RSVP フォームの代わりに course URL へ誘導) */
.sc-event-rsvp--workshop { text-align: center; gap: 16px; }
.sc-event-rsvp__note { font-size: 14px; line-height: 1.5; color: var(--sc-fg-secondary); margin: 0; }
.sc-event-workshop-cta { text-decoration: none; text-align: center; }

@media (max-width: 1024px) {
	/* SP: 追加要素は RSVP(order 4)の後に配置 */
	.sc-event-single__extra { order: 5; gap: 24px; margin-top: 24px; }
	.sc-event-gallery__grid { grid-template-columns: repeat(2, 1fr); }
	/* SP は1カラム縦積み(#189)なので追従は不要。PC 用の sticky を明示的に解除して
	 * ポスターが画面に貼り付くのを防ぐ。 */
	.sc-event-single__mediasticky { position: relative; top: auto; } /* #224: sticky 解除は移設先へ */
}

/* ============================================================
 * #271 (b) [sc_event_checkin_link] — /event-check-in/ の Loop Item 用
 *   ボタンの**見た目は既存の単一ソース .sc-event-card__cta を再利用**する(ショートコードが
 *   既定でそのクラスを付ける)。ここで足すのは Loop Item の入れ子対策だけ。
 *   ⚠️ Elementor の Shortcode ウィジェットは入れ子(.elementor-widget-container /
 *   .elementor-shortcode)が inline のことがあり、flex コンテキストで高さが伝播せず潰れる(#115)。
 *   ウィジェット側のクラスは先方(Dillon さん)が触る領域なので、:has() で「中に .sc-ev-checkin が
 *   ある shortcode ウィジェット」だけを block 化する(sc-loop.css の .sc-loop-instr と同じ対策)。
 *   margin-top:auto は**flex の子である外側ウィジェット**に置く。.sc-event-card__cta 側の
 *   margin-top:auto / align-self:center は <a> が直接の flex 子でなくなるため効かないので、
 *   カード下端固定と中央寄せはここで担保する(差し替え前のボタンウィジェットと同じ位置)。
 * ============================================================ */
.elementor-widget-shortcode:has(.sc-ev-checkin) { display: block; width: 100%; margin-top: auto; }
.elementor-widget-shortcode:has(.sc-ev-checkin) > .elementor-widget-container,
.elementor-widget-shortcode:has(.sc-ev-checkin) .elementor-shortcode { display: block; width: 100%; }
.sc-ev-checkin { display: block; width: 100%; text-align: center; }