/* ==========================================================================
   佈局系統（Layout System）
   - site-col-layout：兩欄比例佈局（Composition，CUBE CSS）
   - site-grid：多欄等分網格
   ========================================================================== */

/* ==========================================================================
   site-col-layout — 兩欄自訂比例佈局
   ========================================================================== */

.site-col-layout {
  display: grid;
  grid-template-columns: var(--col-start, minmax(0, 1fr)) var(
      --col-end,
      minmax(0, 1fr)
    );
  gap: var(--spacing-8);
  align-items: start;
}

/* 翻轉左右順序（側欄在右）：用 order 控制視覺順序 */
.site-col-layout--end > :first-child {
  order: 2;
}
.site-col-layout--end > :last-child {
  order: 1;
}

/* --- 比例 --- */
.site-col-layout[data-ratio="3-9"] {
  --col-start: minmax(0, 3fr);
  --col-end: minmax(0, 9fr);
}
.site-col-layout[data-ratio="4-8"] {
  --col-start: minmax(0, 4fr);
  --col-end: minmax(0, 8fr);
}
.site-col-layout[data-ratio="5-7"] {
  --col-start: minmax(0, 5fr);
  --col-end: minmax(0, 7fr);
}
.site-col-layout[data-ratio="6-6"] {
  --col-start: minmax(0, 6fr);
  --col-end: minmax(0, 6fr);
}
.site-col-layout[data-ratio="7-5"] {
  --col-start: minmax(0, 7fr);
  --col-end: minmax(0, 5fr);
}
.site-col-layout[data-ratio="8-4"] {
  --col-start: minmax(0, 8fr);
  --col-end: minmax(0, 4fr);
}
.site-col-layout[data-ratio="9-3"] {
  --col-start: minmax(0, 9fr);
  --col-end: minmax(0, 3fr);
}

/* --- gap（sm:6 / 預設:8 / lg:10 / xl:12） --- */
.site-col-layout[data-gap="sm"] {
  gap: var(--spacing-6);
}
.site-col-layout[data-gap="lg"] {
  gap: var(--spacing-10);
}
.site-col-layout[data-gap="xl"] {
  gap: var(--spacing-12);
}
.site-col-layout[data-gap="2xl"] {
  gap: var(--spacing-14);
}

/* --- 響應式堆疊（預設 lg） --- */
@media (max-width: 991.98px) {
  .site-col-layout:not([data-bp]) {
    grid-template-columns: minmax(0, 1fr);
  }
  .site-col-layout--end:not([data-bp]) > :first-child {
    order: 1;
  }
  .site-col-layout--end:not([data-bp]) > :last-child {
    order: 2;
  }
}

/* data-bp="md"：768px 堆疊 */
@media (max-width: 767.98px) {
  .site-col-layout[data-bp="md"] {
    grid-template-columns: minmax(0, 1fr);
  }
  .site-col-layout--end[data-bp="md"] > :first-child {
    order: 1;
  }
  .site-col-layout--end[data-bp="md"] > :last-child {
    order: 2;
  }
}

/* data-bp="sm"：576px 堆疊 */
@media (max-width: 575.98px) {
  .site-col-layout[data-bp="sm"] {
    grid-template-columns: minmax(0, 1fr);
  }
  .site-col-layout--end[data-bp="sm"] > :first-child {
    order: 1;
  }
  .site-col-layout--end[data-bp="sm"] > :last-child {
    order: 2;
  }
}

/* data-bp="auto"：改用 flex-wrap 自動換行（contact、footer 等有 min-width 需求的元件） */
.site-col-layout[data-bp="auto"] {
  display: flex;
  flex-wrap: wrap;
}

/* ==========================================================================
   section-spacing — 區塊級內距 / 外距
   ========================================================================== */

/* 區塊內距 */
.section-py-sm {
  padding-block: var(--section-spacing-sm);
}
.section-py {
  padding-block: var(--section-spacing);
}
.section-py-lg {
  padding-block: var(--section-spacing-lg);
}

