/* ============================================================
   乡助通 · 宽屏摊开 + 纵向压缩覆盖样式
   由运维层通过 nginx sub_filter 以 <link> 注入到每个页面
   目标：宽屏下容器更宽、纵向留白更少、一屏承载更多内容
   ============================================================ */

/* ---------- 1. 主容器加宽（1152px → 1408px → 1536px） ---------- */
@media (min-width: 1280px) {
  .container-tight { max-width: 88rem; }
}
@media (min-width: 1600px) {
  .container-tight { max-width: 96rem; }
}

/* ---------- 2. 文章正文加宽：768px → 960px ---------- */
@media (min-width: 1024px) {
  .max-w-3xl { max-width: 70rem; }
}

/* ---------- 3. 纵向压缩：精准命中真实使用的间距类 ---------- */
/* 3.1 首页 Hero 区（padding-block 最大头：sm:py-28 = 112px） */
@media (min-width: 640px) {
  .sm\:py-28 { padding-block: 3.5rem; }   /* 112px → 56px */
}
/* 3.2 各内容区块 .page-section（56px → 32px），比通用 py-20 更常用 */
@media (min-width: 640px) {
  .page-section { padding-block: 2rem; }
}
/* 3.3 通用大间距类 */
@media (min-width: 768px) {
  .py-20 { padding-block: 3rem; }        /* 80px → 48px */
  .py-24 { padding-block: 3.5rem; }       /* 96px → 56px */
  .py-14 { padding-block: 2.25rem; }      /* 56px → 36px */
  .py-12 { padding-block: 1.75rem; }      /* 48px → 28px */
  .py-10 { padding-block: 1.5rem; }
  .mt-14 { margin-top: 2rem; }
  .mb-14 { margin-bottom: 2rem; }
  .gap-10 { gap: 1.75rem; }               /* 40px → 28px */
}

/* ---------- 4. 文章正文紧凑化（保持可读性，只提密度） ---------- */
@media (min-width: 768px) {
  .leading-8 { line-height: 1.85; }       /* 32px → 29.6px */
  :where(.space-y-4 > :not(:last-child)) { margin-block-end: 0.875rem; }
  :where(.space-y-3 > :not(:last-child)) { margin-block-end: 0.625rem; }
}

/* ---------- 5. 八大功能卡排版完整性 ----------
   功能卡用 lg:grid-cols-3（8 张卡 → 3 列排成 3+3+2，最后行缺 1 张留大缺口）。
   改为 4 列正好 2 行满排。
   注意：裸 .grid-cols-3 不能动 —— 首页数据条（34省份/8+功能/0费用，固定3项）
   与社群页 Tab 切换器（固定3个）都依赖它。 */
@media (min-width: 1280px) {
  .lg\:grid-cols-3 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ============================================================
   P27 fix (2026-10-07): horizontal overflow on mobile /news tab bar
   Root cause: the category tab group w=464px > 390px viewport,
   scrollWidth-clientWidth = 91px (CDP measured).
   Approach: narrow-screen only, container scrollable (not compressed text).
   ============================================================ */
@media (max-width: 640px) {
  .relative.flex.p-1.group.bg-elevated.rounded-lg.w-full {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .relative.flex.p-1.group.bg-elevated.rounded-lg.w-full::-webkit-scrollbar {
    display: none;
  }
  .relative.flex.p-1.group.bg-elevated.rounded-lg.w-full > button {
    flex: 1 0 auto;
    min-width: 0;
  }
  body { overflow-x: hidden; }
}

/* ---------- P27 (2026-10-07) /news mobile horizontal overflow 91px ----------
   Measured: tablist w=464px > viewport 390px; scrollWidth-clientWidth=91px.
   Root cause: parent `.flex.items-center.gap-2.flex-col` stretches the
   tablist, and w-full resolves against that widened parent.
   Fix: cap the tablist to viewport width and let it scroll internally;
        also clamp its children with flex-shrink:0 so labels stay readable.
   Verified with CDP: overflowPx must drop 91 -> 0. */
@media (max-width: 640px) {
  .container-tight .mb-5 > div > .flex.items-center.gap-2.flex-col {
    max-width: 100%;
    min-width: 0;
  }
  .container-tight .mb-5 > div > .flex.items-center.gap-2.flex-col > [role="tablist"] {
    max-width: 100vw;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .container-tight .mb-5 > div > .flex.items-center.gap-2.flex-col > [role="tablist"]::-webkit-scrollbar {
    display: none;
  }
  .container-tight [role="tablist"] > button {
    flex: 0 0 auto;
  }
  .container-tight .mb-5 { min-width: 0; }
  .container-tight .grid { min-width: 0; }
  .container-tight .grid > * { min-width: 0; }
}

/* ---------- P27 fix round 3 (2026-10-07): the real constraint ----------
   CDP chain proved: .grid is 358px but its item <div> is 464px because a
   grid item defaults to min-width:auto (min-content), so it refuses to
   shrink below the tablist's intrinsic width. Fix = min-width:0 on the
   grid item + overflow scroll on the tablist. */
@media (max-width: 640px) {
  .container-tight .grid > div { min-width: 0; max-width: 100%; }
  .container-tight .grid > div > .mb-5 { min-width: 0; max-width: 100%; }
  .container-tight .grid > div > .mb-5 > div { min-width: 0; max-width: 100%; }
  .container-tight .grid > div > .mb-5 > div > [role="tablist"] {
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .container-tight .grid > div > .mb-5 > div > [role="tablist"] > button {
    flex: 0 0 auto;
  }
}

/* ---------- P27 fix round 4 (2026-10-07) FINAL: enforce with !important ----------
   CDP proof: selectors DO match and (max-width:640px) DOES apply, but the
   declaration loses the cascade against the framework utility classes.
   Inline test: setting min-width:0 on the grid item moved it 464px -> 358px
   and scrollWidth 481 -> 427. So the rule is correct, it just needs to win.
   compact.css is loaded as the LAST stylesheet, so !important is safe here
   and scoped to <=640px only (no desktop side effects). */
@media (max-width: 640px) {
  .container-tight .grid > div,
  .container-tight .grid > div > .mb-5,
  .container-tight .grid > div > .mb-5 > div,
  .container-tight .grid > div > .mb-5 > div > div[role="tablist"] {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  .container-tight .grid > div > .mb-5 > div > div[role="tablist"] {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .container-tight .grid > div > .mb-5 > div > div[role="tablist"]::-webkit-scrollbar {
    display: none !important;
  }
  .container-tight .grid > div > .mb-5 > div > div[role="tablist"] > button {
    flex: 0 0 auto !important;
  }
  .container-tight .grid > div,
  .container-tight .grid > div > * {
    overflow-wrap: break-word;
    word-break: normal;
  }
}

/* ---------- P27 fix round 5 (2026-10-07): residual 37px on /news ----------
   Remaining offenders (CDP, 390px viewport):
     DIV.flex.items-center.gap-1           w=464  (sidebar hot-articles row)
     DIV.rounded-md.font-medium...          w=464  (its button)
     OL.fixed.flex.flex-col.w-[calc(100%-2rem)]  (fixed overlay, offscreen by design)
   Fix: let every grid child and its rows shrink; truncate long labels. */
@media (max-width: 640px) {
  .container-tight .grid > div,
  .container-tight .grid > div > *,
  .container-tight .grid > div > * > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  .container-tight .grid .flex.items-center.gap-1,
  .container-tight .grid .rounded-md.font-medium.inline-flex {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }
  .container-tight .grid .truncate,
  .container-tight .grid .line-clamp-1,
  .container-tight .grid .line-clamp-2 {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}