/* =========================================================
   内页：案例 / 设计师 / 关于 / 服务 / 文章 / 联系 / 搜索
   ========================================================= */

/* ---------------- 筛选条 ---------------- */
.sg-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-bottom: clamp(24px, 2.6042vw, 52px);
}

.sg-filter__item {
  padding: 0 clamp(14px, 1.0417vw, 21px);
  height: 38px;
  border: 1px solid var(--sg-line);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  font-size: var(--sg-fs-14);
  transition: all .45s var(--sg-ease);
}

.sg-filter__item:hover,
.sg-filter__item.is-active { background: var(--sg-theme); border-color: var(--sg-theme); color: #fff; }

/* ---------------- 案例列表 ---------------- */
.sg-works-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.0833vw, 40px) clamp(16px, 1.3542vw, 26px);
}

@media screen and (max-width: 1280px) {
  .sg-works-grid { grid-template-columns: repeat(2, 1fr); }
}

@media screen and (max-width: 640px) {
  .sg-works-grid { grid-template-columns: 1fr; }
}

/* ---------------- 案例详情 ---------------- */
.sg-detail__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: clamp(20px, 1.5625vw, 32px);
  border-bottom: 1px solid var(--sg-line);
}

.sg-detail__title { font-size: var(--sg-fs-36); font-weight: 700; line-height: 1.4; }
.sg-detail__sub { margin-top: 10px; color: var(--sg-text-weak); font-size: var(--sg-fs-16); }

.sg-detail__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px clamp(20px, 2.0833vw, 40px);
  margin: clamp(20px, 2.0833vw, 40px) 0;
  font-size: var(--sg-fs-14);
  color: var(--sg-text-weak);
}

.sg-detail__meta b { color: var(--sg-text); font-weight: 700; margin-right: 6px; }

.sg-detail__hero { height: clamp(220px, 36.4583vw, 700px); overflow: hidden; margin-bottom: clamp(24px, 2.6042vw, 52px); }

.sg-detail__body { display: flex; gap: clamp(24px, 4.1667vw, 80px); }
.sg-detail__main { flex: 1; min-width: 0; }

.sg-detail__aside {
  width: 20.8333vw;
  flex-shrink: 0;
  align-self: flex-start;
  position: sticky;
  top: calc(var(--sg-header-h) + 20px);
}

.sg-detail__aside-card { background: #fff; padding: clamp(16px, 1.5625vw, 32px); }

.sg-detail__gallery { display: grid; gap: clamp(12px, 1.0417vw, 21px); margin-top: clamp(24px, 2.6042vw, 52px); }
.sg-detail__gallery img { width: 100%; height: auto; }

.sg-detail__nav {
  margin-top: clamp(28px, 3.125vw, 60px);
  padding-top: clamp(16px, 1.5625vw, 32px);
  border-top: 1px solid var(--sg-line);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: var(--sg-fs-14);
}

.sg-detail__nav a { color: var(--sg-text-weak); transition: color .4s var(--sg-ease); }
.sg-detail__nav a:hover { color: var(--sg-theme); }

@media screen and (max-width: 980px) {
  .sg-detail__head { display: block; }
  .sg-detail__body { display: block; }
  .sg-detail__aside { width: 100%; position: static; margin-top: 32px; }
}

/* ---------------- 相关推荐 ---------------- */
.sg-related { margin-top: clamp(40px, 4.1667vw, 84px); }

.sg-related__title {
  font-size: var(--sg-fs-24);
  font-weight: 700;
  margin-bottom: clamp(16px, 1.5625vw, 32px);
}

.sg-related__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 1.3542vw, 26px);
}

@media screen and (max-width: 980px) {
  .sg-related__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------------- 设计师列表 ---------------- */
.sg-designers-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 2.0833vw, 40px) clamp(12px, 1.3542vw, 26px);
}

@media screen and (max-width: 1280px) {
  .sg-designers-grid { grid-template-columns: repeat(3, 1fr); }
}

@media screen and (max-width: 640px) {
  .sg-designers-grid { grid-template-columns: repeat(2, 1fr); }
}

/* 设计师详情头部 */
.sg-designer-head { display: flex; gap: clamp(24px, 4.1667vw, 80px); align-items: center; }
.sg-designer-head__media { width: 28.125vw; flex-shrink: 0; aspect-ratio: 3 / 4; overflow: hidden; }
.sg-designer-head__info { flex: 1; min-width: 0; }
.sg-designer-head__name { font-size: var(--sg-fs-50); font-weight: 700; line-height: 1.3; }
.sg-designer-head__role { margin-top: 10px; color: var(--sg-theme); font-size: var(--sg-fs-20); }
.sg-designer-head__desc { margin-top: clamp(16px, 1.5625vw, 32px); line-height: 2.1; font-size: var(--sg-fs-18); }

@media screen and (max-width: 980px) {
  .sg-designer-head { display: block; }
  .sg-designer-head__media { width: 100%; margin-bottom: 24px; }
}

/* ---------------- 关于：导语 / 文化 / 历程 ---------------- */
.sg-intro { display: flex; gap: clamp(24px, 4.1667vw, 80px); align-items: flex-start; }
.sg-intro__aside { width: 30%; flex-shrink: 0; }
.sg-intro__main { flex: 1; min-width: 0; }

.sg-culture {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 1.5625vw, 32px);
  margin-top: clamp(28px, 3.125vw, 60px);
}

.sg-culture__item {
  padding: clamp(20px, 2.0833vw, 40px);
  background: #fff;
  transition: transform .6s var(--sg-ease);
}

