/* ============================================================
   FISHKOOL — Responsive refinements (mobile-first)
   Breakpoints: 480px / 768px / 1024px / 1280px
   ============================================================ */

/* ---------- Small phones (< 480px) ---------- */
@media (max-width: 479px) {
  .section { padding-block: var(--space-2xl); }
  .section-head { margin-bottom: var(--space-xl); }
  .checkbox-grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); gap: var(--space-xl) var(--space-lg); }
  .hero__actions .btn { width: 100%; }
}

/* ---------- Phones (480px+) ---------- */
@media (min-width: 480px) {
  .checkbox-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Tablets (768px+) ---------- */
@media (min-width: 768px) {
  .section { padding-block: var(--space-3xl); }
  .site-footer__grid {
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: var(--space-2xl);
  }
  .process-steps { grid-template-columns: repeat(3, 1fr); }
  .stat__number { font-size: var(--font-size-3xl); }
  .cert-strip { grid-template-columns: repeat(3, 1fr); }

  /* OEM hero: two-column layout (content + 16:9 visual) */
  .hero--oem .hero__inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3xl);
  }
  .hero--oem .hero__content { max-width: none; }

  /* ---------- Horizontal nav appears from 768px (was 900px) ----------
     Lowered so the partner entries stay visible down to tablet width:
     at 125-175% Windows scaling, or unmaximized windows, the effective
     viewport drops below 900px and the nav used to collapse into the
     hamburger. Budget check at 768px: 720px usable (container 24px padding
     each side) vs logo ~140 + 5 links ~320 + 4×24px gaps + CTA ~150 ≈ 706px;
     768-899px 区间见下方 gap 收窄规则,收窄后约 674px。 */
  .nav-toggle,
  .nav-backdrop { display: none; }

  .site-nav {
    position: static;
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    width: auto;
    padding: 0;
    background: transparent;
    transform: none;
    box-shadow: none;
    overflow: visible;
  }
  /* Reset the mobile-drawer rule (.site-nav__cta margin-top: 48px):
     with the CTA shown at 768px+, the nav used to stack links + CTA
     vertically (127px tall) and, centered inside the 76px header, the
     link row was pushed 25px above the viewport top — invisible. */
  .site-nav__cta { margin-top: 0; }
  .site-nav__list {
    flex-direction: row;
    align-items: center;
    gap: var(--space-lg);
  }
  .site-nav__link {
    font-size: var(--font-size-sm);
    color: rgba(255,255,255,0.85);
  }
  .site-nav__link.is-active { color: var(--color-white); }
  .site-header--scrolled .site-nav__link { color: var(--color-text-secondary); }
  .site-header--scrolled .site-nav__link.is-active,
  .site-header--scrolled .site-nav__link:hover { color: var(--color-primary); }

  .header-cta { display: inline-flex; }

  /* 桌面显示 header 语言下拉;抽屉内平铺列表随之隐藏 */
  .lang-switcher { display: block; }
  .lang-switcher--drawer { display: none; }
}

/* 5 个导航链接(Blog 加入后)在 768-899px 预算吃紧:链接间距从 lg 收窄到 md,
   900px 起恢复 xl 间距 */
@media (min-width: 768px) and (max-width: 899px) {
  .site-nav__list { gap: var(--space-md); }
}

/* ---------- Mobile modal: bottom sheet (< 768px) ---------- */
@media (max-width: 767px) {
  .modal {
    padding: var(--space-sm);
    align-items: flex-end;
  }
  .modal__dialog {
    max-width: none;
    max-height: 88vh;
    padding: var(--space-lg);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
  .modal__title { font-size: var(--font-size-lg); }
}

/* ---------- Desktop (900px+) ----------
   Nav rules live in the 768px block (above); here only wider spacing
   and non-nav layout refinements. */
@media (min-width: 900px) {
  .site-nav__list { gap: var(--space-xl); }

  .process-steps { grid-template-columns: repeat(5, 1fr); }
  .process-step { text-align: left; }
  .process-step__num { margin-inline: 0; }

  .site-footer__grid { grid-template-columns: 1.4fr 0.9fr 1fr 1.4fr; }
}

/* ---------- Wide screens (1280px+) ---------- */
@media (min-width: 1280px) {
  .container { padding-inline: var(--space-2xl); }
}

/* ---------- Large screens (1440px+) ---------- */
@media (min-width: 1440px) {
  .hero__title { font-size: var(--font-size-4xl); }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .floating-cta,
  .float-btn,
  .btn,
  .entry-card,
  .benefit-card,
  .advantage,
  .product-card,
  .ambassador-card {
    transition: none;
  }
}