/* ===========================================================
   Layout primitives — 構造を組み立てるためのビルディングブロック
   =========================================================== */

/* ---------- Container ---------- */
.l-container {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.l-container--text { max-width: var(--maxw-text); }
.l-container--bleed { max-width: var(--maxw-bleed); }
.l-container--narrow { max-width: 840px; }

/* ---------- Section ---------- */
.l-section {
  padding-block: var(--section-py);
  position: relative;
}
.l-section--airy { padding-block: var(--section-py-lg); }
.l-section--flush-top { padding-top: 0; }
.l-section--flush-bottom { padding-bottom: 0; }

/* ---------- Stack (vertical rhythm) ---------- */
.l-stack > * + * { margin-top: var(--stack-gap, var(--space-5)); }
.l-stack--tight  { --stack-gap: var(--space-3); }
.l-stack--loose  { --stack-gap: var(--space-7); }

/* ---------- Cluster (horizontal flex group) ---------- */
.l-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
}

/* ---------- Grid (auto column grid with safe gutter) ---------- */
.l-grid {
  display: grid;
  gap: var(--grid-gap, var(--space-5));
}
.l-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.l-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.l-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 980px) {
  .l-grid--cols-4 { grid-template-columns: repeat(2, 1fr); }
  .l-grid--cols-3 { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .l-grid--cols-2 { grid-template-columns: 1fr; }
  .l-grid--cols-4 { grid-template-columns: 1fr; }
  .l-grid--flavor { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Bleed (コンテナを突き抜けて全幅へ) ---------- */
.l-bleed {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

/* ---------- Center (1要素を中央に配置) ---------- */
.l-center {
  display: flex;
  align-items: center;
  justify-content: center;
}