/* ============================================================================
   03-layout.css  ―  骨組み（どこに何が置かれるか）
   ----------------------------------------------------------------------------
   「箱の中身の見た目」は 04-components.css。ここは箱の並べ方だけ。
   レイアウトを変えたいときに触るのは、ほぼこのファイルと --変数 の2つ。
   ========================================================================== */

/* ── l-shell : ページ全体の縦の並び ───────────────────────────────────── */
.l-shell {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}
.l-shell > main { flex: 1; }


/* ── l-container : 中身の幅を決める唯一の場所 ─────────────────────────
   中身の最大幅 = --content-max、左右の余白 = --gutter。
   この2つを変えるとページ全部の横幅が動く。                             */
.l-container {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.l-container--narrow { max-width: 760px; }   /* 読み物用の細い版 */
.l-container--wide   { max-width: 1360px; }


/* ── l-section : 区画。上下の余白はここでしか付けない ─────────────────── */
.l-section {
  padding-block: var(--section-gap);
}
.l-section--tight { padding-block: calc(var(--section-gap) * .55); }
.l-section--alt   { background: var(--color-bg-alt); }


/* ── l-stack : 縦に積む。間隔は gap で統一（margin を使わない）───────── */
.l-stack {
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap, var(--space-4));   /* ← var() の第2引数 = 既定値 */
}
.l-stack--sm { --stack-gap: var(--space-2); }
.l-stack--lg { --stack-gap: var(--space-8); }
.l-stack--xl { --stack-gap: var(--space-12); }


/* ── l-cluster : 横に並べて、入りきらなければ折り返す ─────────────────── */
.l-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cluster-gap, var(--space-3));
}
.l-cluster--between { justify-content: space-between; }
.l-cluster--center  { justify-content: center; }


/* ── l-grid : 自動折返しグリッド ───────────────────────────────────────
   auto-fit + minmax = 「1列の最小幅」だけ決めれば、列数はブラウザが決める。
   メディアクエリを1行も書かずに 1→2→3列 と変化する。                    */
.l-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--grid-min), 1fr));
  gap: var(--grid-gap, var(--space-5));
}
.l-grid--2 { --grid-min: 400px; }
.l-grid--4 { --grid-min: 200px; }


/* ── l-split : 左右2分割。狭いと縦積みに戻る ─────────────────────────── */
.l-split {
  display: grid;
  gap: var(--space-10);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .l-split {
    /* --split-ratio で左右の比率を決める。既定は 1:1 */
    grid-template-columns: var(--split-ratio, 1fr 1fr);
  }
  .l-split--sidebar { --split-ratio: 260px 1fr; align-items: start; }
  .l-split--hero    { --split-ratio: 1.05fr .95fr; }
}


/* ── l-header : 上に貼り付く帯 ───────────────────────────────────────── */
.l-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: color-mix(in srgb, var(--color-bg) 82%, transparent);
  backdrop-filter: blur(12px) saturate(1.4);
  border-bottom: 1px solid var(--color-border);
}
.l-header > .l-container {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}


/* ── l-footer ─────────────────────────────────────────────────────────── */
.l-footer {
  background: var(--color-bg-alt);
  border-top: 1px solid var(--color-border);
  padding-block: var(--space-16) var(--space-8);
}
.l-footer-cols {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
@media (min-width: 860px) {
  .l-footer-cols { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
}


/* ── 画面には出さないが読み上げには残す ──────────────────────────────── */
.u-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: calc(-1 * var(--header-h) - 20px);
  z-index: calc(var(--z-header) + 1);
  padding: var(--space-2) var(--space-4);
  background: var(--color-brand);
  color: var(--color-on-brand);
  border-radius: var(--radius-md);
  transition: top var(--dur-2) var(--ease-out);
}
.skip-link:focus { top: var(--space-3); }