.sg-culture__item:hover { transform: translateY(-8px); }
.sg-culture__num { font-size: var(--sg-fs-24); color: var(--sg-theme); font-weight: 700; }
.sg-culture__title { margin-top: 10px; font-size: var(--sg-fs-20); font-weight: 700; }
.sg-culture__desc { margin-top: 10px; color: var(--sg-text-weak); line-height: 1.9; font-size: var(--sg-fs-14); }

/* 发展历程 */
.sg-timeline { position: relative; margin-top: clamp(28px, 3.125vw, 60px); }

.sg-timeline__line { position: absolute; left: 0; top: 14px; width: 100%; height: 1px; background: var(--sg-line); }

.sg-timeline__list {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(180px, 1fr);
  gap: clamp(16px, 2.0833vw, 40px);
  overflow-x: auto;
  padding-bottom: 12px;
  scrollbar-width: thin;
}

.sg-timeline__item { position: relative; padding-top: 40px; }

.sg-timeline__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 2px solid var(--sg-theme);
  background: var(--sg-bg);
}

.sg-timeline__year { font-size: var(--sg-fs-32); font-weight: 700; color: var(--sg-theme); line-height: 1.2; }
.sg-timeline__title { margin-top: 8px; font-size: var(--sg-fs-18); font-weight: 700; }
.sg-timeline__desc { margin-top: 8px; color: var(--sg-text-weak); font-size: var(--sg-fs-14); line-height: 1.9; }

@media screen and (max-width: 980px) {
  .sg-intro { display: block; }
  .sg-intro__aside { width: 100%; margin-bottom: 20px; }
  .sg-culture { grid-template-columns: 1fr; }
}

/* ---------------- 服务：板块 / 流程 ---------------- */
.sg-service-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 1.5625vw, 32px);
  margin-top: clamp(28px, 3.125vw, 60px);
}

.sg-service-list__item { display: flex; gap: clamp(16px, 1.5625vw, 32px); background: #fff; padding: clamp(20px, 2.0833vw, 40px); }
.sg-service-list__media { width: 12.5vw; flex-shrink: 0; aspect-ratio: 1; overflow: hidden; }
.sg-service-list__title { font-size: var(--sg-fs-24); font-weight: 700; }
.sg-service-list__sub { margin-top: 4px; color: var(--sg-theme); font-size: var(--sg-fs-14); letter-spacing: .1em; }
.sg-service-list__desc { margin-top: 12px; color: var(--sg-text-weak); line-height: 1.9; font-size: var(--sg-fs-14); }

.sg-process {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: clamp(8px, .8333vw, 16px);
  margin-top: clamp(28px, 3.125vw, 60px);
}

.sg-process__item {
  position: relative;
  padding: clamp(16px, 1.5625vw, 32px) clamp(10px, 1.0417vw, 21px);
  background: #fff;
  text-align: center;
  transition: background .5s var(--sg-ease), color .5s var(--sg-ease);
}

.sg-process__item:hover { background: var(--sg-theme); color: #fff; }
.sg-process__num { font-size: var(--sg-fs-24); font-weight: 700; color: var(--sg-theme); transition: color .5s var(--sg-ease); }
.sg-process__item:hover .sg-process__num { color: #fff; }
.sg-process__title { margin-top: 8px; font-size: var(--sg-fs-16); }
.sg-process__desc { margin-top: 10px; color: var(--sg-text-weak); font-size: var(--sg-fs-14); line-height: 1.8; transition: color .5s var(--sg-ease); }
.sg-process__item:hover .sg-process__desc { color: rgba(255, 255, 255, .88); }

@media screen and (max-width: 1280px) {
  .sg-process { grid-template-columns: repeat(4, 1fr); }
}

@media screen and (max-width: 980px) {
  .sg-service-list { grid-template-columns: 1fr; }
  .sg-service-list__item { display: block; }
  .sg-service-list__media { width: 100%; margin-bottom: 16px; }
  .sg-process { grid-template-columns: repeat(2, 1fr); }
}

/* ---------------- 文章列表 ---------------- */
.sg-articles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 1.5625vw, 32px);
}

@media screen and (max-width: 1280px) { .sg-articles-grid { grid-template-columns: repeat(2, 1fr); } }
@media screen and (max-width: 640px) { .sg-articles-grid { grid-template-columns: 1fr; } }

.sg-article-detail { max-width: 62.5vw; margin: 0 auto; }
.sg-article-detail__title { font-size: var(--sg-fs-36); font-weight: 700; line-height: 1.4; text-align: center; }
.sg-article-detail__meta { margin: 16px 0 clamp(24px, 2.6042vw, 52px); text-align: center; color: var(--sg-text-weak); font-size: var(--sg-fs-14); }

@media screen and (max-width: 980px) { .sg-article-detail { max-width: none; } }

/* ---------------- 联系 ---------------- */
.sg-contact { display: flex; gap: clamp(24px, 4.1667vw, 80px); }
.sg-contact__info { width: 34%; flex-shrink: 0; }
.sg-contact__form { flex: 1; min-width: 0; }

.sg-contact__item { padding: clamp(14px, 1.0417vw, 21px) 0; border-bottom: 1px solid var(--sg-line); }
.sg-contact__label { color: var(--sg-text-weak); font-size: var(--sg-fs-14); }
.sg-contact__value { margin-top: 4px; font-size: var(--sg-fs-20); font-weight: 700; }

@media screen and (max-width: 980px) {
  .sg-contact { display: block; }
  .sg-contact__info { width: 100%; margin-bottom: 32px; }
}

/* ---------------- 搜索结果 ---------------- */
.sg-search-result__head { margin-bottom: clamp(20px, 2.0833vw, 40px); font-size: var(--sg-fs-18); }
.sg-search-result__head b { color: var(--sg-theme); }