/*
 * Harashina Standard — 投稿詳細ページ（single.php専用、比較確認用）
 *
 * freeze済みInformation archive（assets/css/information-archive.css）と
 * 視覚的に接続する詳細ページ。ただしファイルとしては完全に独立しており、
 * information.css／information-archive.cssの値・selectorは一切参照・
 * 変更していない（このファイルだけで完結する）。
 *
 * 色・フォント・spacingはtokens.css（--bg/--text/--text-muted/--accent/
 * --border-color/--font-serif/--font-mono/--ease-in/--width-content/
 * --width-narrow）を参照する。新しいデザイントークンは追加していない。
 *
 * 外側コンテナはInformation archiveと同じ--width-content（1180px）、
 * 見出し・本文・画像はより読みやすい--width-narrow（46rem、既存の
 * 通常固定ページ／slim固定ページ実装と同じ値を再利用）を第一候補として
 * 内側に配置している（PCで本文の1行が横に長くなりすぎないようにする
 * ため）。この幅の最終判断はユーザーの実画面確認後に行う想定で、
 * 今回は比較確認用の実装として値を決め打ちしすぎないようにしている。
 *
 * 汎用の.entry-content（style.css側、固定ページ本文幅用）とは
 * class名を分けており（.single-info__content）、意図せず二重に
 * max-widthが競合しないようにしている。
 */

.single-info{
	background: var(--bg);
}

.single-info__inner{
	max-width: var(--width-content);
	margin: 0 auto;
	padding: clamp(3rem, 7vw, 6rem) clamp(1.2rem, 4vw, 3rem) clamp(4rem, 9vw, 7rem);
}

/* ---- 見出しブロック（eyebrow + 日付 + タイトル） ----
   Business/SHOPのeyebrowと同じ書式（font-mono・小さめ・letter-spacing・
   accent色・uppercase）を踏襲し、archiveの大見出し「INFORMATION」とは
   区別した「この記事がInformationに属する」ことを示す控えめなラベルに
   している。 */
.single-info__header{
	max-width: var(--width-narrow);
	margin: 0 auto clamp(2rem, 5vw, 3rem);
}
.single-info__eyebrow{
	display: block;
	font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.12em;
	color: var(--accent); text-transform: uppercase;
	margin: 0 0 0.9rem;
}
.single-info__date{
	font-family: var(--font-mono); font-size: 0.82rem; color: var(--text-muted);
	margin: 0 0 0.9rem;
}
/* ---- タイトル: 固定pxのbreakpoint別上書きではなく、単一のclamp()で
   連続的にサイズが変化する（390px〜1440pxを通して自然に折り返す）。 ---- */
.single-info__title{
	font-family: var(--font-serif); font-weight: 700;
	font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.4rem);
	line-height: 1.5; margin: 0; color: var(--text);
}

/* ---- featured image ----
   既存2枚の実データ（桜: 851×567 ≈ 3:2、新年の帯: 1748×458 ≈ 3.8:1）の
   比率が大きく異なるため、固定aspect-ratio＋object-fit:coverでの
   クロップは行わない（帯画像の大部分が見えなくなってしまうため）。
   画像自身の自然な比率をそのまま尊重し、width:100%; height:auto;のみ
   で幅に収める。将来別の比率の画像が設定されても同様に破綻しない。 ---- */
.single-info__image{
	max-width: var(--width-narrow);
	margin: 0 auto clamp(2rem, 5vw, 3rem);
}
.single-info__image img{
	display: block;
	width: 100%;
	height: auto;
}

/* ---- 本文 ----
   the_content()の素のcore blocks（paragraph等）を想定した最小限の
   タイポグラフィ調整のみ。blocks.css（サイト全体で読み込み済み）の
   core block基礎スタイルと共存する前提で、ここでは幅・行間・段落の
   縦spacingだけを扱う。 ---- */
.single-info__content{
	max-width: var(--width-narrow);
	margin: 0 auto;
	font-size: 0.95rem; line-height: 1.9; color: var(--text);
}
.single-info__content > *:first-child{ margin-top: 0; }
.single-info__content > *:last-child{ margin-bottom: 0; }
.single-info__content p{ margin: 0 0 1.5em; }
.single-info__content img{ max-width: 100%; height: auto; }

/* ---- 「← お知らせ一覧へ戻る」----
   Information archiveの「すべて見る →」・CTAの「お問い合わせ →」等と
   同じ書式（font-mono・下線hover・矢印だけがtranslateXで動く）。 ---- */
.single-info__back{
	max-width: var(--width-narrow);
	margin: clamp(2.5rem, 6vw, 4rem) auto 0;
}
.single-info__back a{
	display: inline-block;
	font-family: var(--font-mono); font-size: 0.85rem; letter-spacing: 0.03em;
	color: var(--text-muted); text-decoration: none;
	padding-bottom: 0.2rem;
	border-bottom: 1px solid transparent;
	transition: color 0.3s var(--ease-in), border-color 0.3s var(--ease-in);
}
.single-info__back a:hover,
.single-info__back a:focus-visible{
	color: var(--accent); border-color: var(--accent);
}
.single-info__back a span{
	display: inline-block;
	margin-right: 0.3em;
	transition: transform 0.35s var(--ease-in);
}
.single-info__back a:hover span,
.single-info__back a:focus-visible span{
	transform: translateX(-4px);
}