/* ===========================================================
   layout.css — 幅と余白の決まり
   Figmaのグリッド（1440 / 中身1120・928 / 左右160）に対応します。
   =========================================================== */

/* セクションの外枠。横幅いっぱいの背景はここに付けます */
.section {
  position: relative;
  padding-block: var(--s-96);
}

.section--beige { background: var(--c-bg-beige); }
.section--flush { padding-block: 0; }

/* 中身の幅 ------------------------------------------------- */

/* 標準（928）— 文章・カードなど */
.inner {
  width: min(var(--w-base), 100% - var(--margin-x) * 2);
  margin-inline: auto;
}

/* ワイド（1120）— 写真・一覧など */
.inner--wide { width: min(var(--w-wide), 100% - var(--margin-x) * 2); }

/* 狭い（736）— 読ませる文章 */
.inner--narrow { width: min(var(--w-narrow), 100% - var(--margin-x) * 2); }

/* 画面いっぱい（背景や大きな写真） */
.inner--full { width: 100%; }

/* 並べる --------------------------------------------------- */

.row {
  display: flex;
  gap: var(--gutter);
}

.row--center { justify-content: center; }
.row--between { justify-content: space-between; }
.row--middle { align-items: center; }
.row--stretch { align-items: stretch; }

/* 等分に並べる（3つ並べると352px、2つなら544px） */
.row > .col { flex: 1 1 0; min-width: 0; }

/* 縦に積む */
.stack {
  display: flex;
  flex-direction: column;
}
.stack--8  { gap: var(--s-8); }
.stack--16 { gap: var(--s-16); }
.stack--24 { gap: var(--s-24); }
.stack--32 { gap: var(--s-32); }
.stack--48 { gap: var(--s-48); }
.stack--64 { gap: var(--s-64); }

.center { text-align: center; }

/* スマホでは横並びを縦に積み直します */
@media (max-width: 767px) {
  .section { padding-block: var(--s-64); }
  .row { flex-direction: column; }
}