/*
 * 首页“主要专栏”的最终响应式规则。
 * 旧版基础外观仍在 main.css；布局、展开行为、文字层级和图片裁切请只在本文件调整。
 * 每张卡的裁切位置来自 src/data/home.json，通过 CSS 自定义属性注入。
 */

/* 避免主要专栏的底部留白与后续精选区的顶部留白叠加。 */
.featured-section--main {
  padding-bottom: clamp(36px, 4vw, 52px);
}

.featured-section--main .home-showcase-grid .home-showcase-card .home-showcase-cover {
  min-height: 0;
  height: 100%;
  padding-bottom: 0;
}

.featured-section--main .showcase-concert-group + .showcase-concert-group {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(116, 89, 143, 0.1);
}

.featured-section--main .showcase-concert-grid {
  display: grid;
  gap: 7px;
}

.featured-section--main .home-showcase-card-concert .showcase-mini-card img.showcase-mini-logo {
  padding: 7px;
  object-fit: contain;
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.95), transparent 52%),
    color-mix(in srgb, var(--mini-accent) 18%, #fff);
}

.featured-section--main .home-showcase-card,
.featured-section--main .home-showcase-card-inner,
.featured-section--main .home-showcase-face-front {
  height: 100%;
}

.featured-section--main .home-showcase-right-stack {
  gap: 14px;
}

.featured-section--main .home-showcase-card .home-showcase-cover img {
  object-position: var(--showcase-image-position, center center);
  transform-origin: var(--showcase-image-position, center center);
}

.featured-section--main .home-showcase-card-members .home-showcase-cover-overlay,
.featured-section--main .home-showcase-card-concert .home-showcase-cover-overlay {
  padding: 16px 18px 18px;
}

.featured-section--main .home-showcase-card-members .home-showcase-cover-overlay .home-showcase-kicker,
.featured-section--main .home-showcase-card-concert .home-showcase-cover-overlay .home-showcase-kicker {
  margin-bottom: 4px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.2;
}

.featured-section--main .home-showcase-card-members .home-showcase-cover-overlay h3,
.featured-section--main .home-showcase-card-concert .home-showcase-cover-overlay h3 {
  font-size: 1.22rem;
  line-height: 1.25;
  letter-spacing: 0.04em;
}

/* Members expanded state: quiet framing for the already colourful member artwork. */
.featured-section--main .home-showcase-card-members .home-showcase-face-back {
  padding: 18px;
  background: #fbfaff;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.featured-section--main .home-showcase-card-members .home-showcase-face-back::before {
  display: none;
}

.featured-section--main .home-showcase-card-members .home-showcase-face-back::after {
  background:
    radial-gradient(circle at 96% 0%, rgba(185, 133, 232, 0.14), transparent 38%),
    radial-gradient(circle at 0% 100%, rgba(126, 199, 196, 0.08), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 248, 253, 0.98));
}

.featured-section--main .home-showcase-card-members .home-showcase-back-head {
  margin: 0 0 14px;
  padding: 1px 42px 12px 2px;
  border-bottom: 1px solid rgba(111, 87, 137, 0.1);
}

.featured-section--main .home-showcase-card-members .home-showcase-back-head .home-showcase-kicker {
  margin-bottom: 3px;
  color: #a274c9;
  font-size: 0.6rem;
  letter-spacing: 0.16em;
}

.featured-section--main .home-showcase-card-members .home-showcase-back-title-row {
  display: flex;
  align-items: center;
  gap: 9px;
}

.featured-section--main .home-showcase-card-members .home-showcase-back-head h4 {
  display: block;
  color: #41364e;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.featured-section--main .home-showcase-card-members .home-showcase-back-count {
  display: inline-flex;
  align-items: center;
  min-height: 21px;
  padding: 1px 8px;
  border: 1px solid rgba(185, 133, 232, 0.15);
  border-radius: 999px;
  color: #85669f;
  background: rgba(185, 133, 232, 0.08);
  font-size: 0.66rem;
  font-weight: 650;
}

.featured-section--main .home-showcase-card-members .home-showcase-expand-close {
  top: 0;
  right: 0;
  width: 31px;
  height: 31px;
  border: 1px solid rgba(185, 133, 232, 0.16);
  color: #976bc0;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 5px 14px rgba(75, 53, 98, 0.08);
}

.featured-section--main .home-showcase-card-members .home-showcase-back-list {
  gap: 12px;
  padding: 1px 2px 4px;
}

.featured-section--main .home-showcase-card-members .showcase-member-group {
  gap: 9px;
  padding: 10px;
  border: 1px solid rgba(111, 87, 137, 0.1);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 10px 26px rgba(70, 49, 91, 0.045);
}

