/* =========================================================
   03-layout.css
   コンテナ / グリッド / セクション。
   ========================================================= */

.nt-container {
	width: 100%;
	max-width: var(--nt-container);
	margin-inline: auto;
	padding-inline: var(--nt-container-padding);
}

.nt-container--narrow {
	max-width: var(--nt-container-narrow);
}

.nt-container--wide {
	max-width: var(--nt-container-wide);
}

.nt-section {
	padding-block: var(--nt-section-y);
}

.nt-section--alt {
	background: var(--nt-color-surface);
}

.nt-stack > * + * {
	margin-top: var(--nt-stack);
}

.nt-stack-lg > * + * {
	margin-top: var(--nt-gap);
}

.nt-grid {
	display: grid;
	gap: var(--nt-gap);
	align-items: stretch;
	/* When a Gutenberg group block uses the .nt-grid utility, WP also
	   stamps on `is-layout-flow` / `wp-block-group-is-layout-flow`, which
	   inject a `margin-block-start: var(--wp--style--block-gap)` on
	   every grid item except the first. That extra margin shifts every
	   item except the first downward inside its grid cell — so the
	   first card appears to "rise" above its siblings. Zero out that
	   per-item margin and let `gap` be the single source of truth for
	   spacing. */
	--wp--style--block-gap: 0px;
}

.nt-grid > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* Section-head → grid breathing room.
   Cards now align to a single top baseline (per the `.nt-grid > *`
   reset above), which is correct — but it also means the first card
   no longer sits a `--wp--style--block-gap` below the section
   heading the way the 2nd/3rd cards previously did. Restore that
   "heading → grid" rhythm at the *grid* level with an explicit
   spacing token, so the gap is independent of whatever global
   --wp--style--block-gap value WordPress is using and stays
   consistent across pages and presets. */
.nt-section__head + .nt-grid {
	margin-block-start: clamp(24px, 3vw, 40px);
}

.nt-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nt-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nt-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.nt-grid--auto {
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

@media (max-width: 900px) {
	.nt-grid--3,
	.nt-grid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.nt-grid--2,
	.nt-grid--3,
	.nt-grid--4 {
		grid-template-columns: 1fr;
	}
}

/* skip link */
.nt-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--nt-color-secondary);
	color: var(--nt-color-secondary-contrast);
	padding: 0.6em 1em;
	border-radius: var(--nt-radius-sm);
	z-index: var(--nt-z-modal);
	text-decoration: none;
}

.nt-skip-link:focus {
	left: 8px;
	top: 8px;
}

/* main */
.nt-main {
	display: block;
	min-height: 60vh;
}

/* =========================================================
   Article layout
   ---------------------------------------------------------
   .nt-article を CSS Grid で 3 トラックに分け、本文ブロックを
   - content (読み幅 = --nt-container-narrow)
   - wide    (alignwide = --nt-content-wide / theme.json wideSize)
   - full    (alignfull = viewport 全幅)
   のいずれかに配置する。

   wide トラックは theme.json の wideSize と整合させたいので、
   汎用ユーティリティ用の --nt-container-wide (1280px) ではなく、
   本文ブロック alignwide 専用の --nt-content-wide (1120px) を
   使う。.nt-container--wide はセクション最大幅として 1280 のまま。

   .nt-article-content は display:contents で box を消し、その子
   ブロック (the_content() の出力) を .nt-article のグリッドへ
   そのまま参加させる。これにより通常本文は読み幅で揃いつつ、
   .alignwide / .alignfull だけが自然にブレイクアウトできる。

   .nt-article 自体は max-width を持たない (グリッドの content
   トラックが読み幅を担う)。横方向の padding はグリッド両端の
   minmax(var(--nt-container-padding), 1fr) ガターで確保する。
   ========================================================= */
.nt-article {
	display: grid;
	grid-template-columns:
		[full-start] minmax(var(--nt-container-padding), 1fr)
		[wide-start] minmax(0, calc((var(--nt-content-wide) - var(--nt-container-narrow)) / 2))
		[content-start] min(calc(100% - (var(--nt-container-padding) * 2)), var(--nt-container-narrow)) [content-end]
		minmax(0, calc((var(--nt-content-wide) - var(--nt-container-narrow)) / 2)) [wide-end]
		minmax(var(--nt-container-padding), 1fr) [full-end];
}

/* .nt-article の直接の子は既定で content (読み幅) に配置。
   min-width:0 は grid item の溢れ (long URL 等) を防ぐ常套手段。 */
.nt-article > * {
	grid-column: content;
	min-width: 0;
}

/* .nt-article-content は box を消して、子ブロックを .nt-article の grid へ昇格させる。 */
.nt-article-content {
	display: contents;
}

/* display: contents で .nt-article-content の box が消えると、その子
   (the_content() の出力する h2 / p / ul / figure / blockquote 等) は
   .nt-article のグリッドに直接参加する grid item になる。grid-column
   未指定の grid item は auto-placement で名前付きトラックを左から順に
   詰めていくため、本文ブロックが gutter / wide-start 列 (実質 0〜16px)
   に流れ込んで激狭表示になる。明示的に content 列へ配置することで防ぐ。
   `.nt-article > *` ルールは「直接の子」しか拾わないため、grandchild
   側にも同様の規則が必要。 */
.nt-article > .nt-article-content > * {
	grid-column: content;
	min-width: 0;
}

/* alignwide / alignfull は直接の子・.nt-article-content 経由の孫の
   どちらでも該当トラックに配置する。WordPress が theme.json 経由で
   注入する margin はここで打ち消し、配置は grid-column を真実とする。 */
.nt-article > .alignwide,
.nt-article > .nt-article-content > .alignwide {
	grid-column: wide-start / wide-end;
	max-width: none;
	margin-inline: 0;
}

.nt-article > .alignfull,
.nt-article > .nt-article-content > .alignfull {
	grid-column: full-start / full-end;
	max-width: none;
	margin-inline: 0;
}

/* 本文ブロック間の縦間隔と簡易タイポグラフィ。
   display:contents 下でも DOM ツリー基準のセレクタは効くため、
   既存の > * + * 連結マージン規則はそのまま機能する。 */
.nt-article-content > * + * {
	margin-top: 1.25em;
}

.nt-article-content h2 {
	margin-top: 2em;
}

.nt-article-content h3 {
	margin-top: 1.5em;
}

.nt-article-content img {
	border-radius: var(--nt-radius-md);
}

/* sidebar layout (将来用) */
.nt-with-sidebar {
	display: grid;
	gap: var(--nt-gap);
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 960px) {
	.nt-has-sidebar .nt-with-sidebar {
		grid-template-columns: minmax(0, 1fr) 280px;
	}
}