/* ==========================================================================
   学习空间 · 分辨率自适应层
   在 style.css / tech.css 之后加载。把原来写死的尺寸收敛成变量，再按分辨率分档。

   断点体系
     ≥3200  超宽屏 / 双 4K
     ≥2560  4K
     ≥1920  2K / 大屏
     ≥1680  大屏显示器
     ≥1440  主流桌面
     1241-1439  笔记本（默认档）
     1001-1240  小笔记本：侧栏收窄，保住正文列
     721-1000   平板：单栏
     461-720    大手机
     361-460    手机
     ≤360       小屏手机
     矮屏（横屏手机）单独处理
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. 把写死的尺寸收敛成变量（原样沿用默认值，行为不变）
   -------------------------------------------------------------------------- */

:root {
  --maxw: 1120px;
  --sidebar-w: 296px;
  --admin-side-w: 320px;
  --gutter: 24px;
  --read-width: 760px;
  --gutter-y: 40px;
}

/* 双栏只在 ≥1001px 启用。
   注意：这里必须包媒体查询——不加的话会盖掉 style.css 里
   `@media (max-width:1000px)` 的单栏规则（同特异性、后加载胜出），
   结果小屏被挤成两栏。 */
@media (min-width: 1001px) {
  .layout-main {
    grid-template-columns: minmax(0, 1fr) var(--sidebar-w);
  }

  .admin-grid {
    grid-template-columns: minmax(0, 1fr) var(--admin-side-w);
  }
}

.container-narrow {
  max-width: var(--read-width);
}

