/**
 * トップページ専用スタイル（front-page.php）。
 * カードで囲わず、罫線の3階層（design-policy.md 2章）で区切る。
 * セクション間は第1階層（罫線なし、78pxの余白とセクション見出しで区切る）、
 * リスト内の項目間は第2・第3階層（--rule-2 / --rule-3）。
 * team-profile.css の .team-section、stats.css の .player-section も同じトークンを使う。
 *
 * @package goonies
 */

/* .section-label は base.css へ移動（player.php など他ページからも使うため） */

/* セクション間（第1階層）。HERO写真の直後を含め、.home-section同士の
   すべての境界に一律で効かせる。見出しを24-28pxの2段構成に拡大したことで
   罫線が無くても階層が読み取れるため、罫線は引かない（design-policy.md 2章、
   2026-08-14改訂。旧仕様は線の前56px・後32pxに配分していた） */
.home-section {
	margin-top: var(--space-tier-1);
}

/* HERO：見出しテキストは廃止し、写真のみをヘッダー直下に置く（2026-08-15。
   モバイル画像に「SINCE 2012」を焼き込み済みのため文字は不要になった。
   代わりに視覚的に隠したh1をfront-page.phpに置き、SEO・アクセシビリティ用の
   見出しだけは残す。フッターにOSAKA, SINCE 2012を移設（design-policy.md 6章）） */

/* 写真エリア（全幅ブリード。100vw + 負のマージンで .site-main__inner の600px制約から抜ける）。
   margin-topは.site-main__innerのpadding-top（--space-section）を打ち消す負のマージン。
   HEROが写真のみになり、ヘッダー直下に画像が来る必要があるため（2026-08-15） */
.hero-photo {
	position: relative;
	width: 100vw;
	left: 50%;
	margin-left: -50vw;
	margin-top: calc(-1 * var(--space-section));
	background: var(--c-plane);
	overflow: hidden;
}

/* モバイル（600px未満）は縦長9:16（assets/img/hero-mobile.jpg）、
   PC（600px以上）は横長16:9（hero-wide.jpg、<picture>のsourceで切替）。
   1200px以上は画像を1200pxで中央表示、1200px未満は全幅のまま表示する。
   width/height属性はimg（=モバイル画像）の実寸に合わせているため、
   PC用画像に切り替わるとHTML属性上の比率とは一致しなくなるが、
   このaspect-ratioがCSS読み込み後の表示比率を確定させるため実害はない。
   object-fit: coverは比率がずれた場合に画像が歪んで伸縮しないための保険（2026-08-15） */
.hero-photo__img {
	display: block;
	width: 100%;
	max-width: 1200px;
	height: auto;
	aspect-ratio: 9 / 16;
	object-fit: cover;
	margin: 0 auto;
}

@media (min-width: 601px) {
	.hero-photo__img {
		aspect-ratio: 16 / 9;
	}
}

.hero-photo__gradient {
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(20, 20, 20, 0.55), transparent 55%);
	pointer-events: none;
}

/* UPCOMING：カードにせず、ヘアライン区切りの行として並べる。次戦情報はここが唯一の担当
   （design-policy.md 8章: HERO写真の上には文字を重ねない） */
.upcoming-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* 試合と試合の間（第2階層） */
.upcoming-list__item {
	padding: calc(var(--space-tier-2) / 2) 0;
	border-bottom: var(--rule-2);
}

.upcoming-list__item:first-child {
	padding-top: 0;
}

/* 最後の試合の下は次セクションの第1階層の線に任せる。
   両方出ると二重線に見えるため（design-policy.md 2章） */
.upcoming-list__item:last-child {
	padding-bottom: 0;
	border-bottom: none;
}

.upcoming-list__date {
	font-family: var(--f-display);
	font-weight: var(--fw-display-medium);
	font-size: var(--fs-list-heading);
	letter-spacing: var(--ls-number);
	font-variant-numeric: tabular-nums;
	color: var(--c-ink);
	margin: 0 0 4px;
}

.upcoming-list__name {
	font-family: var(--f-body);
	font-size: var(--fs-annotation);
	color: var(--c-gray-50);
	margin: 0 0 2px;
}

.upcoming-list__opponent {
	font-family: var(--f-body);
	font-size: var(--fs-body);
	color: var(--c-ink);
	margin: 0;
}

.upcoming-list__item .player-personal {
	margin-top: 8px;
}

/* 開始時刻・球場など、1試合内の項目間（第3階層）は
   assets/css/stats.css の .player-personal__row（他ページと共通）に一本化した */

/* LEADERS：カードにせず、背番号を先頭にした行として並べる（design-policy.md 7章） */
.leaders-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* 選手行の間（第2階層） */
.leaders-list__item {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: calc(var(--space-tier-2) / 2) 0;
	border-bottom: var(--rule-2);
	transition: background var(--duration-standard) var(--ease-standard);
}

.leaders-list__item:first-child {
	padding-top: 0;
}

/* 最後の選手行の下は次セクションの第1階層の線に任せる。
   両方出ると二重線に見えるため（design-policy.md 2章） */
