/* =============================================================
   CAMMA theme — events.css
   フロントページ Events セクション
   Figma: 1:1502 "Event" (1920x1259 / ページ絶対 Y 6873-8132)
   px→rem は全て ÷10 (1920px設計 = 192rem)。座標はセクション内ローカル
   (Figma絶対Yから 6873 を引いた値)を rem 換算している。
   ============================================================= */

/* -------------------------------------------------------------
   セクション背景
   #44644c はこのセクション専用の深緑色。base.css の :root トークンに
   無い色のため、ここに直接指定する(共通化するほど他セクションで
   使われていないため追加しない)。
   3件固定の絶対配置にせず、リストは通常フロー(ul/li)で組んでいるため
   高さは 125.9rem を基準としつつ内容に応じて伸びられるよう min-height にする。
   ------------------------------------------------------------- */
.events {
	position: relative;
	width: 100%;
	min-height: 125.9rem;
	background-color: #44644c;
	scroll-margin-top: 10rem; /* .l-header が position:fixed / height:10rem のため */
	/* 旧実装は label/list/more を個別に position:absolute で置いていたが、px固定
	   タイトルが狭幅で折返して list が伸び、絶対配置の more と縦に重なって崩れた。
	   label(左) | main(list+more)(右) のFlex 2カラムに変更し、more は list の下に
	   流す(重ならない)。SPは下部メディアクエリで block 縦積みに戻す。 */
	display: flex;
	align-items: flex-start;
	padding: 30rem 0 0 6rem; /* 旧:list/label top≈30rem, label left 6rem */
	box-sizing: border-box;
}

.events__label {
	flex-shrink: 0;
	width: 45.6rem; /* 旧:list left51.6rem − label left6rem。main を51.6remから始める */
	font-family: var(--font-en);
	font-size: 30px;
	line-height: 1;
	color: var(--color-white);
	white-space: nowrap;
}

/* list + more の右カラム(events.php で ul と a をラップ)。flex-columnで list の
   下に more を流すことで、タイトル折返しで list が伸びても more と重ならない。 */
.events__main {
	flex-shrink: 0;
	width: 88.7rem;
	display: flex;
	flex-direction: column;
}

/* -------------------------------------------------------------
   リスト
   絶対配置なのはリスト全体の位置のみ。中の1件ずつ(li)は通常フローに
   乗せ、罫線は border-top/border-bottom で表現することで、件数が
   変わったりタイトルが折り返して1件の高さが伸びても後続要素が
   自然に追従する。
   ------------------------------------------------------------- */
.events__list {
	/* 幅・位置は親(.events__main)のflowで決まる(旧:absolute left51.6/top30/width88.7)。
	   align-items:stretch(既定)で main幅88.7remいっぱいになる。 */
	/* リスト最後の罫線(Figma上は1:327)。各 li の border-top と対になり、
	   末尾を閉じる1本として ul 側に持たせている。 */
	border-bottom: 0.1rem solid var(--color-white);
}

.events__item {
	/* 各行の上罫線(Figma上の 1:363 / 1:351 / 1:339 に相当)。
	   1920px基準では 0.1rem = 1px ちょうどになり、headless Chrome で
	   1920px幅レンダリングして実際に消えないことを確認済み(layout.css の
	   .l-footer__divider / .c-booknow と同じ 0.1rem 運用に合わせている)。 */
	border-top: 0.1rem solid var(--color-white);
	/* 罫線どうしの間隔(120px)を「上下パディング60pxずつ」で表現。
	   日付(12px+下マージン15px=27px)+タイトル行(line-height 36px)で
	   実コンテンツはおよそ60px前後になるため、Figmaの1件60px+余白60pxの
	   リズムに近似する。タイトルが2行に折り返しても罫線がその分下に
	   ずれるだけでレイアウトは崩れない。 */
	padding: 6rem 0;
}

.events__date {
	display: block;
	font-family: var(--font-sans); /* Figma指定どおり Inter */
	font-size: 12px;
	line-height: 1;
	margin-bottom: 1.5rem;
	color: var(--color-white);
}

.events__title {
	display: block;
	font-family: var(--font-ja);
	font-weight: 500;
	font-size: 20px;
	line-height: 36px;
	letter-spacing: 2px;
	color: var(--color-white);
}

/* -------------------------------------------------------------
   右下のボタン(一覧へ)
   Figma上は背景がセクションと同色(#44644c)で実質的に不可視、かつ
   内包コンポーネントに文字の実体が無かったため、ここでは透明な
   クリック領域として実装している(値だけ Figma のヒットボックスに合わせる)。
   ------------------------------------------------------------- */
