/* =========================================================
   レイアウト基盤（lr-section / __inner / grid / 見出し）
   配置: assets/css/core/10-base.css
   セクションの器・横幅制限・グリッド・共通見出しを担当。
   縦余白は padding で持つ（背景付きセクションでも内側に入り破綻しない）。
   ========================================================= */

/* ------------------------------------------------------------
   body：サイトの基礎タイポ＋スティッキーフッター土台
   本文基準は --lr-font-base（正本）。ここで一度だけ明示する。
   ------------------------------------------------------------ */
body {
	font-family: var(--lr-font-sans);
	font-size: var(--lr-font-base);
	line-height: var(--lr-leading-body);
	color: var(--lr-text);
	background: var(--lr-bg);
	/* スティッキーフッター：短いページでもフッターを最下部へ */
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}
main {
	flex: 1 0 auto;
}

/* ------------------------------------------------------------
   セクション外側：背景と縦余白
   ------------------------------------------------------------ */
.lr-section {
	position: relative;
    background-color: var(--lr-bg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: var(--bg-pos, center center);
	/* 既定の縦余白：スマホ 64px → タブレット以上 96px */
	padding-block: var(--lr-space-xl);
}
@media (min-width: 600px) {
	.lr-section {
		padding-block: var(--lr-space-2xl);
	}
}

/* intro 直後は詰めつつ少し残す */
.lr-intro + .lr-section {
	padding-top: var(--lr-space-lg);   /* 40px */
}

/* 背景タイプ（データ属性で分岐） */
.lr-section[data-bg="color"] { background-color: var(--bg-color, transparent); }
.lr-section[data-bg="image"] { background-image: var(--bg-image, none); }

/* ------------------------------------------------------------
   セクション内側：横幅の制限
   ------------------------------------------------------------ */
.lr-section__inner {
	width: 100%;
	margin-inline: auto;
	padding-inline: var(--lr-gutter);
	max-width: calc(var(--lr-width-contained) + var(--lr-gutter) * 2);
}
.lr-section[data-width="wide"] .lr-section__inner,
.lr-section[data-width="full"] .lr-section__inner {
	max-width: calc(var(--lr-width-wide) + var(--lr-gutter) * 2);
}

/* スマホはガターを少し詰める（左右を広く使う） */
@media (max-width: 599px) {
	.lr-section__inner {
		padding-inline: var(--lr-space-md);   /* 16px */
	}
}

/* ------------------------------------------------------------
   共通セクション見出し（lr-heading）
   テンプレート由来の h2 看板見出しの唯一の型。
   header でくくり、__title（h2）＋任意 __sub。
   装飾は下線を使わず、左の縦罫のみ。data-tone で罫色を出し分け：
     既定（tone なし）／data-tone="brand" … 赤（--lr-accent）
     data-tone="dark"                     … チャコール（--lr-text）
   タイポは intro と同血統（極太・字間詰め）。
   ※ wysiwyg 本文の h2 はここでは扱わない（12-richtext.css 側）。
   ------------------------------------------------------------ */
.lr-heading {
	margin: 0 0 var(--lr-space-md);
	padding-left: var(--lr-space-sm);           /* 罫とテキストの間隔（16px） */
	border-left: 6px solid var(--lr-accent);    /* 既定＝赤の縦罫 */
}
.lr-heading[data-tone="dark"] {
	border-left-color: var(--lr-text);          /* すべての作家など＝チャコール */
}
.lr-heading[data-tone="brand"] {
	border-left-color: var(--lr-accent);        /* 明示 brand＝赤（既定と同じ） */
}

.lr-heading__title {
	margin: 0 0 .6em;
	color: var(--lr-text);
	font-weight: var(--lr-weight-black);
	font-size: var(--lr-font-heading);   /* 24 → 32px（トークン参照） */
	line-height: var(--lr-leading-tight);
	letter-spacing: var(--lr-tracking-tight);
}

/* タイトル内の補助（件数など「（N名収録）」）。小さく・ミュート・細字 */
.lr-heading__count {
	margin-left: var(--lr-space-2xs);
	font-size: var(--lr-font-sm);
	font-weight: var(--lr-weight-normal);
	color: var(--lr-text-muted);
	letter-spacing: normal;
}

/* サブタイトル（tone に関わらず常にミュート） */
.lr-heading__sub {
	margin: var(--lr-space-2xs) 0 0;
	font-size: 0.9375rem;
	font-weight: var(--lr-weight-normal);
	line-height: var(--lr-leading-body);
	color: var(--lr-text-muted);
	letter-spacing: 0.02em;
}

@media (min-width: 600px) {
	.lr-heading {
		margin-bottom: var(--lr-space-lg);   /* 40px */
	}
}

/* lr-heading シンプル版：セクションの追加クラス欄に lr-heading-plain を入れると
   そのセクションの見出しから装飾（左縦罫・トーン色）を外し、素の見出しにする */
.lr-heading-plain .lr-heading__title {
	border-left: 0;
	padding-left: 0;
	color: var(--lr-text);
}
/* ------------------------------------------------------------
   グリッド（戦略X：モバイルファースト）
   ------------------------------------------------------------ */
.lr-grid {
	display: grid;
	gap: var(--lr-gap);
	grid-template-columns: 1fr;   /* スマホ：1カラム */
}
@media (min-width: 600px) {
	.lr-grid[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
	.lr-grid[data-cols="3"] { grid-template-columns: repeat(2, 1fr); }
	.lr-grid[data-cols="4"] { grid-template-columns: repeat(2, 1fr); }
	.lr-grid[data-cols="6"] { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 900px) {
	.lr-grid[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
	.lr-grid[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }
	.lr-grid[data-cols="6"] { grid-template-columns: repeat(6, 1fr); }
}
.lr-grid[data-cols="1"] { grid-template-columns: 1fr; }
.lr-grid__item { min-width: 0; }

/* スマホ2列モディファイア（作品一覧など、狭い画面でも2列で見せたいグリッド） */
@media (max-width: 599px) {
	.lr-grid.lr-grid--sp2 {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--lr-space-sm);   /* 16px */
	}
}