/* enhance.css — 视觉增强叠加层（在 visual-polish.css 之后加载）
   目标：在不改动现有深色首屏与代理逻辑的前提下，
   引入精选建筑参考图，提升首页节奏与视觉档次。 */

:root {
  --muse-radius: 22px;
  --muse-shadow: 0 18px 46px rgba(16, 24, 32, .12);
  --muse-shadow-hover: 0 30px 70px rgba(16, 24, 32, .2);
}

/* ============ 首页：灵感参考图集 ============ */
.muse-section {
  position: relative;
  padding: 84px 0 92px;
  background:
    radial-gradient(120% 90% at 12% 0%, rgba(78, 168, 238, .08), transparent 48%),
    radial-gradient(120% 90% at 88% 8%, rgba(34, 200, 212, .08), transparent 46%),
    linear-gradient(180deg, #fbfaf6 0%, #f4f1ea 100%);
}

.muse-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 30px;
}

.muse-head .muse-meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  padding: 9px 16px;
  border-radius: 999px;
  color: #16323f;
  background: rgba(255, 255, 255, .7);
  border: 1px solid rgba(16, 24, 32, .08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
  font-size: 13px;
  font-weight: 750;
}

.muse-head .muse-meta::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2fd4d0, #3797e1);
  box-shadow: 0 0 0 4px rgba(47, 212, 208, .18);
}

.muse-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 196px;
  gap: 16px;
}

.muse-item {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--muse-radius);
  background: #e7eaee;
  box-shadow: var(--muse-shadow);
  isolation: isolate;
  transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s ease;
}

.muse-item.muse-feature {
  grid-column: span 2;
  grid-row: span 2;
}

.muse-item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .7s cubic-bezier(.2, .7, .2, 1);
}

.muse-item::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(8, 14, 20, 0) 38%, rgba(8, 14, 20, .68) 100%);
  opacity: .9;
  transition: opacity .3s ease;
}

.muse-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--muse-shadow-hover);
}

.muse-item:hover img {
  transform: scale(1.06);
}

.muse-item figcaption {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: 16px 18px;
  color: #fff;
}

.muse-item figcaption span {
  display: inline-block;
  margin-bottom: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255, 248, 215, .92);
  color: #15303d;
  font-size: 11.5px;
  font-weight: 850;
  letter-spacing: .02em;
}

.muse-item figcaption b {
  display: block;
  font-size: 15px;
  font-weight: 750;
  line-height: 1.4;
  text-shadow: 0 4px 18px rgba(0, 0, 0, .5);
}

.muse-item.muse-feature figcaption {
  padding: 22px 24px;
}

.muse-item.muse-feature figcaption b {
  font-size: 22px;
  letter-spacing: -.02em;
}

.muse-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-top: 22px;
  color: rgba(16, 24, 32, .56);
  font-size: 13.5px;
}

.muse-foot .muse-chip {
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .78);
  border: 1px solid rgba(16, 24, 32, .08);
  color: #1c2a35;
  font-weight: 650;
}

/* ============ 首页专题卡：换用新参考图封面 ============ */
.topic-grid .topic-card:nth-child(1) {
  background: linear-gradient(180deg, rgba(16, 24, 32, .06), rgba(16, 24, 32, .82)), url("/assets/u-muse-skyline.png") center / cover;
}
.topic-grid .topic-card:nth-child(2) {
  background: linear-gradient(180deg, rgba(16, 24, 32, .04), rgba(16, 24, 32, .8)), url("/assets/u-muse-parametric.png") center / cover;
}
.topic-grid .topic-card:nth-child(3) {
  background: linear-gradient(180deg, rgba(16, 24, 32, .04), rgba(16, 24, 32, .8)), url("/assets/u-muse-mist.png") center / cover;
}
.topic-grid .topic-card:nth-child(4) {
  background: linear-gradient(180deg, rgba(16, 24, 32, .04), rgba(16, 24, 32, .8)), url("/assets/u-muse-sunset.png") center / cover;
}

