/* --- 项目案例列表页 ---
   基础令牌、Hero、卡片、区块标题复用 /styles/base.css 与 /index.css；
   本文件只处理「精选案例」的双栏布局与方法区脚注。 */

.case-featured {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 56px;
  align-items: center;
}

.case-featured__media {
  display: block;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.case-featured__media .case-browser {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.case-featured__media:hover .case-browser {
  transform: translateY(var(--lift));
  box-shadow: 0 24px 50px -18px rgba(15, 27, 45, 0.28);
}

.case-featured__body {
  min-width: 0;
}

.case-featured__meta {
  margin-bottom: 10px;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.06em;
  color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums;
}

.case-featured__title {
  margin-bottom: 14px;
  font-size: 26px;
  line-height: 1.35;
}

.case-featured__title a {
  color: inherit;
}

/* 中文标题里的固定词组不要在中间断行（如「一间十年老馆」） */
.case-featured__title .case-nowrap {
  white-space: nowrap;
}

.case-featured__title a:hover {
  color: var(--color-primary);
}

.case-featured__desc {
  margin-bottom: 18px;
  font-size: var(--font-size-base);
  line-height: 1.75;
  color: var(--color-text-secondary);
}

.case-featured__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
}

.case-featured__actions .btn {
  margin: 0;
}

/* 第二个及以后的案例：与上一条用发丝线隔开，图文左右互换，
   让「精选案例」可以按条目往下长，而不是一堆重复的双栏块。 */
.case-featured + .case-featured {
  margin-top: 64px;
  padding-top: 64px;
  border-top: 1px solid var(--color-hairline);
}

.case-featured--reverse {
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
}

.case-featured--reverse .case-featured__body {
  order: 1;
}

.case-featured--reverse .case-featured__media {
  order: 2;
}

.case-note {
  max-width: 720px;
  margin: 32px auto 0;
  font-size: var(--font-size-sm);
  line-height: 1.7;
  text-align: center;
  color: var(--color-text-secondary);
}

@media (max-width: 992px) {
  .case-featured {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .case-featured__body {
    max-width: 680px;
  }

  /* 单列时统一「先图后文」，与第一条案例一致 */
  .case-featured--reverse .case-featured__body,
  .case-featured--reverse .case-featured__media {
    order: initial;
  }

  .case-featured + .case-featured {
    margin-top: 48px;
    padding-top: 48px;
  }
}

@media (max-width: 768px) {
  .case-featured__title {
    font-size: 22px;
  }
}

@media (max-width: 480px) {
  .case-featured__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .case-featured__actions .btn {
    width: 100%;
  }
}

/* 3 张方法卡：桌面固定 3 列，≤992px 单列；
   避免 769-830px 区间出现「2 列 + 1 张落单」 */
.case-method-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 992px) {
  .case-method-grid {
    grid-template-columns: 1fr;
  }
}