/* 手机端适配覆盖样式（兼容手机访问的核心样式表）。
 *
 * 定位：只写窄屏（≤720px / ≤380px / 极窄屏）规则，桌面端视觉完全不变。
 * 加载顺序在 /style.css、/design-v3.css 之后，因此同优先级的规则以本文件为准，
 * 用来在「已确认的桌面版式」之上补齐手机端体验，主要解决六类问题：
 *   1) 横向溢出与 iOS 横屏字号放大
 *   2) 页头导航在窄屏横向拥挤（折叠为汉堡面板：页头里的 checkbox/label 开关 + .nav-toggle-input:checked 规则，无需脚本）
 *   3) 触控目标过小（按钮、导航、页内目录、弹窗关闭键统一抬到 ≥44px）
 *   4) 小字号可读性下限（原样式中 9—11px 的辅助文字）
 *   5) 弹窗在窄屏的尺寸与内部滚动（校区列表较长时不再顶到屏幕边缘）
 *   6) iPhone 安全区与触屏 hover 粘滞
 */

/* ============ 1. 横向溢出防护 ============ */

@media (max-width: 720px) {
  html {
    /* clip 不创建滚动容器，页头 .header 的 sticky 定位不受影响，
       同时挡住装饰元素（如 .cta:after 大字）可能造成的横向滚动 */
    overflow-x: clip;
    /* 横屏时禁止 iOS 自动放大正文字号 */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    max-width: 100%;
  }
}

/* ============ 2. 页头折叠导航（纯 CSS，不依赖脚本） ============ */

/* 折叠开关真身（checkbox）：任何宽度下默认隐藏。
 * 折叠状态只由 :checked 决定，因此脚本被 CSP 拦截或用户关闭 JS 时依然可用。 */
.nav-toggle-input {
  display: none;
}

/* 汉堡按钮（label）：默认不显示，桌面端保持原有横排导航 */
.nav-toggle {
  display: none;
}

@media (max-width: 720px) {
  /* 窄屏启用折叠：checkbox 视觉隐藏、保留在 Tab 序列中，实际点击落在 label 上 */
  .nav-toggle-input {
    display: block;
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
  }

  /* 页头换行：第一行放 Logo、汉堡按钮与咨询按钮，第二行放展开后的导航面板 */
  .header {
    flex-wrap: wrap;
    row-gap: 8px;
  }

  .header .logo {
    order: 0;
  }

  /* 汉堡按钮：44px 触控目标，图标用两条横线表达「展开栏目」 */
  .header > .nav-toggle {
    display: inline-flex;
    order: 1;
    margin-left: auto;
    align-items: center;
    gap: 9px;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid #cfe0d7;
    border-radius: 14px;
    background: #f1f5ef;
    color: #075b55;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    /* 触屏长按汉堡按钮时不选中文字 */
    user-select: none;
  }

  /* 键盘聚焦在隐藏的 checkbox 上时，把焦点环画在可见的汉堡按钮上 */
  .nav-toggle-input:focus-visible ~ .nav-toggle {
    outline: 3px solid #e8ac1a;
    outline-offset: 5px;
  }

  .nav-toggle-bars {
    display: inline-flex;
    flex-direction: column;
    justify-content: space-between;
    width: 18px;
    height: 12px;
  }

  .nav-toggle-bars i {
    display: block;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
  }

  /* 展开/收起文案二选一显示，随开关状态切换 */
  .nav-toggle-label-close {
    display: none;
  }

  .nav-toggle-input:checked ~ .nav-toggle .nav-toggle-label-open {
    display: none;
  }

  .nav-toggle-input:checked ~ .nav-toggle .nav-toggle-label-close {
    display: inline;
  }

  /* 页头咨询按钮：与汉堡按钮同处第一行，去掉原有的 margin-left:auto 让位 */
  .header > .btn.small {
    order: 2;
    margin-left: 8px;
    min-height: 44px;
    padding: 11px 14px;
    font-size: 13px;
  }

  /* 导航默认收起，勾选开关后成为纵向面板，整行铺满页头宽度 */
  .header nav {
    order: 3;
    display: none;
    width: 100%;
  }

  .nav-toggle-input:checked ~ nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px;
    border-radius: 16px;
    background: #f7faf8;
    overflow: visible;
  }

  .nav-toggle-input:checked ~ nav a {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 48px;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 15px;
    text-align: left;
  }
}

/* ============ 3. 触控目标 ≥44px ============ */

