/* ============================================================
   BTT Translations — Mobile Optimization
   Full responsive design for all screen sizes
   ============================================================ */

/* ---- Tablet (max 1100px) ---- */
@media (max-width: 1100px) {
  :root { --pad-x: 32px; }

  .hero { grid-template-columns: 1fr; gap: 40px; }
  .quote-card-wrap { display: none; }

  .bento-grid { grid-template-columns: 1fr 1fr; }
  .bento-card--featured { grid-column: span 2; grid-row: span 1; }
  .bento-card--wide { grid-column: span 2; }

  .industries-grid { grid-template-columns: repeat(2, 1fr); }
  .testimonials-grid { grid-template-columns: 1fr 1fr; }
  .why-grid { grid-template-columns: 1fr 1fr; }

  .site-footer__inner { grid-template-columns: 1fr 1fr; gap: 32px; }

  .two-col { grid-template-columns: 1fr; gap: 40px; }
  .two-col--3-2 { grid-template-columns: 1fr; }
  .sidebar-card { position: static; }

  .trust-bar__grid { grid-template-columns: repeat(5, 1fr); }
}

/* ---- Mobile (max 768px) ---- */
@media (max-width: 768px) {
  :root { --pad-x: 16px; }

  /* Utility bar */
  .utility-bar { display: none; }

  /* Header */
  .site-header { padding: 14px var(--pad-x); position: sticky; top: 0; z-index: 100; }
  .site-header__logo img { height: 40px; }
  .site-nav { display: none; }
  .site-header__actions .btn { display: none; }
  .site-header__mobile-toggle { display: flex; padding: 8px; }
  .site-header__mobile-toggle [data-lucide] { width: 24px; height: 24px; }

  /* Mobile nav open state */
  .site-nav.mobile-open {
    display: flex !important;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    z-index: 999;
    padding: 20px var(--pad-x);
    overflow-y: auto;
    gap: 0;
  }
  .site-nav.mobile-open .site-nav__group { width: 100%; }
  .site-nav.mobile-open .site-nav__link {
    display: block;
    padding: 14px 0;
    font-size: 18px;
    font-weight: 600;
    border-bottom: 1px solid var(--line);
    width: 100%;
  }
  .site-nav.mobile-open .site-nav__dropdown {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    position: static;
    padding-top: 0;
    background: transparent;
  }
  .site-nav.mobile-open .site-nav__dropdown__inner {
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0 0 8px 16px;
  }
  .site-nav.mobile-open .site-nav__dropdown a {
    padding: 10px 0;
    font-size: 15px;
    border-bottom: 1px solid var(--bg-soft);
  }
  .site-nav.mobile-open > a.site-nav__link {
    display: block;
    padding: 14px 0;
    font-size: 18px;
    font-weight: 600;
    border-bottom: 1px solid var(--line);
  }
  .mobile-nav-close {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0 20px;
    margin-bottom: 8px;
    border-bottom: 2px solid var(--navy);
  }
  .mobile-nav-close img { height: 36px; }
  .mobile-nav-close button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
  }
  .mobile-nav-cta {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
  }

  /* Hero */
  .hero { padding: 40px var(--pad-x) 36px; }
  .hero h1 { font-size: 32px; letter-spacing: -.5px; }
  .hero__body { font-size: 15px; }
  .hero__actions { flex-direction: column; }
  .hero__actions .btn { width: 100%; justify-content: center; }
  .hero__trust { gap: 12px; }
  .hero__trust-sep { display: none; }

  /* Trust bar */
  .trust-bar { padding: 36px var(--pad-x); }
  .trust-bar__grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .trust-bar__item + .trust-bar__item { border-left: none; }
  .trust-bar__item:nth-child(1), .trust-bar__item:nth-child(2), .trust-bar__item:nth-child(3) { border-bottom: 1px solid rgba(255,255,255,.1); padding-bottom: 16px; }
  .trust-bar__number { font-size: 28px; }

  /* Logo marquee */
  .logo-marquee { padding: 28px var(--pad-x); }

  /* Sections */
  .section { padding: 48px var(--pad-x); }
  .section__heading { font-size: 26px; }

  /* Bento grid */
  .bento-grid { grid-template-columns: 1fr; gap: 14px; }
  .bento-card--featured { grid-column: span 1; }
  .bento-card--wide { grid-column: span 1; }
  .bento-card--wide .bento-card__body { flex-direction: column; }
  .bento-card--wide .bento-card__link { flex: none; }

  /* Industries */
  .industries-grid { grid-template-columns: 1fr 1fr; gap: 10px; }

  /* Testimonials */
  .testimonials-grid { grid-template-columns: 1fr; gap: 14px; }

  /* Why grid */
  .why-grid { grid-template-columns: 1fr; }
  .why-item:nth-child(odd) { border-right: none; }
  .why-item { padding: 24px 0; }

  /* Two-col */
  .two-col { grid-template-columns: 1fr; gap: 32px; }
  .two-col--3-2 { grid-template-columns: 1fr; }

  /* Page hero */
  .page-hero { padding: 40px var(--pad-x); }
  .page-hero h1 { font-size: 28px; letter-spacing: -.3px; }
  .page-hero__lead { font-size: 15px; }

  /* Content sections */
  .content-section { padding: 40px var(--pad-x); }
  .content-section h2 { font-size: 24px; }

  /* CTA section */
  .cta-section { padding: 48px var(--pad-x); }
  .cta-section h2 { font-size: 26px; }
  .cta-section__actions { flex-direction: column; align-items: center; }
  .cta-section__actions .btn { width: 100%; max-width: 320px; justify-content: center; }

  /* Footer */
  .site-footer__inner { grid-template-columns: 1fr; gap: 28px; padding: 40px var(--pad-x) 32px; }
  .site-footer__bottom { flex-direction: column; gap: 12px; text-align: center; padding: 16px var(--pad-x); }
  .site-footer__certs { justify-content: center; }

  /* Forms */
  .form-row { grid-template-columns: 1fr; }

  /* Sidebar */
  .sidebar-card { position: static; }

  /* History timeline */
  .history-item { grid-template-columns: 1fr !important; gap: 8px !important; }
}

/* ---- Small mobile (max 480px) ---- */
@media (max-width: 480px) {
  .hero h1 { font-size: 28px; }
  .trust-bar__grid { grid-template-columns: 1fr 1fr; }
  .industries-grid { grid-template-columns: 1fr; }
  .bento-card__title--featured { font-size: 22px; }
}

/* ---- Touch device improvements ---- */
@media (hover: none) {
  .bento-card:hover { transform: none; box-shadow: none; }
  .industry-card:hover { transform: none; box-shadow: none; }
  .btn:hover { opacity: 1; transform: none; }
}