/* ==========================================================================
   YFC 写真CMS — Front-end CSS（V15.1）
   写真が設定されている状態（.yfc-media-has-photo / .yfc-media-img / ギャラリー）を扱う追加専用ファイル。
   写真が未設定のページには該当classが出力されないため、V15.0.2までの表示は変わらない。
   例外：TOP PURPOSEのMobile（767px以下）3カード統一ルール（5. Responsive）は、写真の有無に関わらず適用する。
   既存のページCSS（yfc-front / yfc-court-rental / yfc-kosal / yfc-soccer-school）は変更せず、その後に読み込む。
   構成:
     1. 共通：画像・写真の位置
     2. TOP：Hero / PURPOSE / WHY / MAIN SERVICES / GALLERY / ACCESS
     3. （V15.2で廃止：個サル・サッカースクールのHeroは固定ページ共通Hero＝yfc-page-hero.cssへ移行）
     4. 共通パーツ：figure / 2枚組 / 写真グリッド
     5. Responsive（1023px / 767px）
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 共通：画像・写真の位置（管理画面の「写真の位置」= object-position）
   -------------------------------------------------------------------------- */
.yfc-media-img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

.yfc-media-pos--center { object-position: center center; }
.yfc-media-pos--left   { object-position: left center; }
.yfc-media-pos--right  { object-position: right center; }
.yfc-media-pos--top    { object-position: center top; }
.yfc-media-pos--bottom { object-position: center bottom; }

/* --------------------------------------------------------------------------
   2. TOP
   -------------------------------------------------------------------------- */

/* Hero：写真の上に既存の .yfc-hero__scrim（文字側だけ暗くするgradient）が重なる */
.yfc-hero__bg.yfc-media-has-photo {
	background: var(--yfc-green-deep);
}
.yfc-hero__bg.yfc-media-has-photo > .yfc-media-img {
	position: absolute;
	inset: 0;
}

/* PURPOSE：既存の .yfc-purpose__card-overlay（下側だけ暗くするgradient）が写真の上に重なる */
.yfc-purpose__card-bg.yfc-media-has-photo > .yfc-media-img {
	position: absolute;
	inset: 0;
}

/* WHY YFC */
.yfc-why__photo.yfc-media-has-photo {
	position: relative;
	overflow: hidden;
}
.yfc-why__photo.yfc-media-has-photo > .yfc-media-img {
	position: absolute;
	inset: 0;
}

/* MAIN SERVICES：既存の overlay / 見出しが写真の上に重なる */
.yfc-service-card__photo.yfc-media-has-photo > .yfc-media-img {
	position: absolute;
	inset: 0;
}

/* PHOTO GALLERY（既存のthumbnail枠：3:2 / 角丸 / overflow hidden） */
.yfc-gallery__item.yfc-media-has-photo {
	margin: 0;
	background: rgba(255, 255, 255, 0.06);
}

/* ACCESS */
.yfc-access__photo.yfc-media-has-photo {
	position: relative;
	overflow: hidden;
}
.yfc-access__photo.yfc-media-has-photo > .yfc-media-img {
	position: absolute;
	inset: 0;
}

/* --------------------------------------------------------------------------
   4. 共通パーツ
   -------------------------------------------------------------------------- */

/* 1枚の写真（角丸カード） */
.yfc-media-figure {
	margin: 0;
	aspect-ratio: 3 / 2;
	border-radius: 16px;
	overflow: hidden;
	background: var(--yfc-gray-100);
	box-shadow: 0 10px 28px rgba(14, 39, 33, 0.1);
}

/* 個サル：ABOUTの説明文の下 */
.yfc-ks .yfc-ks-about__photo {
	margin-top: 24px;
}

