/**
 * 全站版心宽/窄：仅由 body.site-layout-wide 控制（localStorage: siteLayoutWidth）
 * 默认宽版（约 1560px）；仅当 siteLayoutWidth === 'narrow' 时为窄版（约 1300px）
 */

body.site-layout-wide .Content,
body.site-layout-wide .Content.index-home-content,
body.site-layout-wide .index-home-content {
  max-width: 1560px !important;
}

body.site-layout-wide .nav .layui-container {
  max-width: 1560px !important;
}

body.site-layout-wide .index-sample-pagination-outer {
  max-width: 1560px !important;
}

body.site-layout-wide .sound-detail-container {
  max-width: 1560px !important;
}

body.site-layout-wide .compact-form {
  max-width: 1560px !important;
}

/* 入驻页：宽屏时表单仍用窄版心（640px），不受上条影响；顶栏 .nav 仍随全站宽屏 */
body.site-layout-wide.teacher-apply-page .compact-form {
  max-width: 640px !important;
}

body.site-layout-wide.teacher-apply-page .Content {
  max-width: 1300px !important;
}

/* 顶栏：版心宽/窄切换（与 #login-btn 同款浅底 + 圆角胶囊，默认即有背景） */
.site-layout-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: auto;
  min-height: 32px;
  padding: 6px 10px 6px 8px;
  margin: 0;
  border: none;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.04);
  color: #6b7280;
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.2s ease, background 0.2s ease;
  box-sizing: border-box;
}

.site-layout-toggle__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.site-layout-toggle__text {
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.site-layout-toggle svg {
  display: block;
  flex-shrink: 0;
}

.site-layout-toggle:hover {
  color: #111827;
  background: rgba(0, 0, 0, 0.08);
}

.site-layout-toggle:active {
  background: rgba(0, 0, 0, 0.1);
}

.site-layout-toggle:focus-visible {
  outline: 2px solid var(--color-primary, #0f766e);
  outline-offset: 2px;
}

/* 窄屏：显示「切宽」图标；宽屏：显示「切窄」图标 */
body:not(.site-layout-wide) .site-layout-toggle .site-layout-toggle__icon--to-narrow {
  display: none;
}

body.site-layout-wide .site-layout-toggle .site-layout-toggle__icon--to-wide {
  display: none;
}

@media screen and (min-width: 961px) {
  .site-layout-toggle {
    display: inline-flex;
  }
}

body.dark-mode .site-layout-toggle {
  background: rgba(255, 255, 255, 0.08);
  border: none;
  color: rgba(255, 255, 255, 0.88);
}

body.dark-mode .site-layout-toggle:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

body.dark-mode .site-layout-toggle:active {
  background: rgba(255, 255, 255, 0.18);
}

/* ========== 首页：宽屏多一列（真实 DOM 见 index.html） ========== */
/*
 * 最新入驻 / 限时打折 / 推荐男声女声：横向滚动 .newest-teachers-scroll、.discount-teachers-scroll
 * 基准列数见 Index.css 1089–1095、1409–1428、1432–1457（无 .voice-cards-container）
 */
@media (min-width: 1201px) {
  body.site-layout-wide.index-page .newest-teachers-scroll .Teacher,
  body.site-layout-wide.index-page .newest-teachers-scroll .voice-card,
  body.site-layout-wide.index-page .discount-teachers-scroll .discount-teacher-card {
    width: calc((100% - 75px) / 6) !important;
    flex: 0 0 calc((100% - 75px) / 6) !important;
  }
}

@media (max-width: 1200px) and (min-width: 993px) {
  body.site-layout-wide.index-page .newest-teachers-scroll .Teacher,
  body.site-layout-wide.index-page .newest-teachers-scroll .voice-card,
  body.site-layout-wide.index-page .discount-teachers-scroll .discount-teacher-card {
    width: calc((100% - 60px) / 5) !important;
    flex: 0 0 calc((100% - 60px) / 5) !important;
  }
}

@media (max-width: 992px) and (min-width: 769px) {
  body.site-layout-wide.index-page .newest-teachers-scroll .Teacher,
  body.site-layout-wide.index-page .newest-teachers-scroll .voice-card,
  body.site-layout-wide.index-page .discount-teachers-scroll .discount-teacher-card {
    width: calc((100% - 36px) / 4) !important;
    flex: 0 0 calc((100% - 36px) / 4) !important;
  }
}

/* 底部「推荐样音」网格：与 Index.css 一致保持 2 列（宽屏不再强制 3 列，避免标题挤爆；679px 以下单列由 Index.css 控制） */
@media (min-width: 679px) {
  body.site-layout-wide.index-page .index-sound-list-wrapper {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
