/**
 * @file responsive.css
 * @description 响应式设计与跨端适配规则
 * @standard 遵循 client-h5-responsive.md 规范（安全区、100dvh、min(vw,vh)大屏封顶与触控友好）
 */

/* ================= 移动端与小屏优先适配 (≤ 768px) ================= */
@media (max-width: 768px) {
  /* 基础容器边距 */
  .container {
    padding-left: clamp(14px, 4vw, 20px);
    padding-right: clamp(14px, 4vw, 20px);
  }

  /* 导航栏 */
  .site-header {
    height: 56px;
  }

  .nav-links {
    display: none; /* 移动端精简或轻量折叠 */
  }

  .nav-actions .btn-secondary {
    display: none;
  }

  /* Hero 区域 */
  .hero-section {
    padding-top: 36px;
    padding-bottom: 36px;
  }

  .hero-subtitle {
    font-size: 0.98rem;
    line-height: 1.55;
    margin-bottom: 24px;
  }

  .hero-actions {
    flex-direction: column;
    width: 100%;
    gap: 12px;
  }

  .hero-actions .btn {
    width: 100%;
    padding: 12px 20px;
    font-size: 1rem;
  }

  .platform-chips {
    gap: 12px;
    font-size: 0.78rem;
  }

  /* 真实灵动岛真机还原面板移动端适配 */
  .mac-mockup-frame {
    border-radius: var(--gt-radius-lg);
  }

  .real-island-expanded {
    padding: 14px 14px 10px;
    gap: 10px;
  }

  .island-header-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .island-status-chips {
    flex-wrap: wrap;
    gap: 6px;
  }

  .chip-status-listen,
  .chip-app-pill {
    padding: 4px 8px;
    font-size: 10.5px;
  }

  .island-tabs-row {
    width: 100%;
    justify-content: space-between;
  }

  .island-tab-btn {
    flex: 1;
    text-align: center;
    padding: 5px 6px;
    font-size: 11px;
  }

  /* 三栏转为垂直流式自适应 */
  .island-content-grid {
    grid-template-columns: 1fr;
    gap: 14px;
    min-height: auto;
  }

  .island-col-left,
  .island-col-mid,
  .island-col-right {
    min-width: 0;
  }

  .relay-cards-stack {
    max-height: 260px;
  }

  /* Bento 网格全部转单列 */
  .bento-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .col-span-8,
  .col-span-6,
  .col-span-4,
  .col-span-12 {
    grid-column: span 1;
  }

  .bento-card {
    padding: 20px;
  }

  /* 接力演示台垂直排列 */
  .relay-playground {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 16px;
  }

  .relay-flow-indicator {
    transform: rotate(90deg);
    margin: 8px 0;
  }

  /* 下载中心网格 */
  .download-grid {
    grid-template-columns: 1fr;
  }

  /* 架构卡片网格 */
  .services-grid {
    grid-template-columns: 1fr;
  }

  /* 页脚四列转单列 */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 10px;
    text-align: center;
    padding-bottom: env(safe-area-inset-bottom, 16px);
  }
}

/* ================= 平板与中等屏幕 (769px ~ 1024px) ================= */
@media (min-width: 769px) and (max-width: 1024px) {
  .nav-links {
    gap: 16px;
  }

  .island-content-grid {
    grid-template-columns: 190px 1fr 160px;
    gap: 12px;
  }

  .col-span-8 { grid-column: span 12; }
  .col-span-6 { grid-column: span 6; }
  .col-span-4 { grid-column: span 6; }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ================= 移动端触控优化与安全区 ================= */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  body {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* 大屏封顶限制 */
@supports (width: min(1vw, 1vh)) {
  .hero-title {
    font-size: min(8vw, 3.8rem);
  }
}