/* =============================================================
   CAMMA theme — single-event.css
   イベント詳細ページ (single.php) 専用スタイル
   Figma: イベント詳細 (fileKey hq2oZ2NymsckMJQirVNzJJ, node 1:881, 1920x3489)

   Figma のモック本文(ダミー英文「one day hair salon CAMMA」等 + 風景写真3枚)は
   本文エリアの「スタイリング見本」に過ぎず、実際の投稿本文は the_content() が
   出す Gutenberg ブロック(実データはほぼ全てフライヤー画像1枚の wp:image。
   投稿1868等で確認済み)。そのため本ファイルは「モックの見た目をそのまま
   再現する」のではなく、「the_content() が出しうる一般的なブロック(画像・
   段落・見出し・リスト・リンク)を深緑地に白文字で読めるようにする」ことを
   目的にスタイリングしている。

   .entry-content の白文字スタイルが他ページ(固定ページ等、index.php の
   フォールバックが出す素の .entry-content)に漏れないよう、すべてのルールを
   .single-event 配下にスコープしている(裸の .entry-content / p / img 等の
   タグセレクタは一切使わない)。

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

/* -------------------------------------------------------------
   ページ全体 (.single-event)
   ヘッダー(.l-header, position:fixed, 高さ10rem)がこのページにも重なる想定
   のため、トップページ・イベント一覧と同様、上部に余白は作らない。
   投稿本文の長さは投稿ごとに大きく異なる(フライヤー画像1枚だけの投稿が
   ほとんど)ため、Figmaの1920x3489(モック3枚の風景写真込み)をそのまま
   高さに使わず、events-archive.css の .events-archive と同じ考え方
   (min-height + padding-bottomで内容に応じて伸ばす)を採用している。
   ------------------------------------------------------------- */
.single-event {
	position: relative;
	width: 100%;
	min-height: 60rem;
	padding-top: 25rem;
	padding-bottom: 16rem;
	background-color: var(--color-green);
	color: var(--color-white);
}

/* -------------------------------------------------------------
   「Events」見出し
   イベント一覧ページの .events-archive__heading (events-archive.css) と
   位置・フォント・サイズ・色が完全に同一。events-archive.css 自体は編集
   しない方針のため、既存クラスを参照(共有)せず同じ値をここに複製している
   (events-archive.css が .events__label の値を複製しているのと同じ手法)。
   <h2> 等の見出しタグにはしていない: このページの本来の見出しは投稿タイトル
   (.single-event__title, <h1>)であり、h1より前にh2相当の見出しを置くと
   見出し階層が不自然になるため <p> を使っている。
   ------------------------------------------------------------- */
.single-event__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;
}

/* -------------------------------------------------------------
   本文カラム (.single-event__body = <article>)
   幅・開始位置は Figma実測(x=517 / width=887 → 幅88.7rem、y=250 →
   margin-top 25rem)。イベント一覧の .events-archive__list と同じ数値・
   同じ考え方(絶対配置ではなく margin:auto の中央揃え + margin-topで開始位置)。
   ------------------------------------------------------------- */
.single-event__body {
	position: relative;
	width: 88.7rem;
	margin: 0 auto 0;
}

.single-event__date {
	display: block;
	font-family: var(--font-sans);
	font-size: 12px;
	line-height: 1;
	color: var(--color-white);
}

.single-event__title {
	margin-top: 3rem;
	font-family: var(--font-ja);
	font-size: 20px;
	line-height: 28px;
	letter-spacing: 2px;
	color: var(--color-white);
}

/* -------------------------------------------------------------
   投稿本文 (.single-event__content = the_content() の出力先)
   マークアップ側で class="entry-content single-event__content" の2つを
   併記しているが、スタイルは全てこの .single-event__content 側のセレクタで
   当てているため、他ページの素の .entry-content(固定ページの index.php
   フォールバック等)には一切影響しない。

   padding-top(margin-topではない)でタイトルとの間隔を確保しているのは、
   本文の最初の要素(実データのほとんどは figure)が持つ margin-top が
   親要素の margin と相殺(マージンの相殺)されて意図した間隔より詰まって
   しまうのを避けるため。events.css の .events__item が罫線の間隔を margin
   ではなく padding で確保しているのと同じ考え方。
   ------------------------------------------------------------- */
.single-event__content {
	padding-top: 2.8rem;
	font-family: var(--font-ja);
	font-size: 16px;
	line-height: 28px;
	color: var(--color-white);
}

