/* ==========================================================================
   潮白人家社区服务网 — 响应式样式表
   --------------------------------------------------------------------------
   断点策略（Mobile First 的补齐式覆盖）：
     1200px  大屏笔记本
     1080px  服务页两栏 → 单栏，目录转为横向滚动
     1020px  导航切换为汉堡菜单
      900px  出现底部固定电话栏；页脚转两列
      768px  平板上，栅格收窄
      640px  手机上，Hero 转单列、卡片单列
      480px  小屏手机，按钮通栏
      400px  超小屏，栅格强制单列，避免横向滚动
      340px  320px 设备兜底
   ========================================================================== */

/* ========================= 1200px 及以下 ========================= */
@media (max-width: 1200px) {
  :root {
    --container: 1120px;
  }

  .footer-grid {
    grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 1fr));
    gap: 28px;
  }
}

/* ========================= 1080px 及以下 ========================= */
@media (max-width: 1080px) {
  /* 服务页：正文与目录改为纵向排列，目录置顶并转为横向滚动条 */
  .layout-split {
    display: flex;
    flex-direction: column-reverse;
    gap: 26px;
  }

  .layout-split__aside {
    width: 100%;
  }

  .toc {
    position: static;
    padding: 16px 16px 14px;
  }

  .toc__title {
    margin-bottom: 10px;
  }

  .toc__list {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .toc__link {
    flex: none;
    padding: 8px 15px;
    border-left: 0;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    white-space: nowrap;
    font-size: 13.8px;
  }

  .toc__link .ico {
    display: none;
  }

  .toc__link.is-active {
    border-color: transparent;
  }

  .toc__cta {
    display: none;
  }

  .about-story {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}

/* ========================= 1020px 及以下 ========================= */
@media (max-width: 1020px) {
  /* 导航折叠为汉堡菜单 */
  .nav,
  .header-actions .btn {
    display: none;
  }

  .nav-toggle {
    display: inline-flex;
  }

  .header-main {
    justify-content: space-between;
  }

  .header-actions {
    margin-left: auto;
  }

  .header-top {
    display: none;
  }

  /* Hero 转单列，插画置于文案下方 */
  .hero__inner,
  .page-hero__inner {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .hero__visual,
  .page-hero__visual {
    max-width: 520px;
    margin: 0 auto;
    width: 100%;
  }

  /* 浮动标签在窄屏会造成溢出，隐藏 */
  .hero__tag-float {
    display: none;
  }

  .hero__desc {
    max-width: none;
  }

  .page-hero__intro {
    max-width: none;
  }
}

/* ========================= 900px 及以下 ========================= */
@media (max-width: 900px) {
  :root {
    --header-h: 66px;
    --sec-y: clamp(48px, 8vw, 72px);
  }

  /* 显示底部固定电话栏，同时给 body 留出空间 */
  .tel-bar {
    display: block;
  }

  body {
    padding-bottom: 78px;
  }

  .to-top {
    bottom: 88px;
    right: 16px;
    width: 42px;
    height: 42px;
  }

  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px 24px;
    padding-bottom: 34px;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }

  .cta-band {
    border-radius: var(--r-lg);
    padding: 30px 22px;
  }

  .brand__sub {
    display: none;
  }

  .hero-points {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .hero-point {
    padding: 16px 18px;
  }

  .flow-step::after {
    display: none;
  }
}

/* ========================= 768px 及以下 ========================= */
@media (max-width: 768px) {
  body {
    font-size: 15.5px;
  }

  .container {
    padding: 0 18px;
  }

  .hero {
    padding: 40px 0 56px;
  }

  .hero__actions,
  .page-hero__actions {
    gap: 11px;
  }

  .hero__facts {
    gap: 10px 18px;
    padding-top: 20px;
  }

  .hero__fact {
    font-size: 13.8px;
  }

  .cat-grid,
  .quick-grid,
  .svc-grid,
  .scene-grid,
  .adv-grid,
  .content-grid,
  .problem-grid,
  .audience-wrap,
  .related-grid,
  .contact-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 14px;
  }

  .cat-card,
  .svc-card,
  .adv-card,
  .value-card,
  .contact-card {
    padding: 22px 20px;
  }

  .filter-bar {
    padding: 16px;
  }

  .search-field input {
    min-height: 50px;
    font-size: 16px; /* 保持 16px 以上，避免 iOS 自动放大页面 */
    padding-left: 46px;
    padding-right: 46px;
  }

  .search-field .ico {
    left: 15px;
    width: 19px;
    height: 19px;
  }

  .flow {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
  }

  .flow-step {
    padding: 20px 18px;
  }

  .flow-step::before {
    font-size: 22px;
    margin-bottom: 10px;
  }

  .faq-item summary {
    padding: 16px 18px;
    font-size: 15.3px;
    gap: 11px;
  }

  .faq-item__a {
    padding: 0 18px 18px;
    font-size: 14.4px;
  }

  .problem-item,
  .content-item,
  .scene-card {
    padding: 17px 18px;
  }

  .quote-block {
    padding: 24px 22px 24px 26px;
  }

  .fact-cell {
    padding: 20px 18px;
  }

  .notfound {
    min-height: auto;
    padding: 56px 0 72px;
  }
}

/* ========================= 640px 及以下 ========================= */
@media (max-width: 640px) {
  .brand__mark {
    width: 40px;
    height: 40px;
    border-radius: 12px;
  }

  .brand__name {
    font-size: 17.5px;
  }

  .header-phone {
    padding: 7px 13px 7px 11px;
  }

  .header-phone__num {
    font-size: 15px;
  }

  .hero h1 {
    font-size: clamp(27px, 7.4vw, 36px);
  }

  .hero__slogan {
    font-size: clamp(17px, 4.6vw, 21px);
    margin-top: 10px;
  }

  .hero__desc {
    font-size: 15px;
    margin-bottom: 24px;
  }

  .hero__eyebrow {
    font-size: 12px;
    padding: 6px 13px;
  }

  .page-hero__tagline {
    font-size: clamp(16px, 4.2vw, 19px);
  }

  .hero-art-svg {
    max-width: 420px;
    margin: 0 auto;
  }

  /* 卡片类栅格统一单列，避免内容被挤压 */
  .cat-grid,
  .svc-grid,
  .adv-grid,
  .content-grid,
  .problem-grid,
  .audience-wrap,
  .related-grid,
  .contact-grid,
  .value-grid,
  .contact-steps,
  .quick-grid {
    grid-template-columns: 1fr;
  }

  /* 快捷服务保留两列，图标缩小 */
  .quick-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
  }

  .quick-card {
    padding: 18px 10px;
    gap: 10px;
  }

  .quick-card .ico-box {
    width: 48px;
    height: 48px;
    border-radius: 15px;
  }

  .quick-card__label {
    font-size: 14px;
  }

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

  .flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .tel-bar__num {
    font-size: 16px;
  }

  .breadcrumb {
    font-size: 12.6px;
    padding-top: 12px;
  }

  .notfound__code {
    margin-bottom: 4px;
  }
}

/* ========================= 480px 及以下 ========================= */
@media (max-width: 480px) {
  .container {
    padding: 0 16px;
  }

  /* 主要操作按钮通栏，增大点击区域 */
  .hero__actions .btn,
  .page-hero__actions .btn,
  .cta-band__actions .btn,
  .btn-row .btn {
    flex: 1 1 100%;
    width: 100%;
  }

  .hero-point {
    gap: 12px;
  }

  .ico-box {
    width: 46px;
    height: 46px;
    border-radius: 13px;
  }

  .ico-box--lg {
    width: 56px;
    height: 56px;
    border-radius: 17px;
  }

  .section-head {
    margin-bottom: 26px;
  }

  .cta-band {
    border-radius: var(--r);
    padding: 26px 18px;
  }

  .tel-display {
    font-size: clamp(25px, 8vw, 32px);
  }

  .faq-list {
    gap: 10px;
  }

  .fact-row {
    grid-template-columns: 1fr;
  }

  .mobile-nav__panel {
    width: 100%;
    max-width: none;
  }

  .to-top {
    width: 40px;
    height: 40px;
    bottom: 84px;
  }
}

/* ========================= 400px 及以下 ========================= */
@media (max-width: 400px) {
  /* 超小屏下所有栅格强制单列，彻底杜绝横向滚动 */
  .cat-grid,
  .svc-grid,
  .adv-grid,
  .content-grid,
  .problem-grid,
  .audience-wrap,
  .related-grid,
  .contact-grid,
  .value-grid,
  .scene-grid,
  .flow {
    grid-template-columns: 1fr;
  }

  .flow-step::before {
    font-size: 20px;
  }

  .header-phone {
    display: none;
  }

  .brand__name {
    font-size: 16.5px;
  }

  .hero__facts {
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
  }

  .filter-chips {
    gap: 7px;
  }

  .filter-chip {
    padding: 7px 13px;
    font-size: 13.4px;
  }

  .tel-bar__label {
    display: none;
  }

  .tel-bar__call {
    min-height: 44px;
  }
}

/* ========================= 340px 及以下（320px 兜底） ========================= */
@media (max-width: 340px) {
  .container {
    padding: 0 13px;
  }

  .brand__mark {
    width: 36px;
    height: 36px;
  }

  .brand__name {
    font-size: 15.5px;
  }

  .nav-toggle {
    width: 40px;
    height: 40px;
  }

  .btn {
    padding: 11px 18px;
    font-size: 15px;
  }

  .btn--lg {
    padding: 13px 22px;
    font-size: 16px;
  }

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

  .tel-bar__inner {
    gap: 8px;
  }
}

/* ========================= 横屏小高度设备 ========================= */
@media (max-height: 520px) and (orientation: landscape) {
  .mobile-nav__panel {
    width: min(90vw, 420px);
  }

  .hero {
    padding: 30px 0 42px;
  }
}

/* ========================= 高分辨率大屏 ========================= */
@media (min-width: 1600px) {
  :root {
    --container: 1320px;
  }
}

/* ========================= 悬停能力检测 ========================= */
/* 触屏设备不启用 hover 位移，避免点击后状态残留 */
@media (hover: none) {
  .svc-card:hover,
  .cat-card:hover,
  .quick-card:hover,
  .adv-card:hover,
  .content-item:hover,
  .scene-card:hover,
  .contact-card:hover,
  .value-card:hover,
  .problem-item:hover,
  .audience-item:hover,
  .hero-point:hover,
  .flow-step:hover,
  .btn:hover {
    transform: none;
  }
}