/* ============================================================
   layout.css
   コンテナ／セクション上下パディング／ブレークポイントの土台。
   各セクション固有のグリッド（reasons/facilityの2カラム化等）は
   セクション個別の調整として sections.css 側に置く。
   ブレークポイントは tokens.css の --bp-* を参考値として持つが、
   カスタムプロパティはメディアクエリ条件に使えないため直値を書く。
   ============================================================ */

/* ---- コンテナ（§5） ---- */
.u-container {
  width: 100%;
  max-width: var(--content-max); /* 1120px */
  margin-inline: auto;
  padding-inline: var(--sp-2); /* 16px（モバイル） */
}

@media (min-width: 600px) { /* --bp-md */
  .u-container {
    padding-inline: var(--sp-3); /* 24px */
  }
}

@media (min-width: 900px) { /* --bp-lg */
  .u-container {
    padding-inline: var(--sp-4); /* 32px */
  }
}
/* 1120px到達後は max-width で頭打ちになり、margin-inline:auto により
   左右の余白が自動で拡大する（§5の想定どおり）。 */

/* ---- セクション上下パディング（通常セクション。§4） ----
   hero は 48px/80px の別値を使うため、sections.css の #hero相当（.hero）で上書きする。
   demo-bar・header・footer・cta-barは<section>要素ではないためこの規則の対象外。 */
section {
  padding-top: var(--sp-7); /* 64px */
  padding-bottom: var(--sp-7);
}

@media (min-width: 900px) {
  section {
    padding-top: var(--sp-9); /* 96px */
    padding-bottom: var(--sp-9);
  }
}