/* ================================================================
   SCBKY — iPhone & Mobile Readability Fixes
   Layered on top of each page's inline styles
================================================================ */

/* ── 1. Viewport-height fallback (svh not in old Safari) ── */
.carousel { height: 100vh; }
@supports (height: 100svh) { .carousel { height: 100svh; } }

/* ── 2. Safe-area insets — iPhone X / notch / Dynamic Island ── */
.float-cta {
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  right:  calc(14px + env(safe-area-inset-right,  0px));
}
.mobile-menu {
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}
body { padding-bottom: env(safe-area-inset-bottom, 0px); }

/* ── 3. Tablet (≤ 768px) ── */
@media (max-width: 768px) {
  /* Navbar: slim down so content is reachable */
  .navbar__inner { height: 80px !important; }

  /* Carousel: don't fill entire screen — leave 25% hint of content below */
  .carousel { min-height: 420px; max-height: 680px; height: 75vh; }
  @supports (height: 75svh) { .carousel { height: 75svh; } }

  .carousel__slide-content { padding: 0 32px; bottom: 68px; }
  .carousel__slide-actions .btn { font-size: 14px; padding: 12px 20px; }
}

/* ── 4. Small phones (≤ 480px) — iPhone SE / 14 / etc. ── */
@media (max-width: 480px) {
  /* Body typography */
  body { font-size: 15px; line-height: 1.8; }

  /* Navbar: slim, single-line logo */
  .navbar__inner         { height: 68px !important; }
  .navbar__logo-mark     { width: 38px !important; height: 38px !important; min-width: 38px !important; }
  .navbar__logo-text strong { font-size: 14px !important; }
  .navbar__logo-text span   { display: none !important; }
  .navbar__hamburger     { width: 38px !important; height: 38px !important; }

  /* Carousel: 65% of screen height so next section is visible */
  .carousel { min-height: 360px; max-height: 580px; height: 65vh; }
  @supports (height: 65svh) { .carousel { height: 65svh; } }

  /* Carousel slide text — more compact & readable */
  .carousel__slide-content { padding: 0 20px !important; bottom: 48px !important; }
  .carousel__slide-title   { font-size: clamp(24px, 6.5vw, 32px) !important; line-height: 1.15 !important; }
  .carousel__slide-title em { display: block; }
  .carousel__slide-tag     { font-size: 10px !important; letter-spacing: 1px; margin-bottom: 10px !important; }
  .carousel__slide-desc    {
    font-size: 13px !important;
    line-height: 1.7 !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
    overflow: hidden !important;
    margin-bottom: 16px !important;
  }
  .carousel__slide-actions {
    flex-direction: column !important;
    gap: 8px !important;
    align-items: stretch !important;
  }
  .carousel__slide-actions .btn {
    text-align: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    padding: 12px 16px !important;
    width: 100% !important;
  }

  /* Sections: reduce vertical whitespace */
  .section     { padding: 40px 0 !important; }
  .container   { padding: 0 16px !important; }
  .section-head { margin-bottom: 28px !important; }

  /* Section titles */
  .section-title { font-size: clamp(20px, 6vw, 28px) !important; line-height: 1.3 !important; }
  .section-label { font-size: 10px !important; letter-spacing: 2px !important; }
  .section-sub   { font-size: 14px !important; line-height: 1.7 !important; }

  /* Page hero on inner pages */
  .page-hero          { min-height: 160px !important; }
  .page-hero__title   { font-size: clamp(20px, 6vw, 30px) !important; line-height: 1.3 !important; }
  .page-hero__sub     { font-size: 13px !important; }
  .page-hero__content { padding: 0 16px !important; bottom: 28px !important; }

  /* Float buttons: proper touch target + safe area */
  .float-btn  { width: 46px !important; height: 46px !important; }
  .float-cta  {
    bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    right:  calc(12px + env(safe-area-inset-right,  0px)) !important;
    gap: 8px !important;
  }
  .wechat-popup { right: calc(100% + 8px); }
  .wechat-popup img { width: 140px; height: 140px; }

  /* Cap-band numbers */
  .cap-band__num   { font-size: 26px !important; }
  .cap-band__label { font-size: 11px !important; }
  .cap-band__item  { padding: 18px 12px !important; }

  /* Tech cells */
  .tech-cell { padding: 24px 16px !important; }
  .tech-cell__title { font-size: 15px !important; }
  .tech-cell__desc  { font-size: 13px !important; }

  /* Contact form */
  input, textarea, select {
    font-size: 16px !important; /* prevent iOS auto-zoom on focus */
  }

  /* Footer */
  .footer { padding: 28px 0 16px !important; }

  /* Stat numbers on about page */
  .stat-num   { font-size: 38px !important; }
  .stat-label { font-size: 12px !important; }

  /* Cert cards */
  .cert-card img { height: 140px !important; }

  /* Timeline */
  .tl-title { font-size: 15px !important; }
  .tl-desc  { font-size: 13px !important; }
}

/* ── 5. Very small (≤ 375px — iPhone SE, 5c) ── */
@media (max-width: 375px) {
  .carousel__slide-title { font-size: clamp(22px, 6vw, 28px) !important; }
  .container { padding: 0 14px !important; }
  .navbar__logo-text strong { font-size: 13px !important; }
}