/* ========================================
   LAYOUT.CSS - 版面結構
   Container、Section 間距、Grid Helper
   ======================================== */

/* ===== Container ===== */
.container {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--space-6);
  width: 100%;
}

@media (max-width: 1199px) {
  .container {
    padding-inline: var(--space-6);
  }
}

@media (max-width: 767px) {
  .container {
    padding-inline: var(--space-4);
  }
}

/* ===== Section 基礎樣式 =====
.section {
  padding-block: var(--space-16);
}

@media (max-width: 1199px) {
  .section {
    padding-block: var(--space-12);
  }
}

@media (max-width: 767px) {
  .section {
    padding-block: var(--space-8);
  }
} */

/* ===== 通用工具 ===== */
.mt-0 { margin-top: 0; }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }

.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }

.p-4 { padding: var(--space-4); }
.p-6 { padding: var(--space-6); }
.px-4 { padding-inline: var(--space-4); }
.py-4 { padding-block: var(--space-4); }

.text-center { text-align: center; }