.container,
.header-inner,
.hero-inner,
.footer-inner {
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.container {
  padding-top: var(--gutter-y);
  padding-bottom: calc(var(--gutter-y) + 24px);
}

/* --------------------------------------------------------------------------
   1. 桌面与超宽屏：内容跟着放大，别让两侧空成一片
   -------------------------------------------------------------------------- */

@media (min-width: 1440px) {
  :root {
    --maxw: 1230px;
    --sidebar-w: 312px;
    --admin-side-w: 340px;
    --read-width: 800px;
  }
}

@media (min-width: 1680px) {
  :root {
    --maxw: 1340px;
    --sidebar-w: 328px;
    --admin-side-w: 356px;
    --gutter: 32px;
    --read-width: 830px;
    --gutter-y: 48px;
  }

  .post-body {
    font-size: 17.5px;
  }
}

@media (min-width: 1920px) {
  :root {
    --maxw: 1460px;
    --sidebar-w: 348px;
    --admin-side-w: 372px;
    --read-width: 860px;
    --gutter-y: 56px;
  }

  body {
    font-size: 16.5px;
  }

  .post-body {
    font-size: 18px;
  }

  .hero h1 {
    font-size: clamp(44px, 2.4vw, 56px);
  }

  .post-title {
    font-size: clamp(38px, 2.1vw, 48px);
  }

  .post-card h3 {
    font-size: 22px;
  }

  .page-head h1 {
    font-size: 32px;
  }

  .sidebar {
    gap: 20px;
  }
}

@media (min-width: 2560px) {
  :root {
    --maxw: 1660px;
    --sidebar-w: 380px;
    --admin-side-w: 400px;
    --read-width: 910px;
    --gutter: 40px;
    --gutter-y: 64px;
    --header-h: 74px;
  }

  body {
    font-size: 17px;
  }

  .post-body {
    font-size: 18.5px;
  }

  .hero h1 {
    font-size: clamp(52px, 2vw, 66px);
  }

  .hero p {
    font-size: 19px;
    max-width: 720px;
  }

  .post-title {
    font-size: clamp(44px, 1.8vw, 56px);
  }

  .page-head h1 {
    font-size: 36px;
  }

  .hero-stat b {
    font-size: 26px;
  }

  .post-card {
    padding: 28px 32px;
  }

  .card {
    padding: 24px;
  }

  .brand-mark {
    width: 38px;
    height: 38px;
  }

  /* 徽章变大后图标跟着放大，别显得空 */
  .brand-mark svg {
    width: 24px;
    height: 24px;
  }
}

@media (min-width: 3200px) {
  :root {
    --maxw: 1920px;
    --read-width: 960px;
  }
}

/* --------------------------------------------------------------------------
   2. 小笔记本（1001–1240）：侧栏收窄，优先保住正文列
   -------------------------------------------------------------------------- */

@media (min-width: 1001px) and (max-width: 1240px) {
  :root {
    --sidebar-w: 264px;
    --admin-side-w: 292px;
    --read-width: 700px;
  }

  .layout-main {
    gap: 30px;
  }

  .admin-grid {
    gap: 18px;
  }

  .login-shell {
    gap: 40px;
  }
}

/* 登录页在 1000 以下改单列，表单一律排前面 */
@media (max-width: 1000px) {
  .login-screen {
    padding: 40px 20px 26px;
  }

  .login-shell {
    max-width: 400px;
    gap: 22px;
  }
}

/* --------------------------------------------------------------------------
   3. 平板（721–1000）：已收成单栏，这里放开阅读宽度上限
   -------------------------------------------------------------------------- */

@media (min-width: 721px) and (max-width: 1000px) {
  :root {
    --gutter: 22px;
  }

  .container {
    padding-top: 32px;
    padding-bottom: 52px;
  }

  /* 单栏了就不必再限制阅读宽度 */
  .container-narrow {
    max-width: 100%;
  }

  .sidebar {
    gap: 16px;
  }

  .post-body {
    font-size: 16.5px;
  }
}

/* --------------------------------------------------------------------------
   4. 手机
   -------------------------------------------------------------------------- */

@media (max-width: 720px) {
  :root {
    --gutter: 18px;
    --gutter-y: 26px;
  }

  .container-narrow {
    max-width: 100%;
  }

  /* 网格的最小列宽下调，窄屏才排得下 */
  .tag-grid {
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  }

  .attach-grid {
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  }

  .related-list {
    grid-template-columns: 1fr;
  }

  .side-stats {
    gap: 10px;
  }

  .post-body table {
    font-size: 14px;
  }

  .post-body th,
  .post-body td {
    padding: 8px 10px;
  }

  .post-body pre {
    padding: 15px 16px;
  }

  .post-body pre code {
    font-size: 12.5px;
  }

  /* 移动端菜单在矮屏上可能超出高度，允许滚动 */
  .primary-nav {
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* 登录页：表单收窄，说明文字让位 */
  .login-card {
    padding: 24px 20px 20px;
  }

  .auth-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

@media (max-width: 460px) {
  :root {
    --gutter: 14px;
    --gutter-y: 22px;
    --header-h: 58px;
  }

  /* 手机：只留标题和一句说明，屏幕让给表单 */
  .login-screen {
    padding: 28px 16px 22px;
  }

  .login-card {
    padding: 22px 16px 18px;
  }

  .login-card-head h2 {
    font-size: 21px;
  }

  .hero h1 {
    font-size: 27px;
  }

  .hero p {
    font-size: 15.5px;
  }

  .hero-eyebrow {
    font-size: 10.5px;
    padding: 4px 10px;
  }

  .page-head h1 {
    font-size: 24px;
  }

  .post-title {
    font-size: 24px;
  }

  .post-card h3 {
    font-size: 17.5px;
  }

  .post-card .excerpt {
    font-size: 14.5px;
  }

  .post-body {
    font-size: 16px;
    line-height: 1.78;
  }

  .btn {
    padding: 9px 15px;
    font-size: 14px;
  }

  .brand-text strong {
    font-size: 15.5px;
  }

  .search-bar input {
    font-size: 15px;
  }

  .editor-split textarea {
    min-height: 320px;
  }

  .preview-pane {
    max-height: 340px;
  }

  .toast-stack {
    left: 12px;
    right: 12px;
    bottom: 12px;
  }
}

@media (max-width: 360px) {
  .hero h1 {
    font-size: 23px;
  }

  .hero-meta {
    gap: 14px;
  }

  .hero-stat b {
    font-size: 19px;
  }

  .hero-stat span {
    font-size: 10.5px;
  }

  .post-card h3 {
    font-size: 16.5px;
  }

  .brand-text strong {
    font-size: 14.5px;
  }

  /* 极窄屏一列到底，别硬挤两列 */
  .tag-grid {
    grid-template-columns: 1fr;
  }

  .side-stats {
    grid-template-columns: 1fr;
  }

  .primary-nav a {
    padding: 10px 12px;
    font-size: 15px;
  }
}

/* --------------------------------------------------------------------------
   5. 矮屏 / 横屏手机：压缩纵向留白，别一屏只剩标题
   -------------------------------------------------------------------------- */

@media (orientation: landscape) and (max-height: 560px) {
  .hero {
    padding: 24px 0 20px;
    margin-bottom: 24px;
  }

  .hero-meta {
    margin-top: 16px;
    padding-top: 14px;
  }

  .container {
    padding-top: 22px;
    padding-bottom: 36px;
  }

  .sidebar {
    position: static;
  }

  /* 代码块横屏时别撑满整屏 */
  .post-body pre {
    max-height: 60vh;
    overflow-y: auto;
  }
}

/* --------------------------------------------------------------------------
   6. 视口高度：用动态单位，避免移动端地址栏伸缩时布局跳动
   -------------------------------------------------------------------------- */

@supports (height: 100dvh) {
  #app {
    min-height: calc(100dvh - var(--header-h) - 180px);
  }

  .primary-nav {
    max-height: calc(100dvh - var(--header-h));
  }

  .preview-pane {
    max-height: min(60dvh, 520px);
  }

  .editor-split textarea {
    min-height: clamp(280px, 48dvh, 460px);
  }
}

/* --------------------------------------------------------------------------
   7. 刘海屏 / 圆角屏安全区
   -------------------------------------------------------------------------- */

@supports (padding: max(0px)) {
  .container,
  .header-inner,
  .hero-inner,
  .footer-inner {
    padding-left: max(var(--gutter), env(safe-area-inset-left));
    padding-right: max(var(--gutter), env(safe-area-inset-right));
  }

  .toast-stack {
    left: max(16px, env(safe-area-inset-left));
    right: max(16px, env(safe-area-inset-right));
    bottom: max(16px, env(safe-area-inset-bottom));
  }

  .site-footer {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* --------------------------------------------------------------------------
   8. 触屏设备：没有悬停态，装饰不要只在 hover 时才出现
   -------------------------------------------------------------------------- */

@media (hover: none) {
  /* 卡片角标靠 hover 点亮，触屏上永远不会亮，直接去掉 */
  .post-card::before,
  .post-card::after {
    display: none;
  }

  .post-card:hover {
    transform: none;
  }

  /* 触控目标放大到 44px 上下，手指点得中 */
  .icon-btn {
    min-width: 42px;
    min-height: 42px;
  }

  .pagination button {
    min-width: 44px;
    height: 44px;
  }

  .tag-cloud .tag-chip {
    padding: 6px 13px;
    font-size: 13.5px;
  }
}

@media (pointer: coarse) {
  .text-btn {
    padding: 6px 4px;
  }

  .menu-item {
    padding-top: 12px;
    padding-bottom: 12px;
  }
}

/* --------------------------------------------------------------------------
   9. 强制高对比模式：保证描边不被系统配色吃掉
   -------------------------------------------------------------------------- */

@media (forced-colors: active) {
  .post-card,
  .card,
  .btn,
  .tag-chip,
  .tag-tile,
  .field :is(input, textarea, select) {
    border: 1px solid CanvasText;
  }
}

/* --------------------------------------------------------------------------
   10. 打印：去掉深色底与装饰，省墨且能读
   -------------------------------------------------------------------------- */

@media print {
  body {
    background: #fff;
    color: #111;
  }

  body::before,
  body::after {
    display: none;
  }

  .site-header,
  .site-footer,
  .sidebar,
  .back-link,
  .post-tags,
  .related,
  .toast-stack {
    display: none;
  }

  .container,
  .container-narrow {
    max-width: 100%;
    padding: 0;
  }

  .post-title,
  .post-body,
  .post-body h2,
  .post-body h3 {
    color: #111;
    text-shadow: none;
  }

  .post-body h2::before {
    background: #111;
    box-shadow: none;
  }

  .post-body a {
    color: #111;
    border-bottom: 0;
  }

  .post-body pre {
    background: #f5f5f5;
    border: 1px solid #ccc;
    box-shadow: none;
  }

  .post-body pre code,
  .post-body code {
    color: #111;
  }

  .post-card {
    break-inside: avoid;
    box-shadow: none;
  }
}