@charset "UTF-8";
/*
 * news.css
 * ニュース一覧・詳細ページ専用スタイル
 *
 * @package ds-basketballclub-2026
 */

/* =============================================
   ニュース一覧セクション
   ============================================= */

/* ─── CATEGORYフィルター ─── */
.news-archive__filter {
	margin-bottom: 48px;
}

.news-archive__filter-label {
	font-family: var(--font-en);
	font-size: 40px; /* INSTAGRAMタイトルと同サイズ */
	font-weight: 800;
	color: var(--color-black);
	letter-spacing: 0.02em;
	margin-bottom: 16px;
}

.news-archive__select-wrap {
	position: relative;
	display: inline-block;
	min-width: 320px;
}

/* セレクトボックス本体 */
.news-archive__select {
	width: 100%;
	appearance: none;
	-webkit-appearance: none;
	background-color: var(--color-white);
	border: 1px solid var(--color-black);
	border-radius: 8px;
	padding: 16px 56px 16px 28px;
	font-family: var(--font-ja);
	font-size: 18px;
	font-weight: 400;
	color: var(--color-black);
	cursor: pointer;
	outline: none;
	transition: border-color 0.2s ease;
}

@media (hover: hover) {
	.news-archive__select:hover {
		border-color: var(--color-gray-2);
	}
}
.news-archive__select:focus {
	border-color: var(--color-gray-2);
}

/* 矢印アイコン（疑似要素） */
.news-archive__select-wrap::after {
	content: '';
	position: absolute;
	right: 24px;
	top: 50%;
	width: 10px;
	height: 10px;
	border-right: 2px solid var(--color-black);
	border-bottom: 2px solid var(--color-black);
	transform: translateY(-65%) rotate(45deg);
	pointer-events: none;
}

/* ─── 投稿リスト（TOPページ news-list と同フォント構成） ─── */
.news-archive__list {
	list-style: none;
}

.news-archive__item {
	border-bottom: 1px solid var(--color-black);
}

.news-archive__link {
	display: grid;
	grid-template-columns: 1fr 40px;
	grid-template-rows: auto auto;
	align-items: center;
	gap: 8px 16px;
	padding: 34px 0;
	width: 100%;
	transition: background-color 0.2s ease;
}

@media (hover: hover) {
	.news-archive__link:hover {
		background-color: var(--color-accent);
	}

	.news-archive__link:hover .news-archive__cat {
		border-color: var(--color-black);
		color: var(--color-black);
	}
}

/* 日付 + カテゴリバッジ（1行横並び） */
.news-archive__meta {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 16px;
	grid-column: 1;
	grid-row: 1;
}

/* TOPの news-list__date と同構成 */
.news-archive__date {
	font-family: var(--font-en);
	font-size: 26px;
	font-weight: 600;
	color: var(--color-gray-3);
	white-space: nowrap;
}

/* TOPの news-list__cat と同構成 */
.news-archive__cat {
	display: inline-flex;
	align-items: center;
	padding: 0px 12px;
	border: 1px solid var(--color-black);
	border-radius: 100px;
	font-family: var(--font-ja);
	font-size: 18px;
	font-weight: 900;
	color: var(--color-black);
	white-space: nowrap;
	transition: border-color 0.2s ease, color 0.2s ease;
}

/* タイトル（font-size / font-weight / line-height は .list-title に委譲） */
.news-archive__post-title {
	grid-column: 1;
	grid-row: 2;
	font-family: var(--font-ja);
	color: var(--color-black);
	margin: 0;
}


/* TOPの news-list__arrow と同構成 */
.news-archive__arrow {
	color: var(--color-black);
	justify-self: end;
	grid-column: 2;
	grid-row: 1 / 3;
	align-self: center;
}

.news-archive__arrow svg {
	width: 24px;
	height: 24px;
}

/* ─── 投稿なし ─── */
.news-archive__empty {
	padding: 60px 0;
	text-align: center;
	font-family: var(--font-ja);
	font-size: var(--text-base-size);
	color: var(--color-gray-2);
}


/* =============================================
   レスポンシブ（タブレット 〜1024px）
   ============================================= */
@media screen and (max-width: 1024px) {
	.news-archive__filter-label {
		font-size: 32px;
	}

	.news-archive__link {
		gap: 0 20px;
	}

	.news-archive__meta {
		min-width: 160px;
	}

	.news-archive__date {
		font-size: 18px;
	}
}

/* =============================================
   レスポンシブ（SP 〜768px）
   ============================================= */
@media screen and (max-width: 768px) {
	.news-archive__filter-label {
		font-size: 24px;
	}

	.news-archive__filter {
		margin-bottom: 32px;
	}

	.news-archive__select-wrap {
		width: 100%;
		min-width: 0;
	}

	.news-archive__select {
		font-size: 15px;
		padding: 14px 48px 14px 20px;
	}

	/* SP: グリッドを縦積みに変更・矢印非表示 */
	.news-archive__link {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto;
		gap: 8px 0;
		padding: 20px 0;
	}

	.news-archive__meta {
		grid-column: 1;
		grid-row: 1;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		gap: 8px;
		min-width: 0;
	}

	.news-archive__date {
		font-family: var(--font-ja);
		font-size: 15px;
		font-weight: 700;
		color: var(--color-gray-3);
	}

	.news-archive__cat {
		font-size: var(--text-sm-size);
		font-weight: 900;
	}

	.news-archive__arrow {
		display: none;
	}

	/* .news-archive__post-title の font-size は .list-title（base.css）で制御 */
}