/*
 * KKI Design System — Mobile polish (≤768px) + tablet refinements
 *
 * Addresses issues observed from real device captures:
 *   - TH home hero text was getting cut off at the top (font too large for Thai)
 *   - Hero typography needs tighter scaling on small viewports
 *   - Section padding can stay generous but max needs caps
 *   - CTAs need touch-target compliance (≥44pt iOS, ≥48dp Android)
 *   - Stacked CTAs need proper gap + alignment
 *   - Card grids should always single-column
 *   - Pullquote / stats / partner cards need smaller scaling
 *   - Mobile horizontal padding should be safe-area aware
 *
 * Loaded always-on; @media gates everything to ≤768px (mobile) and
 * ≤1024px (tablet) where appropriate.
 */

/* ════════════════════════════════════════════════════════════════════
 * Mobile (≤768px)
 * ════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── 1. Hero typography — tighter scaling for mobile ──────────────── */
  body.home .hero-title,
  body.page-id-4122 .hero-title,
  body.page-id-4519 .hero-title {
      font-size: clamp(32px, 8vw, 48px) !important;
      line-height: 1.1 !important;
      letter-spacing: -0.02em !important;
  }

  /* TH home hero — even smaller, Thai needs more space per character */
  body.kki-ml-lang-th.home .hero-title,
  body.kki-ml-lang-th.page-id-4519 .hero-title {
      font-size: clamp(22px, 5.6vw, 30px) !important;
      line-height: 1.35 !important;
      letter-spacing: 0 !important;
      word-break: keep-all;
  }

  /* TH home hero caption — vertically center the long Thai text in the
   * 100vh hero so it doesn't get clipped by the top navbar. */
  body.kki-ml-lang-th.home #hero-caption,
  body.kki-ml-lang-th.page-id-4519 #hero-caption,
  body.kki-ml-lang-th.home #hero-styles,
  body.kki-ml-lang-th.page-id-4519 #hero-styles {
      display: flex !important;
      flex-direction: column !important;
      justify-content: center !important;
      align-items: center !important;
      min-height: 100vh !important;
      padding-top: 80px !important;
      padding-bottom: 40px !important;
  }
  body.kki-ml-lang-th.home #hero-caption .inner,
  body.kki-ml-lang-th.page-id-4519 #hero-caption .inner {
      max-width: 100% !important;
      width: 100% !important;
      padding: 0 20px !important;
  }
  body.kki-ml-lang-th.home .hero-title-wrapper,
  body.kki-ml-lang-th.page-id-4519 .hero-title-wrapper {
      text-align: center !important;
      max-width: 100% !important;
  }

  /* Generic hero (other pages: Methodology, Services, About, etc.) */
  body.page-id-2711 .hero-title,
  body.page-id-4516 .hero-title,
  body.page-id-4487 .hero-title,
  body.page-id-4523 .hero-title,
  body.page-id-2713 .hero-title,
  body.page-id-4522 .hero-title,
  body.page-id-4777 .hero-title,
  body.page-id-4778 .hero-title,
  body.page-id-4788 .hero-title,
  body.page-id-4789 .hero-title,
  body.page-id-4481 .hero-title,
  body.page-id-4520 .hero-title,
  body.page-id-4482 .hero-title,
  body.page-id-4521 .hero-title,
  body.single-kki_project .hero-title,
  body.single-harington_portfolio .hero-title {
      font-size: clamp(36px, 9vw, 52px) !important;
      line-height: 1.1 !important;
  }

  /* TH single-word hero (Methodology / Services / Portfolio / About) */
  body.kki-ml-lang-th .hero-title {
      font-size: clamp(32px, 8vw, 44px) !important;
      letter-spacing: 0 !important;
      line-height: 1.25 !important;
  }

  /* Hero subtitle */
  body.home .hero-subtitle,
  body.page-id-4122 .hero-subtitle,
  body.page-id-4519 .hero-subtitle,
  body.kki-ml-lang-th .hero-subtitle {
      font-size: 0.875rem !important;
      line-height: 1.6 !important;
      padding: 0 20px !important;
  }

  /* ── 2. Section padding — tighter on mobile ──────────────────────── */
  body.home .kki-fp,
  body.home .kki-st,
  body.home .kki-mb,
  body.home .kki-ri,
  body.home .kki-final,
  body.home .kki-svc,
  body.home .kki-ir,
  body.home .kki-dev-slider,
  body.page-id-4122 .kki-fp,
  body.page-id-4122 .kki-st,
  body.page-id-4122 .kki-mb,
  body.page-id-4122 .kki-ri,
  body.page-id-4122 .kki-final,
  body.page-id-4122 .kki-svc,
  body.page-id-4122 .kki-ir,
  body.page-id-4122 .kki-dev-slider,
  body.page-id-4519 .kki-fp,
  body.page-id-4519 .kki-st,
  body.page-id-4519 .kki-mb,
  body.page-id-4519 .kki-ri,
  body.page-id-4519 .kki-final,
  body.page-id-4519 .kki-svc,
  body.page-id-4519 .kki-ir,
  body.page-id-4519 .kki-dev-slider {
      padding-top: 56px !important;
      padding-bottom: 56px !important;
      padding-left: 20px !important;
      padding-right: 20px !important;
  }

  /* ── 3. Section H2 — smaller on mobile ───────────────────────────── */
  body.home .kki-fp__h,
  body.home .kki-st__h,
  body.home .kki-mb__h,
  body.home .kki-ri__h,
  body.home .kki-svc__h,
  body.home .kki-ir__h,
  body.home .kki-dev-slider__h,
  body.page-id-4122 .kki-fp__h,
  body.page-id-4519 .kki-fp__h,
  body.page-id-4122 .kki-st__h,
  body.page-id-4519 .kki-st__h,
  body.page-id-4122 .kki-mb__h,
  body.page-id-4519 .kki-mb__h,
  body.page-id-4122 .kki-ri__h,
  body.page-id-4519 .kki-ri__h,
  body.page-id-4122 .kki-svc__h,
  body.page-id-4519 .kki-svc__h,
  body.page-id-4122 .kki-ir__h,
  body.page-id-4519 .kki-ir__h,
  body.page-id-4122 .kki-dev-slider__h,
  body.page-id-4519 .kki-dev-slider__h,
  body.page-id-4777 .kki-fp__h,
  body.page-id-4778 .kki-fp__h,
  body.page-id-4788 .kki-fp__h,
  body.page-id-4789 .kki-fp__h {
      font-size: clamp(26px, 7vw, 36px) !important;
      letter-spacing: -0.018em !important;
      line-height: 1.15 !important;
  }

  /* ── 4. CTAs — touch target + readable size ──────────────────────── */
  body.home #hero-footer a,
  body.page-id-4122 #hero-footer a,
  body.page-id-4519 #hero-footer a,
  body.home .kki-pf-cta__btn,
  body.home .kki-svc__cta-btn,
  body.home .kki-cx__btn,
  .kki-pf-cta__btn,
  .kki-svc__cta-btn,
  .kki-tr__cta-btn,
  .kki-cx__btn,
  .wp-block-button__link {
      padding: 14px 28px !important;
      font-size: 0.8125rem !important;
      letter-spacing: 0.12em !important;
      min-height: 48px !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
  }

  /* CTA stacking on mobile — full width with gap */
  body.home #hero-footer,
  body.page-id-4122 #hero-footer,
  body.page-id-4519 #hero-footer {
      display: flex !important;
      flex-direction: column !important;
      gap: 12px !important;
      width: 100% !important;
      max-width: 320px !important;
      margin: 0 auto !important;
  }
  body.home #hero-footer a,
  body.page-id-4122 #hero-footer a,
  body.page-id-4519 #hero-footer a {
      width: 100% !important;
  }

  /* ── 5. Pullquote on mobile ──────────────────────────────────────── */
  body.home .kki-fn__text,
  body.home .kki-fn__quote,
  body.page-id-4122 .kki-fn__text,
  body.page-id-4519 .kki-fn__text {
      font-size: clamp(22px, 6vw, 32px) !important;
      line-height: 1.2 !important;
      letter-spacing: -0.012em !important;
      max-width: 100% !important;
      padding: 0 12px !important;
  }
  body.kki-ml-lang-th .kki-fn__text,
  body.kki-ml-lang-th .kki-fn__quote {
      font-size: clamp(20px, 5.5vw, 28px) !important;
      letter-spacing: 0 !important;
      line-height: 1.4 !important;
  }

  /* ── 6. Stats on mobile ──────────────────────────────────────────── */
  body.home .kki-st__num,
  body.page-id-4122 .kki-st__num,
  body.page-id-4519 .kki-st__num {
      font-size: clamp(36px, 11vw, 56px) !important;
      letter-spacing: -0.035em !important;
  }
  body.home .kki-st__label,
  body.page-id-4122 .kki-st__label,
  body.page-id-4519 .kki-st__label {
      font-size: 0.625rem !important;
      letter-spacing: 0.18em !important;
  }
  body.home .kki-st__desc,
  body.page-id-4122 .kki-st__desc,
  body.page-id-4519 .kki-st__desc {
      font-size: 0.8125rem !important;
      line-height: 1.5 !important;
  }

  /* ── 7. Listing card grids — single column ───────────────────────── */
  body.home .kki-fp__grid,
  body.page-id-4122 .kki-fp__grid,
  body.page-id-4519 .kki-fp__grid,
  body.page-id-4777 .kki-fp__grid,
  body.page-id-4778 .kki-fp__grid,
  body.page-id-4788 .kki-fp__grid,
  body.page-id-4789 .kki-fp__grid {
      grid-template-columns: 1fr !important;
      gap: 18px !important;
  }

  /* ── 8. KORKAIIDEA DAILY — single column ─────────────────────────── */
  body.home .kki-ri__grid,
  body.page-id-4122 .kki-ri__grid,
  body.page-id-4519 .kki-ri__grid {
      grid-template-columns: 1fr !important;
      gap: 16px !important;
  }
  body.home .kki-ri__card,
  body.page-id-4122 .kki-ri__card,
  body.page-id-4519 .kki-ri__card {
      padding: 24px !important;
  }

  /* ── 9. KORKAIIDEA PARTNERS — single column stack with breathing ── */
  body.home .kki-mb__stages,
  body.page-id-4122 .kki-mb__stages,
  body.page-id-4519 .kki-mb__stages {
      grid-template-columns: 1fr !important;
      gap: 32px !important;
  }
  body.home .kki-mb__stage,
  body.page-id-4122 .kki-mb__stage,
  body.page-id-4519 .kki-mb__stage {
      padding: 24px !important;
      border: 1px solid rgba(216, 189, 118, 0.18) !important;
      border-radius: 12px !important;
      background: rgba(11, 16, 26, 0.42) !important;
  }
  body.home .kki-mb__num,
  body.page-id-4122 .kki-mb__num,
  body.page-id-4519 .kki-mb__num {
      font-size: clamp(24px, 6vw, 32px) !important;
  }

  /* ── 10. FULL SERVICE icon grid — 2 columns on mobile ───────────── */
  body.home .kki-svc-grid,
  body.page-id-4122 .kki-svc-grid,
  body.page-id-4519 .kki-svc-grid {
      grid-template-columns: repeat(2, 1fr) !important;
      gap: 12px !important;
  }
  body.home .kki-svc-grid__item,
  body.page-id-4122 .kki-svc-grid__item,
  body.page-id-4519 .kki-svc-grid__item {
      padding: 16px !important;
  }

  /* ── 11. Project detail Quick Facts — 1 column ──────────────────── */
  body.single-kki_project .kki-pf-facts,
  body.single-harington_portfolio .kki-pf-facts {
      grid-template-columns: 1fr !important;
      gap: 12px !important;
  }
  body.single-kki_project .kki-pf-fact,
  body.single-harington_portfolio .kki-pf-fact {
      padding: 18px !important;
  }
  body.single-kki_project .kki-pf-block,
  body.single-kki_project .kki-pf-quickfacts,
  body.single-kki_project .kki-pf-view,
  body.single-kki_project .kki-pf-map,
  body.single-kki_project .kki-pf-cta,
  body.single-harington_portfolio .kki-pf-block,
  body.single-harington_portfolio .kki-pf-quickfacts,
  body.single-harington_portfolio .kki-pf-view,
  body.single-harington_portfolio .kki-pf-map,
  body.single-harington_portfolio .kki-pf-cta {
      padding: 32px 20px !important;
      margin: 16px 12px !important;
      border-radius: 12px !important;
  }

  /* ── 12. Contact page — CTAs stack, signal panel restraint ──────── */
  body.page-id-2713 .kki-cx__actions,
  body.page-id-4522 .kki-cx__actions {
      display: flex !important;
      flex-direction: column !important;
      gap: 12px !important;
      width: 100% !important;
  }
  body.page-id-2713 .kki-cx__btn,
  body.page-id-4522 .kki-cx__btn {
      width: 100% !important;
      padding: 14px 24px !important;
      font-size: 0.8125rem !important;
      min-height: 48px !important;
  }
  body.page-id-2713 .kki-cx__hero h1,
  body.page-id-2713 #kki-cx-hero-h,
  body.page-id-4522 .kki-cx__hero h1,
  body.page-id-4522 #kki-cx-hero-h {
      font-size: clamp(28px, 7.5vw, 40px) !important;
      letter-spacing: -0.015em !important;
      line-height: 1.18 !important;
  }
  body.page-id-2713 .kki-cx__signal,
  body.page-id-4522 .kki-cx__signal {
      padding: 18px !important;
      margin-top: 16px !important;
  }

  /* ── 13. Mobile section sub/lede — tighter ────────────────────── */
  body.home .kki-fp__sub,
  body.home .kki-st__sub,
  body.home .kki-mb__lead,
  body.home .kki-ri__sub,
  body.home .kki-svc__lede,
  body.home .kki-ir__lede,
  body.page-id-4122 .kki-fp__sub,
  body.page-id-4519 .kki-fp__sub,
  body.page-id-4777 .kki-fp__sub,
  body.page-id-4778 .kki-fp__sub,
  body.page-id-4788 .kki-fp__sub,
  body.page-id-4789 .kki-fp__sub {
      font-size: 0.9375rem !important;
      line-height: 1.6 !important;
      padding: 0 12px !important;
  }

  /* ── 14. Eyebrow scaling on mobile ──────────────────────────────── */
  body.home .kki-fp__eyebrow,
  body.home .kki-st__eyebrow,
  body.home .kki-mb__eyebrow,
  body.home .kki-ri__eyebrow,
  body.home .kki-svc__eyebrow,
  body.home .kki-ir__eyebrow,
  body.home .kki-dev-slider__eyebrow,
  body.page-id-4122 .kki-fp__eyebrow,
  body.page-id-4519 .kki-fp__eyebrow,
  body.page-id-4777 .kki-fp__eyebrow,
  body.page-id-4778 .kki-fp__eyebrow,
  body.page-id-4788 .kki-fp__eyebrow,
  body.page-id-4789 .kki-fp__eyebrow {
      font-size: 0.625rem !important;
      letter-spacing: 0.18em !important;
  }

  /* ── 15. Trusted developers logo strip — smaller logos, more rows ── */
  body.home .kki-dev-slider__logo,
  body.page-id-4122 .kki-dev-slider__logo,
  body.page-id-4519 .kki-dev-slider__logo {
      max-height: 32px !important;
      max-width: 90px !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
 * Tablet (769px – 1024px) refinements
 * ════════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 1024px) {
  /* Listing card grids — 2 columns on tablet */
  body.page-id-4777 .kki-fp__grid,
  body.page-id-4778 .kki-fp__grid,
  body.page-id-4788 .kki-fp__grid,
  body.page-id-4789 .kki-fp__grid,
  body.home .kki-fp__grid,
  body.page-id-4122 .kki-fp__grid,
  body.page-id-4519 .kki-fp__grid {
      grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Quick Facts on tablet — 2 columns */
  body.single-kki_project .kki-pf-facts,
  body.single-harington_portfolio .kki-pf-facts {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Section padding tablet tier */
  body.home .kki-fp,
  body.home .kki-st,
  body.home .kki-mb,
  body.home .kki-ri,
  body.home .kki-svc,
  body.home .kki-ir,
  body.home .kki-dev-slider,
  body.page-id-4122 .kki-fp,
  body.page-id-4519 .kki-fp,
  body.page-id-4122 .kki-st,
  body.page-id-4519 .kki-st {
      padding-top: 80px !important;
      padding-bottom: 80px !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
 * Universal mobile safety — viewport overflow + touch targets
 * ════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Prevent horizontal scroll on any wide element */
  body {
      overflow-x: hidden !important;
  }
  /* Touch target minimum for all interactive elements */
  a, button, [role="button"] {
      min-height: 44px;
  }
  /* Override tiny links inside dense layouts that don't need 44px */
  a.small-link,
  .kki-ml-footer a,
  .kki-ml-consent a,
  nav a {
      min-height: 0;
  }
}