/* サッカースクール：一般 / 選抜エリートの写真（1〜2枚） */
.yfc-media-duo {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	margin: 0 0 48px;
}
.yfc-media-duo--single {
	grid-template-columns: minmax(0, 1fr);
}
.yfc-media-duo--single .yfc-media-figure {
	aspect-ratio: 3 / 1;
}
.yfc-ss .yfc-ss-photos--elite .yfc-media-figure {
	border: 1px solid rgba(234, 211, 86, 0.45);
	background: var(--yfc-green-deep);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25);
}

/* サービスページの写真グリッド（コートレンタル / 個サル / サッカースクール） */
.yfc-media-gallery {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.yfc-media-gallery__item {
	margin: 0;
	aspect-ratio: 4 / 3;
	border-radius: 14px;
	overflow: hidden;
	background: var(--yfc-gray-100);
}

/* --------------------------------------------------------------------------
   5. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
	.yfc-media-gallery {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 12px;
	}
}

@media (max-width: 767px) {
	/* PURPOSE（Mobile）：3サービスカードをCOURTの写真カード構成に統一する（V15.1 QA fix）。
	   yfc-front.css のMobile modifier（KOSAL = 写真帯 + 白body / ACADEMY = 4:1の薄いbanner）を
	   このセクション内だけ打ち消し、3枚とも「写真全面 + dark overlay + タイトル / 説明 / 英字 + 右下circle arrow」
	   の同一サイズ（16 / 8.7）にする。写真未設定でも既存の背景fallbackで同じ構造になる。Desktop / Tabletは対象外。 */
	.yfc-purpose .yfc-purpose__card--court,
	.yfc-purpose .yfc-purpose__card--kosal,
	.yfc-purpose .yfc-purpose__card--academy {
		display: block;
		aspect-ratio: 16 / 8.7;
		border: 0;
		background: var(--yfc-green-deep);
	}
	.yfc-purpose .yfc-purpose__card--kosal .yfc-purpose__card-bg {
		position: absolute;
		inset: 0;
		aspect-ratio: auto;
	}
	.yfc-purpose .yfc-purpose__card--kosal .yfc-purpose__card-overlay {
		display: block;
	}
	.yfc-purpose .yfc-purpose__card--kosal .yfc-purpose__card-arrow {
		display: flex;
	}
	.yfc-purpose .yfc-purpose__card--kosal .yfc-purpose__card-body,
	.yfc-purpose .yfc-purpose__card--academy .yfc-purpose__card-body {
		position: absolute;
		padding: 22px;
		color: var(--yfc-white);
		gap: 6px;
		justify-content: flex-start;
	}
	.yfc-purpose .yfc-purpose__card--kosal .yfc-purpose__card-copy,
	.yfc-purpose .yfc-purpose__card--academy .yfc-purpose__card-copy {
		display: block;
		font-size: 13px;
		line-height: 1.6;
	}
	.yfc-purpose .yfc-purpose__card--kosal .yfc-purpose__card-en,
	.yfc-purpose .yfc-purpose__card--academy .yfc-purpose__card-en {
		display: block;
	}
	.yfc-purpose .yfc-purpose__card--kosal .yfc-purpose__card-mobile-body {
		display: none;
	}
	/* タイトル・説明文を文節単位で折り返す（対応ブラウザのみ。非対応は通常の折り返し） */
	.yfc-purpose .yfc-purpose__card-body {
		word-break: auto-phrase;
	}
	.yfc-purpose .yfc-purpose__card--academy .yfc-purpose__card-ja {
		font-size: 18px;
	}
	.yfc-purpose .yfc-purpose__card--academy .yfc-purpose__card-arrow {
		right: 18px;
		bottom: 18px;
		width: 34px;
		height: 34px;
		transform: none;
	}
	.yfc-media-gallery {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}
	.yfc-media-gallery__item {
		border-radius: 10px;
	}
	.yfc-media-duo {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
		margin-bottom: 36px;
	}
	.yfc-media-duo .yfc-media-figure,
	.yfc-media-duo--single .yfc-media-figure {
		aspect-ratio: 3 / 2;
	}
}