@media (max-width: 720px) {
  /* 导航链接（展开后的折叠面板内）点击区域抬高到 44px 以上 */
  .header nav a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }

  .btn,
  .btn.small {
    min-height: 44px;
  }

  .page-directory button {
    min-height: 52px;
  }

  .lesson-tabs button,
  .research-tabs button {
    min-height: 44px;
  }

  /* 页脚导航换行显示，每个链接都是可点区域 */
  .footer-v3 > .footer-nav {
    flex-wrap: wrap;
    gap: 4px 18px;
  }

  .footer-v3 > .footer-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* 弹窗关闭键放大到 44px，圆角与图标同步调整 */
  .close {
    width: 44px;
    height: 44px;
    font-size: 26px;
  }
}

/* ============ 4. 小字号可读性下限 ============ */

@media (max-width: 720px) {
  .brand-topline {
    height: 28px;
    font-size: 11px;
  }

  .hero-copy .eyebrow {
    font-size: 11px;
  }

  .hero-tag {
    font-size: 12px;
  }

  .intro-ribbon span {
    font-size: 12px;
  }

  /* 序号、标签类辅助文字统一提升到 12px（含被原样式压到 10px 的序号） */
  .number,
  .pillar-small .number,
  .pillar-feature .number,
  .standard-card .number,
  .standard-label,
  .stage-name .number,
  .support-index,
  .page-directory button span {
    font-size: 12px;
  }

  .micro-list p,
  .stage-columns p,
  .lesson-panel p {
    font-size: 14px;
  }

  .feedback-stack small,
  .cta-action > span,
  .footer-brand p {
    font-size: 12px;
  }

  .footer-v3 > .footer-legal,
  .footer-v3 > .footer-legal p {
    font-size: 12px;
  }
}

/* ============ 5. 弹窗：窄屏尺寸与内部滚动 ============ */

@media (max-width: 720px) {
  dialog {
    /* 固定 92vw 宽度，避免默认 max-width 在窄屏下退化成内容宽度 */
    width: 92vw;
    max-width: 92vw;
    max-height: 86vh;
    padding: 24px 20px;
    border-radius: 20px;
    /* 校区列表变长时在弹窗内部滚动，而不是被裁掉 */
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  #image-dialog {
    padding: 14px;
  }

  .close {
    top: 8px;
    right: 8px;
  }

  .contact-row {
    padding: 16px 0;
  }

  .contact-row h3 {
    font-size: 19px;
  }

  .contact-row .btn.teal {
    /* 拨号按钮整行铺满，方便拇指点击 */
    width: 100%;
  }

  #zoom-caption {
    font-size: 13px;
  }
}

/* ============ 6. iPhone 安全区与触屏交互修正 ============ */

@media (max-width: 720px) {
  /* env() 在未声明 viewport-fit=cover 时取 0，回落到与桌面一致的左右留白 */
  .brand-topline {
    padding-left: max(5vw, env(safe-area-inset-left));
    padding-right: max(5vw, env(safe-area-inset-right));
  }

  .header {
    padding-left: max(4%, env(safe-area-inset-left));
    padding-right: max(4%, env(safe-area-inset-right));
  }

  .footer-v3 {
    padding-bottom: calc(31px + env(safe-area-inset-bottom));
  }

  /* 长表格在 iOS 上保留惯性滚动 */
  .system-scroll {
    -webkit-overflow-scrolling: touch;
  }
}

/* 触屏没有 hover：取消卡片浮起等粘滞效果，避免点击后样式留在原位 */
@media (hover: none) and (max-width: 720px) {
  .card:hover,
  .why-reason-card:hover,
  .standard-card:hover {
    transform: none;
  }

  .editorial-image:hover img {
    transform: none;
  }
}

/* ============ 7. 极窄屏（≤380px，如 iPhone SE）兜底 ============ */

@media (max-width: 380px) {
  .header .logo img {
    width: 92px;
  }

  .brand-topline {
    font-size: 10px;
  }

  /* 极窄屏不再继续缩小辅助链接字号，保留 12px 可读下限 */
  .hero-secondary {
    font-size: 12px;
  }

  /* 展开后的折叠导航在极窄屏收一号字，仍高于 12px 可读下限 */
  .nav-toggle-input:checked ~ nav a {
    font-size: 14px;
  }

  .hero h1,
  .hero-compact h1,
  .hero-teachers h1,
  .hero-about h1 {
    font-size: 29px;
  }

  .section-head h2,
  .cta h2 {
    font-size: 26px;
  }

  .page-directory button {
    min-width: 100px;
    padding: 14px 9px;
  }

  .cta {
    padding: 26px 20px;
  }
}