/* =============================================================
   CAMMA theme — events-archive.css
   イベント一覧ページ (category.php) 専用のレイアウト差分。
   Figma: イベント一覧 (fileKey hq2oZ2NymsckMJQirVNzJJ, node 1:1004, 1920x2458)

   リスト1件分の見た目(日付+タイトル)は assets/css/events.css の
   .events__item / .events__date / .events__title をそのまま再利用する
   (template-parts/event-list-item.php がフロントページ Events セクションと
   共有しているマークアップ)。ここには一覧ページ固有のレイアウト差分だけを書く。

   px→rem は全て ÷10 (1920px設計 = 192rem)。PC専用のためメディアクエリなし。
   ============================================================= */

/* -------------------------------------------------------------
   ページ全体 (.events-archive)
   ヘッダー(.l-header, position:fixed, 高さ10rem)がこのページにも重なる想定
   のため、トップページの .hero / .events と同様、上部に余白は作らない。
   投稿件数はページネーション設定によって変わる(検証時3件/本番10件、
   0件の場合もある)ため、高さは固定せず内容に応じて伸びる min-height にする。
   ------------------------------------------------------------- */
.events-archive {
	position: relative;
	width: 100%;
	min-height: 60rem;
	padding-top: 25rem;
	padding-bottom: 16rem;
	background-color: var(--color-green);
}

/* 「Events」見出し。トップページ Events セクションの .events__label と
   同じ意匠(フォント・サイズ・色)で、位置だけこのページ固有(Figma実測値)。 */
.events-archive__heading {
	position: absolute;
	top: 16.191rem;
	left: 6rem;
	width: 10.8rem;
	font-family: var(--font-en);
	font-size: 30px;
	line-height: 1;
	color: var(--color-white);
	white-space: nowrap;
}

/* -------------------------------------------------------------
   リスト
   幅(88.7rem)は Figma実測値(w=887)をそのまま採用。192rem幅の中央
   ((192-88.7)/2 ≈ 51.65rem)にほぼ一致するため、絶対座標の左オフセットではなく
   margin:auto の中央揃えで組んでいる。
   件数によって高さが変わり、後に続くページネーション/フッターが常にリストの
   下に来る必要があるため、トップページの .events__list(絶対配置)とは異なり
   通常フローに乗せている(ここが「一覧ページ固有のレイアウト差分」)。
   最初の罫線位置(Figma y=250)はページ上端からの margin-top で再現している
   (見出しは絶対配置で文書フローに影響しないため、この値がそのまま使える)。
   1件ずつの罫線・余白(.events__item)は assets/css/events.css を参照。
   ------------------------------------------------------------- */
.events-archive__list {
	position: relative;
	width: 88.7rem;
	margin: 0 auto 0;
	/* リスト最後の罫線。各 .events__item の border-top と対になり末尾を閉じる
	   (トップページの .events__list と同じ考え方)。 */
	border-bottom: 0.1rem solid var(--color-white);
}

/* -------------------------------------------------------------
   ページネーション
   Figma にデザインが無いため新規に作成。中央揃え / "Prev 数字 Next" 形式 /
   現在ページは下線で表現。数字は --font-en(Cinzel)・白文字。
   罫線を使わず、サイトの意匠に合わせて広めの余白(margin-top)だけで
   リストと区切っている。
   ------------------------------------------------------------- */
.events-archive__pagination {
	margin-top: 8rem;
}

.events-archive__pagination ul {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 3rem;
}

.events-archive__pagination .page-numbers {
	display: inline-block;
	font-family: var(--font-en);
	font-size: 18px;
	line-height: 1;
	padding-bottom: 0.6rem;
	border-bottom: 0.1rem solid transparent;
	color: var(--color-white);
}

.events-archive__pagination a.page-numbers:hover {
	border-bottom-color: var(--color-white);
}

/* 現在ページは下線で表現。 */
.events-archive__pagination .page-numbers.current {
	border-bottom-color: var(--color-white);
}

/* -------------------------------------------------------------
   0件のときの表示(レイアウトが崩れないための最低限のスタイル)
   ------------------------------------------------------------- */
.events-archive__empty {
	position: relative;
	width: 88.7rem;
	margin: 25rem auto 0;
	font-family: var(--font-ja);
	font-size: 16px;
	line-height: 1;
	text-align: center;
	color: var(--color-white);
}

/* =============================================================
   SP (max-width: 920px)
   Figma: SPイベント一覧 (fileKey hq2oZ2NymsckMJQirVNzJJ, node 20:706, 390x3439)
   ストーリー/プライバシーの SP と同じ考え方: レイアウトは rem(base.css の
   calc(100vw/39) に追従)、フォントは「タブレット(768-920)/スマホ(≤767)」の2段px。
   見出し x36/y86.9、リスト x36/幅318(単一カラム)、195pxピッチ。
   リスト1件(.events__date/.events__title)の見た目は events.css の SP を共有する
   (日付 Inter 12px / タイトル 14px lh24 ls1.4 は events.css SP と一致)。ただし
   SP設計のタイトルは Zen Kaku Gothic New(ゴシック)なので、フォントだけを
   「一覧スコープ」で上書きする(フロントページ Events セクションには影響させない)。
   ============================================================= */
@media (max-width: 920px) {

	/* リスト開始 y=200 = 20rem(見出しは絶対配置でこの余白内に収まる)。 */
	.events-archive {
		padding-top: 20rem;
	}

	/* 見出し「Events」: SP Figma x=36 / y=86.91。 */
	.events-archive__heading {
		top: 8.691rem;
		left: 3.6rem;
		width: auto;
	}

	/* リスト・0件メッセージ: SP Figma x=36 / width=318 → 幅31.8rem・中央寄せ。 */
	.events-archive__list,
	.events-archive__empty {
		width: 31.8rem;
	}

	/* SP設計のリストタイトルはゴシック。一覧のみ上書きし、events.css 共有の
	   明朝(var(--font-ja))を打ち消す(フロントページ Events はそのまま明朝)。
	   font-size 等(14px/lh24/ls1.4)は events.css の SP をそのまま使う。 */
	.events-archive__list .events__title {
		font-family: var(--font-ja);
	}
}

/* SP フォント: タブレット (768–920px)。スマホpx × 1.35。倍率調整はこのブロックの値のみ。 */
@media (min-width: 768px) and (max-width: 920px) {

	.events-archive__heading {
		font-size: 40.5px; /* 30px × 1.35 = 40.5 */
	}

	/* ページネーション(Figma SP には無いが、複数ページ時に巨大化しないよう) */
	.events-archive__pagination .page-numbers {
		font-size: 21.5px; /* 16px × 1.35 = 21.6 */
	}
}

/* SP フォント: スマホ (≤767px)。390pxデザインの実px。 */
@media (max-width: 767px) {

	.events-archive__heading {
		font-size: 30px;
	}

	.events-archive__pagination .page-numbers {
		font-size: 16px;
	}
}