/* 區塊外距 */
.section-my-sm {
  margin-block: var(--section-spacing-sm);
}
.section-my {
  margin-block: var(--section-spacing);
}
.section-my-lg {
  margin-block: var(--section-spacing-lg);
}

/* ==========================================================================
   site-grid — 多欄等分網格
   ========================================================================== */

.site-grid {
  display: grid;
  gap: var(--spacing-4);
  grid-template-columns: minmax(0, 1fr); /* 預設單欄（mobile-first） */
}

/* --- gap（sm:6 / 預設:8 / lg:10 / xl:12） --- */
.site-grid[data-gap="sm"] {
  gap: var(--spacing-2);
}
.site-grid[data-gap="lg"] {
  gap: var(--spacing-6);
}
.site-grid[data-gap="xl"] {
  gap: var(--spacing-8);
}
.site-grid[data-gap="2xl"] {
  gap: var(--spacing-10);
}

/* --- data-gap-sm：手機版（≤767px）gap 覆蓋 --- */
@media (max-width: 767.98px) {
  .site-grid[data-gap-sm="sm"]  { gap: var(--spacing-2); }
  .site-grid[data-gap-sm="lg"]  { gap: var(--spacing-6); }
  .site-grid[data-gap-sm="xl"]  { gap: var(--spacing-8); }
  .site-grid[data-gap-sm="2xl"] { gap: var(--spacing-10); }
}

/* data-cols：預設欄數（不帶斷點，手機就需要多欄時使用） */
.site-grid[data-cols="2"] {
  grid-template-columns: repeat(2, 1fr);
}
.site-grid[data-cols="3"] {
  grid-template-columns: repeat(3, 1fr);
}
.site-grid[data-cols="4"] {
  grid-template-columns: repeat(4, 1fr);
}

/* data-sm：576px 展開 */
@media (min-width: 576px) {
  .site-grid[data-sm="1"] {
    grid-template-columns: repeat(1, 1fr);
  }
  .site-grid[data-sm="2"] {
    grid-template-columns: repeat(2, 1fr);
  }
  .site-grid[data-sm="3"] {
    grid-template-columns: repeat(3, 1fr);
  }
  .site-grid[data-sm="4"] {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* data-md：768px 展開 */
@media (min-width: 768px) {
  .site-grid[data-md="1"] {
    grid-template-columns: repeat(1, 1fr);
  }
  .site-grid[data-md="2"] {
    grid-template-columns: repeat(2, 1fr);
  }
  .site-grid[data-md="3"] {
    grid-template-columns: repeat(3, 1fr);
  }
  .site-grid[data-md="4"] {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* data-lg：992px 展開 */
@media (min-width: 992px) {
  .site-grid[data-lg="1"] {
    grid-template-columns: repeat(1, 1fr);
  }
  .site-grid[data-lg="2"] {
    grid-template-columns: repeat(2, 1fr);
  }
  .site-grid[data-lg="3"] {
    grid-template-columns: repeat(3, 1fr);
  }
  .site-grid[data-lg="4"] {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ==========================================================================
   site-content-narrow — 內容區寬度收窄
   用法：<div class="site-content-layout site-content-narrow" data-width="sm/md/lg">
   預設行為：≤991px 取消寬度限制，由 container 自然控制
   ========================================================================== */

.site-content-narrow {
  max-width: var(--content-width-md);
  margin-inline: auto;
}

.site-content-narrow[data-width="sm"] {
  max-width: var(--content-width-sm);
}

.site-content-narrow[data-width="md"] {
  max-width: var(--content-width-md);
}

.site-content-narrow[data-width="lg"] {
  max-width: var(--content-width-lg);
}

.site-content-narrow[data-width="xl"] {
  max-width: var(--content-width-xl);
}
.site-content-narrow[data-width="2xl"] {
  max-width: var(--content-width-2xl);
}
@media (max-width: 991.98px) {
  .site-content-narrow {
    max-width: none;
  }
}