/* ============================================
   layout.css — ページ骨格。配置と余白のみ担当
   ============================================ */

.l-page {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

.l-container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-gutter);
}

.l-container--narrow {
  max-width: var(--container-narrow);
}

.l-section {
  padding-block: var(--space-2xl);
}

.l-section--tight {
  padding-block: var(--space-xl);
}

/* 背景色を変えて区切るセクション */
.l-section--alt {
  background-color: var(--color-surface-alt);
}

.l-grid {
  display: grid;
  gap: var(--space-lg) var(--space-md);
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
}

.l-grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
}

/* 4項目専用。auto-fit だと3+1の孤立が出るため段数を明示する。
   コンテナ幅では4段組みにすると見出しが折り返すため、2×2で固定する */
.l-grid--quad {
  grid-template-columns: 1fr;
}

@media (min-width: 40rem) {
  .l-grid--quad {
    grid-template-columns: repeat(2, 1fr);
  }
}

.l-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}