.leaders-list__item:last-child {
	padding-bottom: 0;
	border-bottom: none;
}

/* リスト行ホバー：背景をごく淡く（design-policy.md 9章） */
.leaders-list__item:hover {
	background: var(--c-hover);
}

.leaders-list__person {
	display: flex;
	align-items: baseline;
	gap: 10px;
	min-width: 0;
}

.leaders-list__number {
	font-family: var(--f-display);
	font-weight: var(--fw-display-regular);
	font-size: var(--fs-list-heading);
	color: var(--c-gray-25);
	flex: none;
}

.leaders-list__name {
	font-family: var(--f-display);
	font-weight: var(--fw-display-regular);
	font-size: var(--fs-list-heading);
	color: var(--c-ink);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* 選手ページが存在する場合のみリンクになる（front-page.phpでgoonies_player_get_page_url_by_name()
   が空文字を返せば素のspanのまま）。常時下線は付けず、ホバー時のみ下線が左から伸びる
   （design-policy.md 9章、180ms）。タップ領域44px以上を確保する */
a.leaders-list__name {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: var(--tap-min);
	text-decoration: none;
}

a.leaders-list__name::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 10px;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--duration-underline) var(--ease-standard);
}

a.leaders-list__name:hover::after {
	transform: scaleX(1);
}

.leaders-list__metric {
	display: flex;
	align-items: baseline;
	gap: 8px;
	flex: none;
}

.leaders-list__metric-label {
	font-family: var(--f-display);
	font-weight: var(--fw-display-regular);
	font-size: var(--fs-annotation);
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	color: var(--c-gray-50);
}

.leaders-list__value {
	font-family: var(--f-display);
	font-weight: var(--fw-display-medium);
	font-size: var(--fs-number-secondary);
	letter-spacing: var(--ls-number);
	font-variant-numeric: tabular-nums;
	color: var(--c-ink);
}

/* 赤は打率のみ（design-policy.md 3章: 赤は1位であることの意味だけ。1画面2〜3箇所まで） */
.leaders-list__value--leader {
	color: var(--c-accent);
}

.leaders-list__empty {
	color: var(--c-gray-70);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	margin: 0;
}

/* JOIN */
.home-join__text {
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--c-ink);
	margin: 0 0 12px;
}

.home-join__link {
	font-family: var(--f-body);
	font-size: var(--fs-body);
	color: var(--c-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
	display: inline-flex;
	align-items: center;
	padding: 4px 0;
}

/* LATEST GAME。動画facadeは assets/css/stats.css の .youtube-facade を流用する
   （UPCOMINGと同じ日付/対戦相手の組み方に合わせる） */
.latest-game__date {
	font-family: var(--f-display);
	font-weight: var(--fw-display-medium);
	font-size: var(--fs-list-heading);
	letter-spacing: var(--ls-number);
	font-variant-numeric: tabular-nums;
	color: var(--c-ink);
	margin: 0 0 4px;
}

.latest-game__name {
	font-family: var(--f-body);
	font-size: var(--fs-annotation);
	color: var(--c-gray-50);
	margin: 0 0 2px;
}

.latest-game__opponent {
	font-family: var(--f-body);
	font-size: var(--fs-body);
	color: var(--c-ink);
	margin: 0 0 8px;
}

.latest-game__score {
	display: flex;
	align-items: baseline;
	gap: 10px;
	font-family: var(--f-display);
	font-weight: var(--fw-display-medium);
	font-size: var(--fs-number-secondary);
	letter-spacing: var(--ls-number);
	font-variant-numeric: tabular-nums;
	color: var(--c-ink);
	margin: 0;
}

.latest-game__result {
	font-family: var(--f-body);
	font-weight: var(--fw-body-regular);
	font-size: var(--fs-body);
	color: var(--c-gray-70);
}

/* LATEST GAME / THIS SEASON / LEADERS 右下の詳細ページへの導線。
   design-policy.md 4章のセクションラベルと同じ体裁（Archivo・大文字・9px・字間0.2em・グレー50） */
.section-link-row {
	text-align: right;
	margin: 12px 0 0;
}

/* 常時下線は付けず、ホバー時のみ下線が左から伸びる（design-policy.md 9章、180ms）。
   タップ領域44px以上は min-height ではなく padding で確保する。min-heightだと
   align-items: centerで生まれる余白がリンクの下に丸ごと残り、次セクションの罫線との間に
   意図しない広い空きができるため。padding-bottom分をmargin-bottomで打ち消し、
   後続要素から見た占有量を実際のテキスト行の高さだけに戻す（同10章） */
.section-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	line-height: 1;
	padding: 18px 0;
	margin-bottom: -18px;
	font-family: var(--f-display);
	font-weight: var(--fw-display-regular);
	font-size: var(--fs-section-label);
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	color: var(--c-gray-50);
	text-decoration: none;
}

.section-link::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 16px;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--duration-underline) var(--ease-standard);
}

.section-link:hover::after {
	transform: scaleX(1);
}