.featured-section--main .home-showcase-card-members .showcase-member-group-title {
  gap: 8px;
  color: #5c4e69;
  font-size: 0.8rem;
  letter-spacing: 0.045em;
}

.featured-section--main .home-showcase-card-members .showcase-member-group-title::before {
  width: 3px;
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(180deg, #c28bea, #8d69ad);
}

.featured-section--main .home-showcase-card-members .showcase-member-group-count {
  min-width: 23px;
  padding: 2px 7px;
  color: #8668a0;
  background: #f4eef9;
  text-align: center;
}

.featured-section--main .home-showcase-card-members .showcase-member-grid {
  gap: 8px;
}

.featured-section--main .home-showcase-card-members .showcase-mini-member-art-card {
  border: 1px solid rgba(111, 87, 137, 0.11);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 5px 14px rgba(68, 48, 88, 0.055);
}

.featured-section--main .home-showcase-card-members .showcase-mini-member-art-card img {
  filter: saturate(0.94) contrast(0.99);
  transition: filter 180ms ease, transform 180ms ease;
}

.featured-section--main .home-showcase-card-members .showcase-mini-member-art-card:hover img,
.featured-section--main .home-showcase-card-members .showcase-mini-member-art-card:focus-visible img {
  filter: saturate(1) contrast(1);
  transform: scale(1.012);
}

.featured-section--main .home-showcase-card-members .showcase-member-grid
  > .showcase-mini-member-art-card:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  width: calc(50% - 4px);
  justify-self: center;
}

@media (min-width: 901px) {
  .featured-section--main .home-showcase-grid,
  .featured-section--main .home-showcase-grid:has(.home-showcase-card:hover),
  .featured-section--main .home-showcase-grid:has(.home-showcase-card:focus-within),
  .featured-section--main .home-showcase-grid:has(.home-showcase-card.is-open) {
    max-width: 1100px;
    min-height: clamp(580px, 44vw, 640px);
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: 24px;
  }

  .featured-section--main .home-showcase-card-animation.is-open,
  .featured-section--main .home-showcase-card-members.is-open,
  .featured-section--main .home-showcase-card-concert.is-open {
    min-height: 0;
    transform: translateY(-3px);
  }

  .featured-section--main .home-showcase-right-stack:has(> .home-showcase-card.is-open)
    > .home-showcase-card:not(.is-open) {
    display: none;
  }

  .featured-section--main .home-showcase-right-stack > .home-showcase-card.is-open {
    flex: 1 1 auto;
    min-height: 0;
  }

  .featured-section--main .home-showcase-card-members.is-open .home-showcase-back-list,
  .featured-section--main .home-showcase-card-concert.is-open .home-showcase-back-list {
    overflow-y: auto;
  }
}

@media (min-width: 521px) and (max-width: 900px) {
  .featured-section--main .home-showcase-grid {
    min-height: 440px;
  }
}