.single-event .events__more {
	position: static;
	width: auto;
	height: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 4rem 0 0;
	gap: 0.5rem;
}
.single-event__back{
	width: 100%;
	text-align: center;
	margin-top: 4rem;
}
/* 最後の要素の下余白は詰める(段落・画像・リスト等どれが最後に来ても対応。
   .single-event__content p 等より class 数が多く優先されるため、各要素側の
   margin-bottom を打ち消せる)。 */
.single-event__content > *:last-child {
	margin-bottom: 0;
}

.single-event__content p {
	margin: 0 0 2.8rem;
}

.single-event__content h1,
.single-event__content h2,
.single-event__content h3,
.single-event__content h4,
.single-event__content h5,
.single-event__content h6 {
	margin: 0 0 2.8rem;
	font-family: var(--font-ja);
	color: var(--color-white);
}

.single-event__content strong,
.single-event__content b {
	font-weight: 700;
	color: var(--color-white);
}

.single-event__content a {
	color: var(--color-white);
	text-decoration: underline;
}

/* base.css のリセット(list-style:none / margin:0 / padding:0)をこのスコープ
   内だけ上書きし、インデント付きの一般的なリスト表示に戻す。 */
.single-event__content ul,
.single-event__content ol {
	margin: 0 0 2.8rem;
	padding-left: 2rem;
}

.single-event__content ul {
	list-style: disc;
}

.single-event__content ol {
	list-style: decimal;
}

/* -------------------------------------------------------------
   画像 (.wp-block-image / figure / img)
   Figmaのモックは画像を本文幅いっぱい(887px, 横長)・50px間隔で並べているが、
   実際の投稿はフライヤー画像(724〜765×1024 の縦長)がほとんどのため、
   width:100% は強制せず max-width:100% で自然サイズを上限内に収めて中央寄せ
   する(縦長画像がカラム幅いっぱいに引き伸ばされて巨大化するのを防ぐ)。
   ------------------------------------------------------------- */
.single-event__content img {
	max-width: 100%;
	height: auto;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.single-event__content figure {
	margin: 5rem 0;
}

.single-event__content figcaption {
	margin-top: 1rem;
	font-family: var(--font-sans);
	font-size: 13px;
	line-height: 16px;
	text-align: center;
	color: var(--color-white);
}

/* =============================================================
   SP (max-width: 920px)
   Figma: SPイベント詳細 (fileKey hq2oZ2NymsckMJQirVNzJJ, node 20:933, 390x3439)
   ストーリー/プライバシー/イベント一覧の SP と同じ考え方: レイアウトは rem、
   フォントは「タブレット(768-920)/スマホ(≤767)」の2段px。
   見出し x36/y86.9、本文カラム x36/幅318(単一カラム)、本文画像は列幅いっぱい
   (既存の max-width:100% で 318px に収まるため SP 専用指定は不要)。
   SP設計のタイトル(h1相当)・本文は Zen Kaku Gothic New(ゴシック / PCは明朝)。
   スマホ段は 390px デザインの実px:
     見出し Events 30px / 日付 Inter 12px / タイトル 16px lh21 / 本文 13px lh21
   タブレット段はスマホ px × 1.35。
   ============================================================= */
@media (max-width: 920px) {

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

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

	/* 本文カラム: SP Figma x=36 / width=318 → 幅31.8rem・中央寄せ。 */
	.single-event__body {
		width: 31.8rem;
	}

	/* SP設計はタイトル・本文ともゴシック。PCの明朝(var(--font-ja))を打ち消す。 */
	.single-event__title,
	.single-event__content,
	.single-event__content h1,
	.single-event__content h2,
	.single-event__content h3,
	.single-event__content h4,
	.single-event__content h5,
	.single-event__content h6 {
		font-family: var(--font-ja);
	}

	/* PCの letter-spacing 0.2rem(rem指定)は vw スケールで大きくなるため打ち消す
	   (SPデザインのタイトルはトラッキング無し)。 */
	.single-event__title {
		letter-spacing: normal;
	}
}

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

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

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

	.single-event__title {
		font-size: 21.5px; /* 16px × 1.35 = 21.6 */
		line-height: 28.5px; /* 21px × 1.35 = 28.35 */
	}

	.single-event__content {
		font-size: 17.5px; /* 13px × 1.35 = 17.55 */
		line-height: 28.5px; /* 21px × 1.35 = 28.35 */
	}
}

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

	.single-event__heading {
		font-size: 30px;
	}

	.single-event__date {
		font-size: 12px;
	}

	.single-event__title {
		font-size: 16px;
		line-height: 21px;
	}

	.single-event__content {
		font-size: 13px;
		line-height: 21px;
	}
}