/* ============================================================
   detail.critical.css - 详情页首屏关键样式（阻塞加载）
   
   R17: 移动端优先，确保冷启动CLS≤0.05
   覆盖页面：article, faq detail, contact, about, case detail
   依赖：tokens.css
   ============================================================ */

/* ============================================================
   详情页主容器
   ============================================================ */
.pd-page,
.pd-detail-page,
.pg-detail-page {
  display: block;
  min-height: 100vh;
  background-color: var(--color-bg-secondary);
}

/* ============================================================
   文章详情头部（R17: 移动端首屏关键）
   ============================================================ */
.pd-article__header,
.pg-article__header {
  min-height: 100px; /* R17: 移动端最小高度 */
  padding: var(--space-5) var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

/* 文章标题：固定行高+最小高度 */
.pd-article__title,
.pg-article__title {
  margin: 0 0 var(--space-3);
  font-size: 1.25rem; /* 移动端固定 */
  font-weight: var(--font-weight-bold);
  line-height: 1.35;
  min-height: calc(1.35 * 1.25rem * 2); /* 2行 */
  color: var(--color-text);
}

/* 文章元信息：固定高度 */
.pd-article__meta,
.pg-article__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  min-height: 24px;
  font-size: var(--font-size-sm);
  line-height: 1.5;
  color: var(--color-text-muted);
}

/* ============================================================
   详情页布局（R17: 移动端padding）
   ============================================================ */
.pd-layout,
.pg-layout {
  display: grid;
  gap: var(--space-6);
  max-width: var(--container-xl);
  margin-inline: auto;
  padding: var(--space-6) var(--space-4);
}

.pd-layout__main,
.pg-layout__main {
  min-width: 0;
}

.pd-layout__side,
.pg-layout__side {
  display: none; /* 移动端隐藏侧边栏 */
}

/* ============================================================
   FAQ详情头部
   ============================================================ */
.pd-faq-detail__header {
  position: relative;
  min-height: 100px; /* R17: 移动端最小高度 */
  padding: var(--space-5);
  padding-left: calc(var(--space-5) + 48px + var(--space-4));
  border-bottom: 1px solid var(--color-border);
}

/* Q标签：固定尺寸 */
.pd-faq-detail__question-label {
  position: absolute;
  top: var(--space-5);
  left: var(--space-5);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-inverse);
  background-color: var(--color-primary);
  border-radius: var(--radius-xl);
}

.pd-faq-detail__title {
  margin: 0 0 var(--space-3);
  font-size: 1.125rem;
  font-weight: var(--font-weight-bold);
  line-height: 1.4;
  min-height: calc(1.4 * 1.125rem * 2);
  color: var(--color-text);
}

/* ============================================================
   联系页卡片（R17: 移动端首屏关键）
   ============================================================ */
.pg-contact-cards {
  max-width: var(--container-lg);
  margin-inline: auto;
  padding: var(--space-6) var(--space-4);
}

.pg-contact-cards__grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}

.pg-contact-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  min-height: 88px; /* R17: 移动端卡片最小高度 */
  padding: var(--space-4);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
}

/* 图标：固定尺寸 */
.pg-contact-card__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background-color: var(--color-primary-light);
  border-radius: var(--radius-lg);
  color: var(--color-primary);
}

.pg-contact-card__body {
  flex: 1;
  min-width: 0;
}

.pg-contact-card__title {
  margin: 0 0 var(--space-1);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: 1.4;
  color: var(--color-text-muted);
}

.pg-contact-card__text {
  margin: 0;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  line-height: 1.4;
  min-height: calc(1.4em);
  color: var(--color-text);
}

/* ============================================================
   关于/案例页面首屏
   ============================================================ */
.pg-about__header,
.pg-case__header {
  min-height: 120px;
  padding: var(--space-8) var(--space-4);
  text-align: center;
  background-color: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}

.pg-about__title,
.pg-case__title {
  margin: 0 0 var(--space-3);
  font-size: 1.5rem;
  font-weight: var(--font-weight-bold);
  line-height: 1.3;
  min-height: calc(1.3 * 1.5rem);
  color: var(--color-text);
}

.pg-about__desc,
.pg-case__desc {
  margin: 0;
  font-size: var(--font-size-md);
  line-height: 1.6;
  min-height: calc(1.6em * 2);
  color: var(--color-text-secondary);
}

/* ============================================================
   Responsive - 768px+
   ============================================================ */
@media (min-width: 768px) {
  .pd-article__header,
  .pg-article__header {
    min-height: 120px;
    padding: var(--space-6);
  }
  
  .pd-article__title,
  .pg-article__title {
    font-size: var(--font-size-xl);
    min-height: calc(1.35 * var(--font-size-xl) * 2);
  }
  
  .pd-layout,
  .pg-layout {
    padding: var(--space-8) var(--space-6);
  }
  
  .pg-contact-cards__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================================
   Responsive - 1024px+
   ============================================================ */
@media (min-width: 1024px) {
  .pd-layout,
  .pg-layout {
    grid-template-columns: 1fr 280px;
    padding: var(--space-10) var(--space-8);
  }
  
  .pd-layout__side,
  .pg-layout__side {
    display: block;
  }
  
  .pg-contact-cards__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}