/* ═══════════════════════════════════════════════════════════
   Aqua Fit v3 · 首页「精选资源」视口自适应（2026-10-23）
   ─────────────────────────────────────────────────────────────
   问题：.sec 用 min-height:100svh + justify-content:center，
   「精选资源」的卡片高度主要被内容（文字块内边距 + 行间距）撑开，
   在 830~1080 这类常见窗口高度下整段比一屏高 45~138px，
   吸附停靠后最后一行卡片落进视口外 → 表现为"底部被截断"。

   修复：只作用于 #featured，让卡高与卡内文字节奏都随视口高度
   连续收缩；整段矮于一屏时仍由 .sec 的 center 居中，高时正常滚动。
   不改颜色、圆角、阴影、图片、动画，不隐藏任何卡片或文字。
   ═══════════════════════════════════════════════════════════ */

@media (min-width: 769px) and (max-height: 1100px) {

  /* 卡内文字块：内边距与行间距随视口高度收缩 */
  #featured .res .r-body {
    padding: clamp(12px, 2.1vh, 34px);
    gap: clamp(6px, 1.1vh, 12px);
  }
  #featured .res h3 { font-size: clamp(18px, 2.4vh, 32px); }
  #featured .m-hero h3 { font-size: clamp(21px, 2.9vh, 42px); }
  #featured .res p { font-size: clamp(12px, 1.5vh, 13px); line-height: 1.75; }
  #featured .res .r-kicker { font-size: clamp(9px, 1.1vh, 10.5px); }
  #featured .res .r-go { margin-top: 0; }

  /* 卡片自身高度：vh 主导，上限保持原观感 */
  #featured .m-hero { min-height: clamp(300px, 48vh, 600px); }
  #featured .m-tile { min-height: clamp(150px, 22vh, 290px); }
  #featured .m-pair .m-tile { min-height: clamp(130px, 18vh, 240px); }

  /* 标题到网格的间距同步收缩 */
  #featured .sec-head { margin-bottom: clamp(16px, 3vh, 56px); }
}

/* 更矮的窗口（≤860）再收一档 */
@media (min-width: 769px) and (max-height: 860px) {
  #featured .res .r-body { padding: clamp(10px, 1.7vh, 22px); gap: clamp(5px, .9vh, 10px); }
  #featured .m-hero { min-height: clamp(250px, 42vh, 460px); }
  #featured .m-tile { min-height: clamp(120px, 18vh, 200px); }
  #featured .m-pair .m-tile { min-height: clamp(110px, 15vh, 175px); }
  #featured .sec-head { margin-bottom: clamp(12px, 2.4vh, 34px); }
}

/* 极矮（≤700）：进一步压缩卡高与文字节奏 */
@media (min-width: 769px) and (max-height: 700px) {
  #featured .m-hero { min-height: clamp(200px, 36vh, 340px); }
  #featured .m-tile { min-height: clamp(100px, 15vh, 160px); }
  #featured .m-pair .m-tile { min-height: clamp(90px, 13vh, 140px); }
  #featured .res .r-body { padding: clamp(8px, 1.4vh, 16px); gap: 4px; }
}