/* ============================================================
   mobile.css — Synbar comprehensive mobile optimizations
   Loaded on every page after premium.css
   ============================================================ */

/* ── Global: prevent horizontal overflow on all pages ──
   Use clip (not hidden) so position:sticky on #nav continues to work.
   clip clips without creating a scroll container. */
html, body {
  overflow-x: clip;
}

/* ── Images: never cause horizontal overflow ── */
img {
  max-width: 100%;
  height: auto;
}

/* ── Hamburger: sizing (non-display properties safe globally) ── */
#hamburger {
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0;
}

/* ══════════════════════════════════════════════════════════════
   MOBILE MENU — smooth slide-down animation
   Override all pages' display:none / display:block pattern.
   max-height:0 + overflow:hidden means zero height on desktop
   (hamburger is hidden anyway), and smooth slide on mobile.
══════════════════════════════════════════════════════════════ */
#mobile-menu {
  display: block !important;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.38s cubic-bezier(0.4, 0, 0.2, 1);
}
#mobile-menu.open {
  max-height: 640px;
}

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

  /* ── HAMBURGER: force visible + flex layout ── */
  #hamburger {
    display: flex !important;
  }

  /* ── PILL NAV: hide desktop nav (brancher pages use id="pill-nav") ── */
  #pill-nav,
  #nav-links-d,
  #nav-cta-d,
  #sw-wrap-d {
    display: none !important;
  }

  /* ── ORBIT: hide overlapping icons on small screens ── */
  .hero-orbit {
    display: none !important;
  }
  .orbit-track {
    display: none !important;
  }
  .hero-bg-shape {
    opacity: 0.4;
    pointer-events: none;
  }

  /* ── NAV ── */
  .nav-inner {
    padding: 0 16px !important;
    height: 60px !important;
    gap: 8px !important;
  }

  /* Logo: max 36px tall, 120px wide on mobile */
  .logo-img-full {
    max-height: 36px !important;
    max-width: 120px !important;
    height: auto !important;
  }
  .logo-img-icon {
    max-height: 36px !important;
    height: auto !important;
  }

  /* Mobile menu links — larger touch targets */
  .mobile-links {
    padding: 16px 20px 24px !important;
    gap: 4px !important;
  }
  .mobile-links a {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    font-size: 15px !important;
    padding: 4px 0 !important;
  }
  .mobile-links .btn {
    justify-content: center !important;
    margin-top: 8px !important;
  }

  /* ── HERO (index.html centered redesign) ── */
  .hero {
    padding: 56px 20px 40px !important;
    min-height: auto !important;
    overflow-x: hidden !important;
  }
  .hero-h1 {
    font-size: clamp(1.75rem, 7.5vw, 2rem) !important;
    line-height: 1.12 !important;
    letter-spacing: -0.03em !important;
  }
  .hero-sub {
    font-size: 16px !important;
    line-height: 1.65 !important;
    max-width: 100% !important;
  }
  .hero-eyebrow {
    font-size: 10.5px !important;
    padding: 4px 12px !important;
  }
  .hero-ctas {
    flex-direction: column !important;
    width: 100% !important;
    gap: 10px !important;
    margin-bottom: 0 !important;
  }
  /* Both primary and secondary hero buttons full-width */
  .hero-ctas .btn,
  .hero-ctas a,
  .btn-hero-dark,
  .btn-outline-dark {
    width: 100% !important;
    text-align: center !important;
    box-sizing: border-box !important;
    display: block !important;
  }

  /* ── PAGE HERO (brancher/inner pages) ── */
  .page-hero {
    padding: 48px 20px 40px !important;
  }
  .page-hero h1 {
    font-size: clamp(1.5rem, 6vw, 2rem) !important;
    line-height: 1.15 !important;
  }
  .page-hero .hero-sub,
  .page-hero-sub {
    font-size: 15px !important;
    max-width: 100% !important;
  }
  .breadcrumb {
    font-size: 13px !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
  }

  /* ── SECTION BASICS ── */
  .section {
    padding: 48px 20px !important;
  }
  .stats-band {
    padding: 48px 20px !important;
  }
  .cta-section {
    padding: 60px 20px !important;
  }
  .ts-section,
  .pm-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Prevent any section from overflowing horizontally */
  section,
  .section,
  .hero,
  .stats-band,
  .cta-section,
  .ts-section,
  .pm-section,
  .vis-banner,
  .cases-section,
  footer,
  .page-hero {
    max-width: 100vw;
    overflow-x: hidden;
  }

  /* ── SECTION HEADS ── */
  .section-head {
    margin-bottom: 36px !important;
    text-align: center !important;
  }

  /* ── TYPOGRAPHY ── */
  .s-h2 {
    font-size: clamp(1.375rem, 5.5vw, 1.625rem) !important;
    line-height: 1.2 !important;
  }
  h2 {
    font-size: clamp(1.375rem, 5.5vw, 1.625rem) !important;
  }
  h3,
  .svc-card h3,
  .proc-step h3,
  .faq-trigger h3,
  .ind-card h3,
  .vis-banner-text h3 {
    font-size: 1.0625rem !important;
    line-height: 1.4 !important;
  }
  .s-lead {
    font-size: 16px !important;
    line-height: 1.7 !important;
    max-width: 100% !important;
  }
  .svc-card p,
  .proc-step p,
  .faq-body p,
  .art-body p,
  .case-desc {
    font-size: 15px !important;
    line-height: 1.7 !important;
  }

  /* ── BUTTONS: 44px minimum touch target ── */
  .btn,
  .btn-blue,
  .btn-blue-lg,
  .btn-ghost,
  .btn-outline,
  .btn-hero-dark,
  .btn-outline-dark,
  .btn-outline-dark,
  .ccp-submit {
    min-height: 44px !important;
    padding-top: 13px !important;
    padding-bottom: 13px !important;
  }
  .btn-blue-lg {
    padding-left: 24px !important;
    padding-right: 24px !important;
    font-size: 15px !important;
  }

  /* ── GRIDS → 1 column ── */
  .services-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .compare-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .stats-row {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    text-align: center;
  }
  .prob-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .q-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  /* Process grid if present */
  .proc-grid {
    grid-template-columns: 1fr !important;
  }

  /* ── INDUSTRY GRID: 1 col on mobile ── */
  .ind-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* ── VIS-BANNER (AI score section) ── */
  .vis-banner {
    padding: 28px 20px !important;
    margin-top: 32px !important;
    border-radius: 14px !important;
  }
  .vis-banner-inner {
    flex-direction: column !important;
    gap: 20px !important;
  }
  .vis-banner-text p {
    font-size: 14px !important;
  }

  /* ── SCORE RINGS: 2 col on mobile ── */
  .score-rings-row {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  /* ── FAQ ── */
  .faq-trigger h3 {
    font-size: 15px !important;
  }
  .faq-body p {
    padding-right: 0 !important;
    font-size: 15px !important;
  }

  /* ── CTA SECTION FORM ── */
  .cta-section h2 {
    font-size: clamp(1.5rem, 6vw, 2rem) !important;
  }
  .form-input,
  .ccp-input,
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  textarea {
    width: 100% !important;
    font-size: 16px !important;
    min-height: 44px;
    box-sizing: border-box !important;
  }
  textarea {
    min-height: auto !important;
  }
  .contact-form .btn,
  .contact-form button[type="submit"],
  .ccp-submit {
    width: 100% !important;
    text-align: center !important;
  }

  /* ── PAYMENT MODAL ── */
  .pm-sheet {
    padding: 24px 16px !important;
    border-radius: 20px !important;
  }
  .pm-body {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .ccp-field-row {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* ── FOOTER ── */
  footer {
    padding: 40px 20px 20px !important;
  }
  .footer-top {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .footer-bottom {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 8px !important;
    padding-top: 20px !important;
  }
  .footer-col a,
  .footer-col span {
    margin-bottom: 14px !important;
    display: block !important;
  }

  /* ── BLOG LIST PAGE ── */
  .blog-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .blog-controls {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .blog-search {
    width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Blog card meta on separate lines */
  .blog-card-meta {
    flex-direction: column !important;
    gap: 4px !important;
    align-items: flex-start !important;
  }

  /* ── BLOG ARTICLE PAGE ── */
  .art-layout {
    grid-template-columns: 1fr !important;
    padding: 32px 20px 60px !important;
    gap: 28px !important;
  }
  .art-toc {
    display: none !important;
  }
  .related-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .art-body {
    font-size: 16px !important;
    line-height: 1.78 !important;
  }
  .art-body h2 {
    font-size: 1.25rem !important;
  }
  .art-body h3 {
    font-size: 1.0625rem !important;
  }

  /* ── CASES CAROUSEL ── */
  /* Cases use horizontal scroll — keep working but clip cleanly */
  .cases-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* Case track padding to show card edge hint */
  .case-track-wrap {
    padding: 0 20px !important;
  }

  /* ── PROCESS TIMELINE ── */
  .process-line {
    left: 19px !important;
  }
  .proc-step {
    gap: 16px !important;
  }

  /* ── CONTAINER SCROLL (ts-wrap) ── */
  /* Collapse the huge scroll-space height; animation still runs on natural height */
  .ts-wrap {
    height: auto !important;
    padding: 40px 16px !important;
  }
  .ts-inner {
    padding: 0 !important;
  }
  .ts-card {
    height: 24rem !important;
    margin-top: 16px !important;
    padding: 8px !important;
  }
  .ts-caption {
    padding: 16px 20px !important;
    flex-direction: column !important;
    gap: 10px !important;
    align-items: flex-start !important;
  }
  .ts-caption-names {
    flex-direction: column !important;
    gap: 10px !important;
  }

  /* ── AI DEMO SECTION ── */
  .ai-demo-section {
    padding: 48px 20px 56px !important;
  }
  #ai-demo-grid {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }
  /* CTA button inside ai-demo section: full-width */
  .ai-demo-section .btn-hero-dark,
  .ai-demo-section a.btn {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  /* ── PERSPECTIVE MARQUEE ── */
  .pm-eyebrow {
    padding: 0 20px;
  }

  /* ── ICONS: min 24px ── */
  .ind-icon i {
    font-size: 24px !important;
  }
  .svc-icon {
    width: 44px !important;
    height: 44px !important;
    flex-shrink: 0;
  }

}

/* ══════════════════════════════════════════════════════════════
   TABLET (641px – 1024px): 2-col industry, 3-col score rings
══════════════════════════════════════════════════════════════ */
@media (min-width: 641px) and (max-width: 1024px) {
  .ind-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }
  .score-rings-row {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* Score rings: 5-col on desktop (≥ 1025px) — 5×2 for 10 platforms */
@media (min-width: 1025px) {
  .score-rings-row {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* ══════════════════════════════════════════════════════════════
   VERY SMALL (≤ 400px): extra tightening for iPhone SE
══════════════════════════════════════════════════════════════ */
@media (max-width: 400px) {
  .hero-h1 {
    font-size: 1.625rem !important;
    letter-spacing: -0.025em !important;
  }
  .nav-inner {
    padding: 0 12px !important;
  }
  .section {
    padding: 40px 16px !important;
  }
  .vis-banner {
    padding: 20px 16px !important;
  }
  footer {
    padding: 32px 16px 16px !important;
  }
  .btn-hero-dark,
  .btn-outline-dark {
    font-size: 14px !important;
    padding: 13px 20px !important;
  }
}