/* layout.css — コンテナ幅・グリッド・ヘッダ/フッタの配置・ブレークポイント
   参照: docs/design/LAYOUT.md / prototypes/index.html
   ブレークポイントは --bp-sm 600px / --bp-md 900px / --bp-lg 1200px。
   メディアクエリは CSS変数を解決できないため実値を書く（値の出典は tokens.json）。 */

/* ヘッダー高さは tokens.json に定義がない。
   docs/design/COMPONENTS.md §1 の規定値をここで名前付き定数にする。 */
:root {
}

/* --- コンテナ ---------------------------------------------------------- */

.mzn-wrap {
  max-width: var(--layout-max-content-width);
  margin-inline: auto;
  padding-inline: var(--layout-gutter-mobile);
}

.mzn-article {
  max-width: var(--layout-article-width);
  margin-inline: auto;
}

.mzn-wide {
  max-width: var(--layout-wide-content-width);
  margin-inline: auto;
}

@media (min-width: 900px) {
  .mzn-wrap {
    padding-inline: var(--layout-gutter-tablet);
  }
}

/* --- 本文領域 ---------------------------------------------------------- */

.mzn-main {
  display: block;
  padding-top: var(--space-5);
  padding-bottom: var(--space-8);
}

/* 記事ページにサイドバーを置かない（LAYOUT.md §2）。
   本文は 680px、表と図のみ 900px まで広げる。 */
.mzn-main > .alignwide {
  max-width: var(--layout-wide-content-width);
  margin-inline: auto;
}

.mzn-main > .alignfull {
  max-width: none;
}

.mzn-section {
  padding-block: var(--space-7);
  border-bottom: var(--border-width) solid var(--color-border);
}

.mzn-section > h2 {
  margin-top: 0;
}

/* --- ヘッダーの配置 ---------------------------------------------------- */

.mzn-header {
  display: block;
  border-bottom: var(--border-width) solid var(--color-border);
  background-color: var(--color-bg);
}

.mzn-header-inner {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  justify-content: space-between;
  min-height: var(--layout-header-height);
}

@media (min-width: 900px) {
  .mzn-header-inner {
    min-height: var(--layout-header-height-desktop);
  }
}

/* --- フッターの配置 ---------------------------------------------------- */

.mzn-footer {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  padding-bottom: var(--space-5);
  border-top: var(--border-width) solid var(--color-border);
  background-color: var(--color-surface-alt);
}

.mzn-footer-cols {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 600px) {
  .mzn-footer-cols {
    grid-template-columns: 1.4fr 1fr 1fr;
  }
}

/* --- グリッド ---------------------------------------------------------- */

.mzn-grid {
  display: grid;
  gap: var(--layout-column-gap);
}

@media (min-width: 600px) {
  .mzn-grid-2 {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 900px) {
  .mzn-grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --- Query Loop / 一覧 -------------------------------------------------- */

.mzn-post-list {
  display: grid;
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 600px) {
  .mzn-post-list {
    grid-template-columns: 1fr 1fr;
  }
}