/* ============================================================
   layout.css  —  骨格（コンテナ・セクション・グリッド・スタック）
   ============================================================ */
@layer layout {

/* --- コンテナ ------------------------------------------ */
.l-container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
.l-container--narrow { max-width: var(--container-narrow); }
.l-container--read   { max-width: var(--container-read); } /* 長文本文 */

/* --- セクション（縦の余白） ---------------------------- */
.l-section       { padding-block: var(--section-py); }
.l-section--tight { padding-block: var(--section-py-tight); }
.l-section--loose { padding-block: var(--section-py-loose); }
.l-section--alt   { background: var(--c-bg-alt); }
.l-section--emphasis { background: var(--c-surface-emphasis); }

/* セクション見出しブロック（eyebrow＋見出し＋リード） */
.l-section__header { margin-bottom: var(--sp-5); }
.l-section__header--center { text-align: center; }
.l-section__header--center > * { margin-inline: auto; }

/* --- グリッド ------------------------------------------ */
.l-grid { display: grid; gap: var(--sp-5); }
.l-grid--2 { grid-template-columns: repeat(2, 1fr); }
.l-grid--3 { grid-template-columns: repeat(3, 1fr); }
.l-grid--4 { grid-template-columns: repeat(4, 1fr); }
/* 自動詰め（最小幅を保ちつつ折り返す） */
.l-grid--auto { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* --- スタック（縦積み、一定の gap） -------------------- */
.l-stack { display: flex; flex-direction: column; gap: var(--sp-4); }
.l-stack--lg { gap: var(--sp-6); }
.l-stack--sm { gap: var(--sp-2); }

/* --- クラスタ（横並び、折り返し） ---------------------- */
.l-cluster { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; }
.l-cluster--between { justify-content: space-between; }
.l-cluster--center  { justify-content: center; }

/* --- 2カラム（本文＋画像など） ------------------------- */
.l-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-7); align-items: center; }

/* --- レスポンシブ -------------------------------------- */
@media (max-width: 860px) {
  .l-grid--2, .l-grid--3, .l-grid--4 { grid-template-columns: 1fr; }
  .l-split { grid-template-columns: 1fr; gap: var(--sp-5); }
}
}