/**
 * チームページ（page.php 内、スラッグ `チームプロフィール` の自動判定で描画）。
 * docs/sitemap.md 4-2 準拠。ABOUT / MEMBERS(#members) / JOIN の3セクション。
 * カードで囲わず、罫線の3階層で区切る（design-policy.md 2章）。
 *
 * @package goonies
 */

/* ABOUT/MEMBERS/JOINの間（第1階層）。見出しを24-28pxの2段構成に拡大したことで
   罫線が無くても階層が読み取れるため、罫線は引かない（design-policy.md 2章、
   2026-08-14改訂）。先頭のABOUTの上には要らないため除外する */
.team-section {
	margin-top: var(--space-tier-1);
}

.team-section:first-child {
	margin-top: 0;
}

/* ABOUT：2列リスト（ラベル左・値右） */
.team-about {
	margin: 0;
}

/* 項目間（第3階層） */
.team-about__row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: calc(var(--space-tier-3) / 2) 0;
	border-bottom: var(--rule-3);
}

.team-about__row:first-child {
	padding-top: 0;
}

.team-about__row:last-child {
	padding-bottom: 0;
	border-bottom: none;
}

.team-about__label {
	font-family: var(--f-body);
	font-size: var(--fs-body);
	color: var(--c-gray-50);
	margin: 0;
}

.team-about__value {
	font-family: var(--f-body);
	font-size: var(--fs-body);
	color: var(--c-ink);
	margin: 0;
	text-align: right;
}

/* MEMBERS：5列（写真/背番号/登録名/メインポジション/今季打率。docs/sitemap.md 4-2）。
   横スクロールしない（design-policy.md 10章の6列以内）。カードで囲わずヘアラインのみで区切る。
   リンクは選手名のみ（写真は装飾）だが、行のホバー演出は .members-list__item 全体に付ける */
.members-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* 選手行の間（第2階層） */
.members-list__item {
	display: grid;
	grid-template-columns: 48px 24px minmax(0, 1fr) 24px 44px;
	align-items: center;
	column-gap: 8px;
	padding: calc(var(--space-tier-2) / 2) 0;
	border-bottom: var(--rule-2);
	transition: background var(--duration-standard) var(--ease-standard);
}

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

.members-list__item:last-child {
	padding-bottom: 0;
	border-bottom: none;
}

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

.members-list__photo {
	display: block;
	width: 48px;
	height: 72px;
}

.members-list__photo-img {
	display: block;
	width: 48px;
	height: 72px;
	object-fit: cover;
	border-radius: var(--radius-none);
}

/* アイキャッチ未設定時のプレースホルダ。背番号のみ、淡いグレー
   （design-policy.md 7章: 背番号は淡くする） */
.members-list__photo-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 72px;
	font-family: var(--f-display);
	font-weight: var(--fw-display-regular);
	font-size: var(--fs-list-heading);
	color: var(--c-gray-25);
}

.members-list__number {
	font-family: var(--f-display);
	font-weight: var(--fw-display-regular);
	font-size: var(--fs-list-heading);
	color: var(--c-gray-25);
	text-align: right;
}

/* リンクは選手名のみ。常時下線は付けず、ホバー時のみ下線が左から伸びる
   （design-policy.md 9章: 180ms）。タップ領域44px以上を確保する */
a.members-list__name {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: var(--tap-min);
	min-width: 0;
	text-decoration: none;
}

a.members-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.members-list__name:hover::after {
	transform: scaleX(1);
}

.members-list__name {
	font-family: var(--f-display);
	font-weight: var(--fw-display-regular);
	font-size: var(--fs-list-heading);
	color: var(--c-ink);
	/* 省略記号は使わない。長い選手名（K.AKASAKA / Y.KATAMOTO / T.SUMITANI 等）も
	   省略されずに収まるよう、列幅を広げたうえで折り返しを許容する
	   （overflow-wrapは inc/stats/render.php の同種の名前セルと同じ方針） */
	white-space: normal;
	overflow-wrap: anywhere;
	min-width: 0;
}

.members-list__position {
	font-family: var(--f-body);
	font-size: var(--fs-annotation);
	color: var(--c-gray-50);
	text-align: center;
}

.members-list__avg {
	font-family: var(--f-display);
	font-weight: var(--fw-display-regular);
	font-size: var(--fs-table-number);
	letter-spacing: var(--ls-number);
	font-variant-numeric: tabular-nums;
	color: var(--c-ink);
	text-align: right;
}

/* 打率の1位のみ赤にする（design-policy.md 3章） */
.members-list__avg--leader {
	color: var(--c-accent);
	font-weight: var(--fw-display-medium);
}

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

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

.team-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;
}