/**
 * Layout CSS - 布局样式
 * 包含页面整体布局、容器、网格系统等
 */

/* ========== 基础布局 ========== */

body {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
  background-color: var(--color-bg-primary);
  margin: 0;
  padding: 0;
  /* 为固定导航栏留出空间 */
  padding-top: var(--header-height-mobile);
}

@media (min-width: 768px) {
  body {
    padding-top: var(--header-height);
  }
}

/* ========== 容器 ========== */

.container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
  width: 100%;
}

/* ========== 主内容区域 ========== */

main {
  min-height: calc(100vh - var(--header-height-mobile));
}

@media (min-width: 768px) {
  main {
    min-height: calc(100vh - var(--header-height));
  }
}

/* ========== 区域通用样式 ========== */

section {
  padding: var(--spacing-12) 0;
}

@media (min-width: 768px) {
  section {
    padding: var(--spacing-16) 0;
  }
}

@media (min-width: 1200px) {
  section {
    padding: var(--spacing-20) 0;
  }
}

/* ========== 标题样式 ========== */

.section-title {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  text-align: center;
  margin-bottom: var(--spacing-4);
}

@media (min-width: 768px) {
  .section-title {
    font-size: var(--font-size-4xl);
  }
}

.section-subtitle {
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
  text-align: center;
  margin-bottom: var(--spacing-8);
}

@media (min-width: 768px) {
  .section-subtitle {
    font-size: var(--font-size-xl);
    margin-bottom: var(--spacing-10);
  }
}

/* ========== Hero区域 ========== */

.hero {
  /* 默认背景渐变（降级方案） */
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: var(--color-text-inverse);
  padding: var(--spacing-16) 0;
  text-align: center;
}

/* WebP背景图片支持（需求 7.3） */
@supports (background-image: url('data:image/webp;base64,UklGRiQAAABXRUJQVlA4IBgAAAAwAQCdASoBAAEAAwA0JaQAA3AA/vuUAAA=')) {
  .hero {
    /* 如果支持WebP，可以在这里添加WebP背景图 */
    /* background-image: url('../images/hero-bg.webp'); */
    background-size: cover;
    background-position: center;
  }
}

@media (min-width: 768px) {
  .hero {
    padding: var(--spacing-24) 0;
  }
}

.hero-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.hero-title {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--spacing-4);
}

@media (min-width: 768px) {
  .hero-title {
    font-size: var(--font-size-5xl);
  }
}

@media (min-width: 1200px) {
  .hero-title {
    font-size: var(--font-size-6xl);
  }
}

.hero-subtitle {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--spacing-4);
  opacity: 0.95;
}

@media (min-width: 768px) {
  .hero-subtitle {
    font-size: var(--font-size-2xl);
  }
}

.hero-description {
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--spacing-8);
  opacity: 0.9;
}

@media (min-width: 768px) {
  .hero-description {
    font-size: var(--font-size-lg);
  }
}

.hero-cta {
  margin-top: var(--spacing-8);
}

/* ========== 功能展示区域 ========== */

.features {
  background-color: var(--color-bg-secondary);
}

.features-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-6);
}

@media (min-width: 768px) {
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-8);
  }
}

@media (min-width: 1200px) {
  .features-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ========== 应用场景区域 ========== */

.scenarios {
  background-color: var(--color-bg-primary);
}

.scenarios-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-6);
}

@media (min-width: 768px) {
  .scenarios-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-8);
  }
}

@media (min-width: 1200px) {
  .scenarios-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ========== 关于我们区域 ========== */

.about {
  background-color: var(--color-bg-secondary);
}

.about-content {
  max-width: 800px;
  margin: 0 auto;
}

.about-content p {
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-4);
}

@media (min-width: 768px) {
  .about-content p {
    font-size: var(--font-size-lg);
  }
}

/* ========== 页脚 ========== */

.footer {
  background-color: var(--color-bg-dark);
  color: var(--color-text-inverse);
  padding: var(--spacing-8) 0;
}

.footer-content {
  text-align: center;
  margin-bottom: var(--spacing-6);
}

.footer-company {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--spacing-2);
}

.footer-icp,
.footer-copyright {
  font-size: var(--font-size-sm);
  opacity: 0.8;
  margin-bottom: var(--spacing-2);
}

.footer-icp a {
  color: var(--color-text-inverse);
  text-decoration: none;
  transition: opacity var(--transition-fast);
}

.footer-icp a:hover {
  opacity: 0.7;
  text-decoration: underline;
}

.footer-nav {
  display: flex;
  justify-content: center;
  gap: var(--spacing-4);
  flex-wrap: wrap;
}

.footer-nav a {
  color: var(--color-text-inverse);
  text-decoration: none;
  font-size: var(--font-size-sm);
  transition: opacity var(--transition-fast);
  padding: var(--spacing-2);
}

.footer-nav a:hover {
  opacity: 0.7;
}

.footer-nav a:focus {
  outline: 2px solid var(--color-text-inverse);
  outline-offset: 2px;
}