/* 根节点仅裁切水平溢出，不创建会影响 sticky 元素的滚动容器。 */
html,
body {
  max-width: 100%;
  overflow-x: clip;
}

/* 桌面主视觉的网格行必须受父容器高度约束，避免图片的固有尺寸撑开行高。 */
.cosy-magazine-grid {
  grid-template-rows: minmax(0, 1fr);
}

.cosy-feature-main,
.cosy-feature-side {
  min-height: 0;
  height: 100%;
}

.cosy-feature-side {
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

/* 背景的模糊滤镜已能提供景深，不再通过负边距和缩放撑宽文档。 */
.cosy-magazine-bg {
  inset: 0;
  transform: none;
}

/* 宽屏装饰伪元素仅在所属区块内绘制，不参与页面水平滚动宽度计算。 */
.cosy-main,
.cosy-topics {
  overflow: clip;
}

/* 统一限制弹性和网格子项，避免长标题、长链接撑宽页面。 */
.cosy-header-inner > *,
.cosy-feature,
.cosy-post-card,
.cosy-list-card,
.cosy-taxonomy-grid > a,
.cosy-tag-grid > a,
.cosy-topic-card,
.cosy-reading-card,
.cosy-sidebar,
.cosy-side-card {
  min-width: 0;
}

/* 阅读内容中的媒体、表格和代码块不得突破内容列边界。 */
.cosy-richtext {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.cosy-richtext video,
.cosy-richtext iframe,
.cosy-richtext canvas,
.cosy-richtext svg {
  max-width: 100%;
}

.cosy-richtext iframe,
.cosy-richtext video {
  width: 100%;
}

.cosy-richtext table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

.cosy-richtext pre {
  max-width: 100%;
  white-space: pre;
}

/* 导航内容较多时提前切换到移动菜单，覆盖常见的 768/800px 竖屏平板。 */
@media (max-width: 820px) {
  .cosy-container {
    width: calc(100% - 24px);
  }

  .cosy-shell {
    padding-top: 60px;
  }

  .cosy-header,
  .cosy-header-inner {
    height: 60px;
  }

  .cosy-header-inner {
    gap: 8px;
  }

  .cosy-logo {
    max-width: calc(100% - 130px);
  }

  .cosy-logo strong {
    overflow: hidden;
    font-size: 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .cosy-nav {
    display: none;
  }

  .cosy-tools {
    flex: 0 0 auto;
  }

  .cosy-menu-button {
    display: flex !important;
    flex-direction: column;
    gap: 4px;
  }

  .cosy-mobile-nav {
    top: 60px;
    max-height: calc(100dvh - 60px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* 窄屏平板上改为上下主次稿件，防止四宫格标题互相挤压。 */
  .cosy-magazine-grid {
    grid-template-columns: 1fr;
    height: auto;
  }

  .cosy-feature-main {
    height: clamp(240px, 62vw, 360px);
  }

  .cosy-feature-side {
    height: clamp(220px, 54vw, 310px);
  }

  .cosy-feature h1 {
    right: 20px;
    bottom: 18px;
    left: 20px;
    font-size: clamp(20px, 4.8vw, 26px);
  }

  .cosy-notice .cosy-container > div,
  .cosy-notice span,
  .cosy-tabs,
  .cosy-tabs nav {
    min-width: 0;
  }

  .cosy-notice span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .cosy-tabs nav {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .cosy-tabs nav::-webkit-scrollbar {
    display: none;
  }

  /* 分类卡片由内容决定高度，不再依赖容易裁切文字的固定 620px。 */
  .cosy-category-small {
    height: auto;
    grid-auto-rows: minmax(150px, auto);
  }

  .cosy-category-small > a {
    min-height: 150px;
  }

  .cosy-post-meta {
    flex-wrap: wrap;
    row-gap: 8px;
  }

  .cosy-related > div > header,
  .cosy-section-head {
    gap: 14px;
  }
}

/* 小屏手机上进一步简化密集网格和阅读间距。 */
@media (max-width: 480px) {
  .cosy-tools {
    gap: 2px;
  }

  .cosy-tools button {
    width: 34px;
    height: 34px;
  }

  .cosy-feature-side {
    gap: 8px;
  }

  .cosy-feature h2 {
    right: 10px;
    bottom: 10px;
    left: 10px;
  }

  .cosy-promo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cosy-promo a {
    height: 82px;
  }

  .cosy-tag-grid {
    grid-template-columns: 1fr;
  }

  .cosy-reading-card > figure {
    height: clamp(210px, 62vw, 260px);
  }

  .cosy-richtext {
    padding: 22px 16px;
  }

  .cosy-reading-card > footer,
  .cosy-author-box {
    margin-right: 16px;
    margin-left: 16px;
  }

  .cosy-author-box {
    align-items: flex-start;
  }
}

/* 横屏手机的可视高度较小，菜单始终保持可滚动。 */
@media (max-height: 520px) and (max-width: 900px) {
  .cosy-mobile-nav {
    max-height: calc(100dvh - 60px);
  }

  .cosy-search {
    align-items: start;
    overflow-y: auto;
    padding-top: 56px;
  }
}