/**
 * Layout
 *
 * コンテナ、グリッド等のレイアウト系ユーティリティ。
 * Phase 1 では最低限のコンテナのみ定義。
 *
 * @package JobJepang
 */

/* ============================================================
   CONTAINERS
   ============================================================ */

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

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

.jj-container-wide {
  max-width: var(--jj-container-wide);
}

/* ============================================================
   SECTION SPACING
   v1.4 思想: 余白で「読む時間」を作る。
   モバイルでも詰めすぎず、タブレット以上で十分にゆとりを取る。
   ============================================================ */

.jj-section {
  padding-block: var(--jj-space-16);
}

@media (min-width: 768px) {
  .jj-section {
    padding-block: var(--jj-space-20);
  }
}

@media (min-width: 1024px) {
  .jj-section {
    padding-block: var(--jj-space-24);
  }
}

/* ============================================================
   STACK / CLUSTER (シンプル化したパターン)
   ============================================================ */

.jj-stack > * + * {
  margin-top: var(--jj-space-4);
}

.jj-stack-lg > * + * {
  margin-top: var(--jj-space-8);
}

.jj-stack-xl > * + * {
  margin-top: var(--jj-space-12);
}

/* ============================================================
   MAIN
   ============================================================ */

.jj-main {
  display: block;
  min-height: 50vh;
}