/* ==========================================================================
   pages.css — 页面布局与页面级响应式
   1. 公共外壳：容器、主内容留白、页脚
   2. 页面标题区
   3. Home
   4. Blog
   5. Post
   6. About

   依据：DESIGN_SPEC.md §6、§11、§13、§14。T04 建立布局骨架，
   Home／Blog／Post／About 的内容深化由 T05～T08 在同名分区内继续补充。
   移动优先，只使用 768px / 1024px 断点。
   ========================================================================== */

/* ==========================================================================
   1. 公共外壳（§6.1、§6.2）
   ========================================================================== */

.container {
  width: 100%;
  /* --width-site 是内容宽度上限，不含两侧 gutter（DESIGN_SPEC §6.1、§16.1） */
  max-width: calc(var(--width-site) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.site-main {
  display: block;
  padding-block: var(--space-8) var(--space-12);
}

.site-footer {
  border-top: var(--line-thin) solid var(--color-rule);
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3) var(--space-6);
  padding-block: var(--space-8) calc(var(--space-16) + env(safe-area-inset-bottom, 0px));
  color: var(--color-muted);
  font-size: var(--text-meta);
  line-height: var(--leading-meta);
}

.site-footer__brand,
.site-footer__note,
.site-footer__copyright,
.site-footer__links {
  margin: 0;
}

.site-footer__brand {
  color: var(--color-ink);
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.site-footer__copyright {
  margin-inline-start: auto;
}

@media (min-width: 768px) {
  .site-main {
    padding-block: var(--space-8) var(--space-12);
  }
}

@media (min-width: 1024px) {
  .site-main {
    padding-block: var(--space-12) var(--space-16);
  }
}

/* ==========================================================================
   2. 页面标题区（§11.2、§11.4）
   ========================================================================== */

.page-header {
  margin-bottom: var(--space-6);
}

.page-title {
  font-size: var(--text-page-title);
  font-weight: var(--weight-bold);
  line-height: var(--leading-title);
}

.page-intro {
  max-width: var(--width-reading);
  margin: 0;
  color: var(--color-muted);
}

/* About 介绍段与页面标题说明保持一致的可读宽度 */
.about-intro > p {
  max-width: var(--width-reading);
}

/* ==========================================================================
   3. Home（§11.1）
   ========================================================================== */

.hero {
  margin-bottom: var(--section-gap);
}

.hero__title {
  font-size: var(--text-hero);
  font-weight: var(--weight-bold);
  line-height: var(--leading-hero);
}

.hero__intro {
  margin: 0 0 var(--space-6);
  max-width: var(--width-reading);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.hero-art {
  margin-top: var(--space-6);
}

.home-section + .home-section {
  margin-top: var(--section-gap);
}

.section-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-6);
  margin-bottom: var(--space-4);
}

.section-header__title {
  margin: 0;
}

.section-header__link {
  font-size: var(--text-ui);
}

@media (min-width: 768px) {
  .hero {
    display: grid;
    grid-template-columns: 3fr 2fr;
    align-items: center;
    gap: var(--hero-gap);
  }

  .hero__title {
    margin-bottom: var(--space-6);
  }

  .hero-art {
    margin-top: 0;
  }

  .section-header {
    margin-bottom: var(--space-6);
  }
}

@media (min-width: 1024px) {
  .section-header {
    margin-bottom: var(--space-6);
  }
}

/* ==========================================================================
   4. Blog（§11.2、§13）
   ========================================================================== */

/* 筛选区保持默认块级流向：其 hidden 属性不得被 display 覆盖 */
.blog-search {
  margin-bottom: var(--space-6);
}

.blog-results {
  display: block;
}

.empty-state {
  margin-bottom: var(--space-6);
}

@media (min-width: 768px) {
  .blog-filters {
    margin-bottom: var(--space-12);
  }

  .blog-search {
    margin-bottom: var(--space-6);
  }
}

/* ==========================================================================
   5. Post（§11.3）
   ========================================================================== */

.post {
  /* 文章头部与正文合计最大 740px（DESIGN_SPEC §6.1、§11.3、Plan.md 一·2） */
  max-width: var(--width-reading);
  margin-inline: auto;
}

.post-header {
  margin-bottom: var(--space-8);
}

.post-back {
  margin-inline: auto;
  max-width: var(--width-reading);
}

.post-body {
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

/* ==========================================================================
   6. About（§11.4）
   ========================================================================== */

.about-section + .about-section {
  margin-top: var(--section-gap);
}

.about-intro > * {
  min-width: 0;
}

/* 窄屏与 Tablet：先介绍，再角色图（§9.2、§14） */
.about-hero-art {
  margin-top: var(--hero-gap);
}

@media (min-width: 1024px) {
  .about-intro {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    align-items: start;
    gap: var(--space-12);
  }

  /* 介绍文本按自然顺序落入第一列；角色图固定第二列并纵向居中，不进入文本行（§11.4、§9.2） */
  .about-intro > .about-intro__second-column {
    grid-column: 2;
    grid-row: 1;
    margin-top: 0;
    align-self: center;
    justify-self: center;
  }
}

/* B03: manuscript-like page rhythm; imagery stays inside the Hero panel. */
.hero {
  padding-block: var(--space-6) var(--space-8);
}

.hero__eyebrow {
  margin-bottom: var(--space-6);
  color: var(--color-muted);
  font-family: var(--font-code);
  font-size: 12px;
  letter-spacing: 0.12em;
}

.hero__title {
  font-size: clamp(38px, 5vw, 60px);
  letter-spacing: -0.035em;
  line-height: 1.22;
}

.hero__title span {
  position: relative;
  display: inline-block;
  font-family: var(--font-brand);
  font-style: italic;
  letter-spacing: -0.02em;
  box-shadow: inset 0 -0.14em var(--color-accent);
}

.hero__intro {
  max-width: 29em;
  margin-block: var(--space-6);
  line-height: 1.85;
}

.hero-art--desk {
  margin: var(--space-8) var(--space-2) 0;
}

.hero-art--desk .hero-art__frame,
.hero-art--desk .art-frame,
.hero-art__picture {
  display: block;
  width: 100%;
}

.hero-art--desk .art-frame {
  padding: var(--space-2);
  background: var(--color-surface);
  box-shadow: 6px 6px 0 var(--color-accent);
}

.hero-art--desk .art-frame__image {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: var(--color-paper);
}

.hero-art--desk .hero-art__tape {
  display: block;
  width: 64px;
  height: 20px;
  inset-inline-end: 16px;
  transform: rotate(-8deg);
}

.hero-art--desk .hero-art__dots {
  inset-inline-end: 0;
  inset-block-end: 12px;
}

.hero-art--desk .hero-art__caption {
  margin-top: var(--space-6);
  font-size: 12px;
}

.section-header {
  padding-bottom: var(--space-4);
  border-bottom: var(--line-thin) solid var(--color-ink);
}

.section-header__number {
  display: inline-block;
  margin-inline-end: var(--space-3);
  color: var(--color-muted);
  font-family: var(--font-code);
  font-size: 12px;
  vertical-align: middle;
}

#home-categories {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

#home-categories li {
  margin: 0;
}

#home-categories .category-link {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-4);
  height: 100%;
  border: 1px solid var(--color-rule);
  text-decoration: none;
}

#home-categories .category-link:hover {
  background: var(--color-accent);
  border-color: var(--color-ink);
}

.note-panel {
  border-width: 1px;
  border-top-width: 2px;
}

.page-header {
  padding-bottom: var(--space-6);
  margin-bottom: var(--space-8);
  border-bottom: 1px solid var(--color-rule);
}

.blog-filters {
  margin-bottom: var(--space-8);
}

.about-intro__copy h2 {
  margin-bottom: var(--space-6);
}

.about-intro__copy p {
  line-height: 1.85;
}

.about-section:not(.about-intro) {
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-rule);
}

.post-back {
  display: block;
}

.site-footer__inner {
  align-items: start;
  padding-block: var(--space-8);
}

.site-footer__note {
  max-width: 28em;
}

@media (min-width: 768px) {
  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-8);
  }

  .hero-art--desk {
    margin: 0 var(--space-2);
  }

  #home-categories {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .hero {
    gap: var(--space-12);
    padding-block: var(--space-8) var(--space-12);
  }

  .hero-art--desk {
    max-width: 520px;
  }
}