/* =========================================================
 * baseline.s-prefix.css — s-prefix 系主题底座
 * 契约：
 *   - 不使用 !important
 *   - 全量使用 .s- 前缀容器（容器隔离）
 *   - Header min-height 防 CLS
 *   - 图片强制 aspect-ratio + object-fit
 *   - 与 base.css 叠加生效，排在主题 main 之前
 * 对应 hash_class_count ≥ 0 的 s-prefix / default 变体
 * ========================================================= */

/* 1. 容器 */
.s-container,
.s-wrapper {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 16px;
}

@media (max-width: 768px) {
  .s-container,
  .s-wrapper {
    padding-inline: 12px;
  }
}

/* 2. Header / 品牌区 */
.site-header,
._heading,
.s-fixed-m,
.s-fixed-d {
  display: flex;
  align-items: center;
  min-height: 64px;
  padding-block: 8px;
}

@media (max-width: 768px) {
  .site-header,
  ._heading,
  .s-fixed-m,
  .s-fixed-d {
    min-height: 56px;
  }
}

.s-fixed-m,
.s-fixed-d {
  position: sticky;
  top: 0;
  z-index: 99;
  background: #fff;
}

/* 3. 主菜单 */
._heading ul,
.site-header ul {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

._heading a,
.site-header a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding-inline: 10px;
}

/* 4. 图片区强制比例 */
.s-image,
.s-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
  background: #f3f3f3;
}

.s-image--square,
.s-thumb--square { aspect-ratio: 1 / 1; }

.s-image--banner,
.s-thumb--banner { aspect-ratio: 21 / 9; }

.s-image--logo,
.s-thumb--logo {
  aspect-ratio: 3 / 2;
  object-fit: contain;
  background: transparent;
}

/* wp 常规图像 wrapper（s-prefix 下往往直接 <img class="s-image">，但也有 figure） */
figure.s-image-wrapper,
.s-image-wrapper {
  margin: 0;
  width: 100%;
}

/* 5. 按钮 */
.s-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding-inline: 16px;
  border-radius: 6px;
  font-weight: 600;
  line-height: 1.2;
  user-select: none;
  transition: transform .15s ease, opacity .15s ease;
}

.s-btn:hover { transform: translateY(-1px); }
.s-btn:active { transform: translateY(0); opacity: .85; }

.s-btn--primary { background: #e53935; color: #fff; }
.s-btn--ghost   { background: transparent; border: 1px solid currentColor; }

/* 6. 栅格（s-prefix 常见 3 列 / 4 列 card 列表） */
.s-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.s-grid--3 { grid-template-columns: repeat(3, 1fr); }
.s-grid--4 { grid-template-columns: repeat(4, 1fr); }

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

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

/* 7. 卡片 */
.s-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
}

.s-card__body { padding: 12px 14px; }
.s-card__title { font-size: 16px; line-height: 1.4; margin-bottom: 6px; }
.s-card__desc  { font-size: 13px; color: #666; line-height: 1.5; }