.events__more {
	align-self: center; /* main(list列)の中央 = list の中央下に配置 */
	margin-top: 6.7rem; /* 旧:top92rem − list下端85.3rem のギャップ */
	width: auto;
	height: 3rem;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-en);
	font-size: 14px;
	letter-spacing: 1px;
	color: var(--color-white);
	gap: 0.5rem;
}
/* =============================================================
   SP (max-width: 920px)
   Figma: SPトップ全体 (fileKey hq2oZ2NymsckMJQirVNzJJ, node 20:25) の
   events 部(背景 node 20:26, 390x973 / ページ絶対 Y 3465-4438)。
   get_metadata / get_design_context で座標・フォントサイズを実測済み。
   リスト1件(.events__item以下)のマークアップはevent-list-item.phpを
   PCと共有しているため、ここではCSSの上書きのみで対応する。
   ============================================================= */
@media (max-width: 920px) {

	.events {
		display: block; /* PCのflexを解除して縦積み(label→main)に戻す */
		min-height: 97.3rem;
		padding: 9.69rem 3.6rem 0; /* 旧:label top9.69rem/left3.6rem を padding で表現 */
		/* SPのヘッダー高さは9rem(layout.css参照。PCは10rem)のため、
		   #events へのアンカー時のスクロールオフセットもSPの実高さに合わせる。 */
		scroll-margin-top: 9rem;
	}

	/* 見出し (node 20:380, x=36 y=3561.9→セクション内96.91)。
	   font-size は get_design_context で 30px=3rem と確認 — PCの3remと
	   同じ数値だが、SPのスケール式(1rem=10px@390px)ではPCの3rem
	   (1rem=10px@1920px)よりも画面幅に対して約4.9倍大きく表示されるため、
	   数値はそのままに位置だけ上書きすれば「PCより大きめ」の見え方になる。 */
	.events__label {
		width: auto; /* PCの45.6remを解除(SPは縦積みで全幅不要) */
	}

	.events__main {
		width: auto; /* PCの88.7remを解除(全幅) */
		margin-top: 8.8rem; /* 旧:list top21.5 − label下端(9.69+3) のギャップ */
	}

	/* リスト全体 (node 20:378, x=36 y=3680, 3件×195px間隔で実測一致)。
	   1件ぶんのパディング(6rem 0)・罫線(border-top/bottom 0.1rem)は
	   計算上SPでもほぼ同じ比率(60px上+77px本文+58px下≒195pxピッチ)で
	   成立するため無改修。リスト自体の位置とサイズだけをSP座標に上書きする。 */
	.events__list {
		width: auto; /* 親mainいっぱい(旧:absolute left3.6/top21.5/width31.8) */
	}

	.events__date {
		margin-bottom: 1.4rem;
	}

	/* .events__title の font-size/line-height/letter-spacing は
	   ファイル末尾のSPフォントブロック(2段のメディアクエリ)に集約した。 */

	/* 右下の「Show More ↗」ボタン (node 20:328)。リスト列の右端に
	   フラッシュ(right: 390-354=36px=3.6rem) / top: 4325-3465=860px=86rem。
	   PC側の文言("More")はFigma上に実体テキストが無く暫定表示のままのため
	   書き換えない(PCの見た目に影響させない)。SPでは ::before/::after で
	   "Show "+矢印だけを追加する。矢印(Figma上はベクターの↗)は
	   Unicode の ↗ (U+2197) で代替。 */
	.events__more {
		align-self: flex-end; /* 右寄せ(PCのalign-self:centerを解除) */
		margin-top: 13.1rem; /* 旧:more top86 − list下端72.9 のギャップ */
		width: auto;
		height: auto;
		display: flex;
		/* letter-spacing: normal は PC の 0.1rem(rem指定)を打ち消すための固定値
		   指定であり、rem指定ではないためここに残す(削除するとPCのremが
		   復活してしまう)。font-sizeはSPフォントブロックに集約。 */
		letter-spacing: normal;
	}
}

/* =============================================================
   SP フォント: タブレット/スマホ2段の固定px化
   理由はlayout.css冒頭の同名コメント参照。倍率調整はタブレットブロックの
   数値のみ。.events__label / .events__date はSP側にfont-size上書きが元々
   無かった(PCのrem値をそのまま継承)ため、PCの数値をスマホpxの基準にした。
   ============================================================= */

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

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

	.events__date {
		font-size: 16px; /* 12px × 1.35 = 16.2 */
	}

	.events__title {
		font-size: 19px; /* 14px × 1.35 = 18.9 */
		line-height: 32px; /* 24px × 1.35 = 32.4 */
		letter-spacing: 2px; /* 1.4px × 1.35 = 1.89 */
	}

	.events__more {
		font-size: 22px; /* 16px × 1.35 = 21.6 */
	}
}

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

	.events__label {
		font-size: 30px;
	}

	.events__date {
		font-size: 12px;
	}

	.events__title {
		font-size: 14px;
		line-height: 24px;
		letter-spacing: 1.4px;
	}

	.events__more {
		font-size: 16px;
	}
}