/* utilities.css - 功能工具类，内置 Bento Grid 断点 spans */

/* === 横向滚动 === */
.scroll-x {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  gap: var(--space-sm);
  padding-bottom: var(--space-xs);
}
.scroll-x > * {
  flex-shrink: 0;
  scroll-snap-align: start;
}
.scroll-x::-webkit-scrollbar { display: none; }
.scroll-x {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* === 响应式视频卡片网格 === */
.grid-ps {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
}
@media (min-width: 640px) {
  .grid-ps { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .grid-ps { grid-template-columns: repeat(6, 1fr); }
}

/* === Bento 动态网格 === */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
}
@media (min-width: 640px) {
  .bento-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1024px) {
  .bento-grid { grid-template-columns: repeat(6, 1fr); }
}

/* Bento 跨度类 (默认 2 列网格) */
.bento-span-1 { grid-column: span 1; }
.bento-span-2 { grid-column: span 2; }
/* 平板（4 列）专用 */
@media (min-width: 640px) and (max-width: 1023px) {
  .bento-span-md-1 { grid-column: span 1; }
  .bento-span-md-2 { grid-column: span 2; }
  .bento-span-md-3 { grid-column: span 3; }
  .bento-span-md-4 { grid-column: span 4; }
}
/* 桌面（6 列）专用 */
@media (min-width: 1024px) {
  .bento-span-lg-1 { grid-column: span 1; }
  .bento-span-lg-2 { grid-column: span 2; }
  .bento-span-lg-3 { grid-column: span 3; }
  .bento-span-lg-4 { grid-column: span 4; }
  .bento-span-lg-5 { grid-column: span 5; }
  .bento-span-lg-6 { grid-column: span 6; }
}

/* === 文本截断 === */
.line-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* === 毛玻璃快速类 === */
.bg-glass {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--backdrop-blur));
  -webkit-backdrop-filter: blur(var(--backdrop-blur));
  border: var(--glass-border);
}

/* === 间距辅助 === */
.gap-xs { gap: var(--space-xs); }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }

.p-xs { padding: var(--space-xs); }
.p-sm { padding: var(--space-sm); }
.p-md { padding: var(--space-md); }
.p-lg { padding: var(--space-lg); }

.mt-xs { margin-top: var(--space-xs); }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }

/* === 文本尺寸 === */
.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg { font-size: var(--text-lg); }

/* === 其他 === */
.hidden { display: none !important; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }

/* 通用页面边距 */
.section-margin {
  margin-bottom: var(--space-xl);
}
.section-title {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  margin-bottom: var(--space-md);
  color: var(--color-text);
  letter-spacing: -0.01em;
}