/* Sound Collective — Elementor Loop Item カード用スタイル (#72)
 * Loop Item テンプレ内のミニショートコード出力(写真/役割)向け。
 * カード面(背景/角丸/余白)は Elementor コンテナ設定側が担う。ここは
 * native ウィジェットで表現できない部分(bg-image 写真ボックス等)だけを補う。 */

/* --- Instructor card (トップ Loop Carousel) --- */
.sc-loop-instr__pic {
	aspect-ratio: 1 / 1;
	width: 100%;
	background: #4d4d4d center/cover no-repeat;
	border-radius: 8px;
}
.sc-loop-instr__role,
.sc-loop-instr__role .elementor-shortcode {
	color: var(--sc-fg-secondary);
	font-weight: var(--sc-fw-medium);
	font-size: 14px;
	line-height: 1.4;
	margin: 0;
}
/* #115: 写真を包む shortcode ウィジェットの入れ子が flex コンテキストで高さ0へ潰れ、
 * aspect-ratio(1/1)の写真がカードから溢れて SP でカードが縦に潰れて見える不具合の対策
 * (Event card の .sc-event-card__media と同種)。写真は .sc-loop-instr 直下の shortcode
 * ウィジェット。入れ子を block 化して aspect-ratio 由来の高さをカードへ伝播させる。
 * Loop Carousel(swiper)は wrapper/slide を content 高で追従するため JS 変更は不要。 */
.sc-loop-instr > .elementor-widget-shortcode,
.sc-loop-instr > .elementor-widget-shortcode > .elementor-widget-container,
.sc-loop-instr > .elementor-widget-shortcode .elementor-shortcode { display: block; width: 100%; }

/* --- Event card (/events/ Loop Grid) --- */
/* #180: blur letterbox(sc-space-single__hero 方式)。前面 <img> を object-fit:contain で
 * 全体表示し、余白は同じ画像をぼかした __bg レイヤーで埋める(横長でも見切れない)。
 * 縦長ポスター(4:5=枠比)は img が枠を隙間無く満たすため従来と同じ見た目。 */
.sc-loop-event__thumb {
	/* #186: flex 中央寄せで前面 img を画像エリアの上下・左右中央へ。object-fit + height:100% は
	 * aspect-ratio 由来の枠高に対し % 高さが解決されず横長 img が上寄せになる(Chrome 実測)ため、
	 * 置換要素は max-width/max-height で枠内に収め flex で中央寄せする方式にする(Figma 4520-41511)。 */
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 333 / 416.25;
	background: #4d4d4d;
	border-radius: 8px;
	text-decoration: none;
}
.sc-loop-event__thumb-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-loop-event__thumb-img {
	position: relative;
	z-index: 1;
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
}
/* poster を包む Elementor ショートコードウィジェットの入れ子が、aspect-ratio 由来の
 * 高さを潰さないよう block 化(flex 入れ子で SP に高さ0へ潰れ本文と重なる不具合の対策)。 */
.sc-event-card__media,
.sc-event-card__media > .elementor-widget-shortcode,
.sc-event-card__media .elementor-widget-container,
.sc-event-card__media .elementor-shortcode { display: block; width: 100%; }

/* Elementor loop-grid item が sc-event-card の flex/枠を持てるよう最小限補正 */
.sc-loop-event__stats { display: flex; gap: 8px; width: 100%; padding-bottom: 8px; border-bottom: 1px solid #424446; }
.sc-loop-event__stats .sc-event-stats__item:nth-child(2) { text-align: center; }
.sc-loop-event__stats .sc-event-stats__item:nth-child(3) { text-align: right; }