/* ═══════════════════════════════════════════════════════════════════
   版面系統 — 容器、Grid、Section
═══════════════════════════════════════════════════════════════════ */

/* ── 容器 ── */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* ── 通用段落 ── */
.section { padding: var(--space-20) 0; }
.section-bg { background: var(--color-bg-secondary); }
.section-dark { background: var(--color-bg-dark); color: #fff; }
.section-header { text-align: center; margin-bottom: var(--space-12); }
.section-title { font-size: var(--text-3xl); font-weight: 700; letter-spacing: -.02em; margin-bottom: var(--space-4); }
.section-subtitle { color: var(--color-text-muted); font-size: var(--text-lg); }

/* ── Hero 區塊 ── */
.hero {
  background: var(--color-bg-dark);
  padding: var(--space-20) 0 var(--space-24);
  overflow: hidden; position: relative;
}
.hero::before {
  content: '';
  position: absolute; top: -120px; right: -120px;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(37,99,235,.15) 0%, transparent 70%);
  border-radius: 50%; pointer-events: none;
}
.hero-inner {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--space-16); align-items: center;
}

/* ── 分類 Grid ── */
.category-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
.category-card {
  border-radius: var(--radius-xl); overflow: hidden; position: relative;
  aspect-ratio: 16/9; display: flex; align-items: flex-end;
  transition: var(--transition); cursor: pointer; text-decoration: none;
}
.category-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

/* ── 商品 Grid ── */
.products-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }

/* ── 功能卡片 Grid ── */
.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); }

/* ── 評價 Grid ── */
.testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }

/* ── 結帳版面 ── */
.checkout-layout { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-12); align-items: start; }

/* ── Footer Grid ── */
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-12); margin-bottom: var(--space-12); }

/* ── 頁面 Hero（政策頁、一般頁）── */
.page-hero { background: var(--color-bg-secondary); padding: 4rem 0 3rem; }
.page-title { font-size: var(--text-3xl); font-weight: 700; letter-spacing: -.02em; margin-top: var(--space-2); }

/* ═══ RWD 斷點 ═══ */
@media (max-width: 1024px) {
  .products-grid  { grid-template-columns: repeat(2, 1fr); }
  .footer-grid    { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
}
@media (max-width: 768px) {
  .hero-inner        { grid-template-columns: 1fr; }
  .hero-visual       { display: none; }
  .category-grid     { grid-template-columns: 1fr; }
  .features-grid     { grid-template-columns: 1fr; }
  .testimonials-grid { grid-template-columns: 1fr; }
  .checkout-layout   { grid-template-columns: 1fr; }
  .footer-grid       { grid-template-columns: 1fr; }
  .section { padding: var(--space-12) 0; }
}
@media (max-width: 480px) {
  .products-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
}