/* ============ 首页案例墙：换用新参考图封面 ============ */
.case-wall .case-card:nth-child(1) {
  background: linear-gradient(180deg, rgba(16, 24, 32, .04), rgba(16, 24, 32, .84)), url("/assets/u-case-urban.png") center / cover;
}
.case-wall .case-card:nth-child(2) {
  background: linear-gradient(180deg, rgba(16, 24, 32, .02), rgba(16, 24, 32, .8)), url("/assets/u-case-interior.png") center / cover;
}
.case-wall .case-card:nth-child(3) {
  background: linear-gradient(180deg, rgba(16, 24, 32, .04), rgba(16, 24, 32, .8)), url("/assets/u-muse-greenterrace.png") center / cover;
}

/* 支持 image-set 的浏览器优先使用 avif/webp */
@supports (background-image: image-set(url("/assets/u-muse-skyline.avif") type("image/avif"))) {
  .topic-grid .topic-card:nth-child(1) {
    background: linear-gradient(180deg, rgba(16, 24, 32, .06), rgba(16, 24, 32, .82)), image-set(url("/assets/u-muse-skyline.avif") type("image/avif"), url("/assets/u-muse-skyline.webp") type("image/webp"), url("/assets/u-muse-skyline.png") type("image/png")) center / cover;
  }
  .topic-grid .topic-card:nth-child(2) {
    background: linear-gradient(180deg, rgba(16, 24, 32, .04), rgba(16, 24, 32, .8)), image-set(url("/assets/u-muse-parametric.avif") type("image/avif"), url("/assets/u-muse-parametric.webp") type("image/webp"), url("/assets/u-muse-parametric.png") type("image/png")) center / cover;
  }
  .topic-grid .topic-card:nth-child(3) {
    background: linear-gradient(180deg, rgba(16, 24, 32, .04), rgba(16, 24, 32, .8)), image-set(url("/assets/u-muse-mist.avif") type("image/avif"), url("/assets/u-muse-mist.webp") type("image/webp"), url("/assets/u-muse-mist.png") type("image/png")) center / cover;
  }
  .topic-grid .topic-card:nth-child(4) {
    background: linear-gradient(180deg, rgba(16, 24, 32, .04), rgba(16, 24, 32, .8)), image-set(url("/assets/u-muse-sunset.avif") type("image/avif"), url("/assets/u-muse-sunset.webp") type("image/webp"), url("/assets/u-muse-sunset.png") type("image/png")) center / cover;
  }
  .case-wall .case-card:nth-child(1) {
    background: linear-gradient(180deg, rgba(16, 24, 32, .04), rgba(16, 24, 32, .84)), image-set(url("/assets/u-case-urban.avif") type("image/avif"), url("/assets/u-case-urban.webp") type("image/webp"), url("/assets/u-case-urban.png") type("image/png")) center / cover;
  }
  .case-wall .case-card:nth-child(2) {
    background: linear-gradient(180deg, rgba(16, 24, 32, .02), rgba(16, 24, 32, .8)), image-set(url("/assets/u-case-interior.avif") type("image/avif"), url("/assets/u-case-interior.webp") type("image/webp"), url("/assets/u-case-interior.png") type("image/png")) center / cover;
  }
  .case-wall .case-card:nth-child(3) {
    background: linear-gradient(180deg, rgba(16, 24, 32, .04), rgba(16, 24, 32, .8)), image-set(url("/assets/u-muse-greenterrace.avif") type("image/avif"), url("/assets/u-muse-greenterrace.webp") type("image/webp"), url("/assets/u-muse-greenterrace.png") type("image/png")) center / cover;
  }
}

/* ============ 响应式 ============ */
@media (max-width: 1100px) {
  .muse-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 172px;
  }
  .muse-item.muse-feature {
    grid-column: span 2;
    grid-row: span 2;
    min-height: 0;
  }
}

@media (max-width: 640px) {
  .muse-section {
    padding: 60px 0 64px;
  }
  .muse-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .muse-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: 188px;
  }
  .muse-item.muse-feature {
    grid-column: span 1;
    grid-row: span 2;
    min-height: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .muse-item,
  .muse-item img {
    transition: none !important;
  }
  .muse-item:hover {
    transform: none !important;
  }
  .muse-item:hover img {
    transform: none !important;
  }
}