/* =============================================================
 * layout.css — コンテナとセクションの骨格
 * ========================================================== */

/* --------------------------------------------------------
 * Container
 *   l-container           … 1120px（標準）
 *   l-container--narrow   …  880px（詰めた見せ方）
 *   l-container--read     …  720px（長文読み物）
 * -------------------------------------------------------- */
.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); }

/* --------------------------------------------------------
 * Section
 *   上下余白を統一。--alt で背景色を差し替え、
 *   --full で左右もブリード（背景色をフル幅に敷きたいとき）。
 * -------------------------------------------------------- */
.l-section {
  padding-block: var(--section-py);
}
.l-section--alt {
  background: var(--c-bg-alt);
}
.l-section--brand {
  background: var(--c-bg-brand);
  color: var(--c-text-invert);
}
.l-section--brand h1,
.l-section--brand h2,
.l-section--brand h3 {
  color: var(--c-text-invert);
}
.l-section--brand .t-eyebrow {
  color: var(--c-brand-200);
}
/* 青背景内のリード文は白系に（薄すぎない濃さで読みやすく） */
.l-section--brand .t-lead {
  color: rgba(255, 255, 255, 0.82);
}
/* ■ も白に */
.l-section--brand .t-heading--square::before,
.l-section--brand .t-heading--centered::after,
.l-section--brand .t-heading--bar::before,
.l-section--brand .t-heading--underline::after {
  background: var(--c-text-invert);
}
/* 青背景内の「白カード」は本文色・見出し色を通常に戻す */
.l-section--brand .c-card {
  background: var(--c-bg);
  color: var(--c-text);
  border-color: transparent;
}
.l-section--brand .c-card h1,
.l-section--brand .c-card h2,
.l-section--brand .c-card h3,
.l-section--brand .c-card h4 {
  color: var(--c-text);
}
.l-section--brand .c-card .t-lead,
.l-section--brand .c-card .c-card__excerpt,
.l-section--brand .c-card p {
  color: var(--c-text-muted);
}
.l-section--brand .c-card .t-eyebrow {
  color: var(--c-brand-800);
}

/* --------------------------------------------------------
 * Section Header
 *   セクション見出しのラッパ。Eyebrow＋タイトル＋リード文。
 * -------------------------------------------------------- */
.l-section__header {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-bottom: var(--sp-7);
  max-width: 48rem;
}
.l-section__header--center {
  text-align: center;
  margin-inline: auto;
}

/* --------------------------------------------------------
 * Stack（縦方向に一定間隔で積む）
 * -------------------------------------------------------- */
.l-stack      > * + * { margin-top: var(--sp-5); }
.l-stack--sm  > * + * { margin-top: var(--sp-3); }
.l-stack--lg  > * + * { margin-top: var(--sp-7); }

/* --------------------------------------------------------
 * Cluster（横並びで折り返す）
 * -------------------------------------------------------- */
.l-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
}

/* --------------------------------------------------------
 * Grid
 * -------------------------------------------------------- */
.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); }

@media (max-width: 768px) {
  .l-grid--2,
  .l-grid--3,
  .l-grid--4 {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------
 * Divider
 * -------------------------------------------------------- */
.l-divider {
  border: 0;
  border-top: 1px solid var(--c-line);
  margin-block: var(--sp-6);
}


/* --------------------------------------------------------
 * .l-section__header 内の直下要素のマージンリセット
 *   TOP は <span class="t-eyebrow"> を使うが、下層（Gutenberg）は
 *   <p class="t-eyebrow"> になる。<p> のデフォルト下マージン (1em) が
 *   l-section__header の gap に足されて、TOPと下層で見出しまわりの
 *   マージンが違って見える原因を解消する。
 * -------------------------------------------------------- */
.l-section__header > p {
  margin: 0;
}