@media (max-width: 520px) {
  .featured-section--main {
    padding-bottom: 30px;
  }

  .featured-section--main .home-showcase-grid {
    min-height: 0;
  }

  .featured-section--main .home-showcase-right-stack {
    gap: 8px;
  }

  .featured-section--main .home-showcase-grid .home-showcase-card-animation .home-showcase-cover {
    height: auto;
    padding-bottom: 110%;
  }

  .featured-section--main .home-showcase-right-stack > .home-showcase-card .home-showcase-cover {
    height: 100%;
    padding-bottom: 0;
  }

  .featured-section--main .home-showcase-card .home-showcase-cover img {
    object-position: var(--showcase-image-position-mobile, var(--showcase-image-position, center center));
    transform-origin: var(--showcase-image-position-mobile, var(--showcase-image-position, center center));
  }

  .featured-section--main .home-showcase-card-animation .home-showcase-cover-overlay {
    padding: 14px 16px 16px;
  }

  .featured-section--main .home-showcase-card-animation .home-showcase-cover-overlay .home-showcase-kicker {
    margin-bottom: 4px;
    font-size: 0.58rem;
  }

  .featured-section--main .home-showcase-card-animation .home-showcase-cover-overlay h3 {
    font-size: 1.16rem;
  }

  .featured-section--main .home-showcase-card-members .home-showcase-cover-overlay,
  .featured-section--main .home-showcase-card-concert .home-showcase-cover-overlay {
    padding: 10px 11px 11px;
  }

  .featured-section--main .home-showcase-card-members .home-showcase-cover-overlay .home-showcase-kicker,
  .featured-section--main .home-showcase-card-concert .home-showcase-cover-overlay .home-showcase-kicker {
    margin-bottom: 3px;
    font-size: 0.52rem;
    letter-spacing: 0.1em;
  }

  .featured-section--main .home-showcase-card-members .home-showcase-cover-overlay h3,
  .featured-section--main .home-showcase-card-concert .home-showcase-cover-overlay h3 {
    font-size: 0.96rem;
    line-height: 1.2;
  }

  .featured-section--main .home-showcase-grid:has(.home-showcase-card.is-open) {
    grid-template-columns: minmax(0, 1fr);
  }

  .featured-section--main .home-showcase-right-stack:has(> .home-showcase-card.is-open) {
    grid-column: 1 / -1;
    width: 100%;
  }

  .featured-section--main .home-showcase-right-stack:has(> .home-showcase-card-members.is-open),
  .featured-section--main .home-showcase-right-stack > .home-showcase-card-members.is-open {
    min-height: 880px;
  }

  .featured-section--main .home-showcase-card-members .home-showcase-face-back {
    padding: 12px 9px 14px;
  }

  .featured-section--main .home-showcase-card-members .home-showcase-back-head {
    margin-bottom: 10px;
    padding: 0 38px 9px 2px;
  }

  .featured-section--main .home-showcase-card-members .home-showcase-back-head h4 {
    font-size: 0.98rem;
  }

  .featured-section--main .home-showcase-card-members .home-showcase-back-list {
    gap: 9px;
    padding: 0 1px 2px;
  }

  .featured-section--main .home-showcase-card-members .showcase-member-group {
    gap: 7px;
    padding: 7px;
    border-radius: 13px;
  }

  .featured-section--main .home-showcase-card-members .showcase-member-grid {
    gap: 6px;
  }

  .featured-section--main .home-showcase-card-members .showcase-mini-member-art-card {
    border-radius: 10px;
  }

  .featured-section--main .home-showcase-card-members .showcase-member-grid
    > .showcase-mini-member-art-card:last-child:nth-child(odd) {
    width: calc(50% - 3px);
  }

  /* 2026-07-19: 移动端 concert 卡打开展示样式与桌面端对齐
     - min-height 由 600px 改为 651px (与桌面端一致)
     - 让 concert 卡的展开高度在 521-900px 之间保持一致 */
  .featured-section--main .home-showcase-right-stack:has(> .home-showcase-card-concert.is-open),
  .featured-section--main .home-showcase-right-stack > .home-showcase-card-concert.is-open {
    min-height: 651px;
  }

  .featured-section--main .home-showcase-right-stack > .home-showcase-card.is-open {
    flex: 1 1 auto;
    width: 100%;
  }

  .featured-section--main .home-showcase-card-animation.is-open {
    min-height: 400px;
  }

  .featured-section--main .home-showcase-card-concert.is-open .home-showcase-back-list {
    overflow-y: auto;
  }
}

/* ==========================================================
 * 「主要专栏」骨架屏（loading 时）
 * 2026-07-20 加：
 * - 与实际 1+2 布局同构，左 1 大 + 右 2 小
 * - 颜色贴合页面（cream + 淡紫）
 * - shimmer 动画（1.8s loop）提示加载
 * ========================================================== */
.home-showcase-grid--skeleton .home-showcase-card-skeleton {
  position: relative;
  overflow: hidden;
  background: var(--paper, #fdfaff);
  border: 1px solid rgba(185, 133, 232, 0.18);
  border-radius: 20px;
  /* 桌面高度与实际大卡一致 (min-height 440px) */
  min-height: 440px;
}

.home-showcase-grid--skeleton .home-showcase-card-skeleton::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.55) 50%,
    transparent 100%
  );
  animation: home-showcase-skeleton-shimmer 1.8s ease-in-out infinite;
}

.home-showcase-grid--skeleton .home-showcase-card-skeleton::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(185, 133, 232, 0.06);
  transform: translate(-50%, -50%);
}

@keyframes home-showcase-skeleton-shimmer {
  0% { transform: translateX(-110%); }
  100% { transform: translateX(110%); }
}

.home-showcase-grid--skeleton .home-showcase-right-stack {
  gap: 0;
}

.home-showcase-grid--skeleton .home-showcase-right-stack > .home-showcase-card-skeleton {
  min-height: 0;
  flex: 1 1 0;
}

@media (max-width: 760px) {
  .home-showcase-grid--skeleton .home-showcase-card-skeleton {
    min-height: 360px;
  }
}

@media (max-width: 520px) {
  .home-showcase-grid--skeleton .home-showcase-card-skeleton {
    min-height: 0;
    padding-bottom: 110%;
    height: auto;
    flex: 0 0 auto;
  }
  .home-showcase-grid--skeleton .home-showcase-right-stack > .home-showcase-card-skeleton {
    padding-bottom: 110%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-showcase-grid--skeleton .home-showcase-card-skeleton::before {
    animation: none;
  }
}