/* cricket-ui · Layout Skeleton
 * 页面骨架：栅格 + 标准分区 + 标准间距
 */

/* === 容器 === */
.container        { max-width: 1200px; margin: 0 auto; padding: 0 var(--sp-6); }
.container-narrow { max-width: 800px;  margin: 0 auto; padding: 0 var(--sp-6); }
.container-wide   { max-width: 1400px; margin: 0 auto; padding: 0 var(--sp-6); }

/* === 页面分区 === */
.page-section {
  padding: var(--sp-16) 0;
}
.page-section-sm {
  padding: var(--sp-10) 0;
}
.page-section-lg {
  padding: var(--sp-20) 0;
}

/* === 栅格 === */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-6); }

@media (max-width: 768px) {
  .grid-2, .grid-3, .grid-4 {
    grid-template-columns: 1fr;
  }
}

/* === Flex 快捷 === */
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-col { display: flex; flex-direction: column; }
.gap-2 { gap: var(--sp-2); }
.gap-4 { gap: var(--sp-4); }
.gap-6 { gap: var(--sp-6); }