/**
 * Mobile & tablet — structural fixes (nav, modals, sticky bars).
 * Tokens: responsive-system.css | Components: mobile-design-system.css
 */

/* ── Safe viewport ── */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  overflow-x: clip;
}

/* ── Tablet (≤1024px) — page-specific; tokens live in responsive-system.css ── */
@media (max-width: 1024px) {
  :root {
    --brand-height: 36px;
  }

  .brand.brand--wordmark {
    width: auto;
    min-width: 0;
    max-width: min(168px, 42vw);
    height: 36px;
    padding: 3px 9px;
  }

  .brand.brand--wordmark img,
  .home-page .brand.brand--wordmark img {
    height: 27px;
    max-width: 100%;
  }

  .footer-brand--wordmark .footer-brand-logo {
    height: 30px;
    max-width: min(168px, 48vw);
  }

  .home-page .home-eco-chain > li:not(.home-eco-conn) {
    flex: 1 1 calc(50% - 12px);
    min-width: min(100%, 260px);
  }

  .home-page .home-ops-flow > li:not(.home-ops-conn) {
    flex: 1 1 calc(33.333% - 8px);
  }

  .builder-layout,
  .products-page .builder-layout,
  .solution-builder-page .builder-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .products-page .builder-ecosystem,
  .solution-builder-page .builder-ecosystem {
    position: static;
    top: auto;
  }
}

/* ── Phone (≤768px) — page-specific overrides ── */
@media (max-width: 768px) {
  :root {
    --brand-height: 34px;
  }

  .site-header {
    top: max(10px, env(safe-area-inset-top, 0px));
    padding-left: max(12px, env(safe-area-inset-left, 0px));
    padding-right: max(12px, env(safe-area-inset-right, 0px));
  }

  .header-inner {
    gap: 8px;
  }

  /* Header logo — phone size */
  .brand.brand--wordmark {
    max-width: min(140px, 40vw);
    height: 34px;
    padding: 2px 8px;
  }

  .brand.brand--wordmark img,
  .home-page .brand.brand--wordmark img {
    height: 24px;
    max-width: 100%;
  }

  .footer-brand--wordmark .footer-brand-logo {
    height: 26px;
    max-width: min(140px, 46vw);
  }

  .mobile-menu {
    padding-top: max(110px, calc(88px + env(safe-area-inset-top, 0px)));
    padding-bottom: max(32px, env(safe-area-inset-bottom, 0px));
    padding-left: max(20px, env(safe-area-inset-left, 0px));
    padding-right: max(20px, env(safe-area-inset-right, 0px));
  }

  .mobile-menu a {
    font-size: clamp(1rem, 4vw, 1.125rem);
    min-height: 48px;
  }

  .home-page .home-eco-chain > li:not(.home-eco-conn) {
    flex: 1 1 100%;
  }

  .home-page .home-ops-flow > li:not(.home-ops-conn) {
    flex: 1 1 calc(50% - 6px);
  }

  /* Contact / demo */
  .demo-page .demo-booking-inner {
    width: 100%;
    max-width: none;
  }

  .demo-page .demo-product-grid {
    grid-template-columns: 1fr;
  }

  /* Company ecosystem diagram */
  .company-page .evo-eco-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Solution builder */
  .solution-builder-page .builder-panel {
    padding: 18px 16px;
  }

  .solution-builder-page .builder-matched-cases {
    margin-top: 16px;
  }
}

/* ── Small phone (≤640px) ── */
@media (max-width: 640px) {
  .site-header {
    top: max(8px, env(safe-area-inset-top, 0px));
    padding-left: max(10px, env(safe-area-inset-left, 0px));
    padding-right: max(10px, env(safe-area-inset-right, 0px));
  }

  .header-inner {
    gap: 6px;
  }

  .brand.brand--wordmark {
    max-width: min(112px, 36vw);
    height: 30px;
    padding: 2px 6px;
  }

  .brand.brand--wordmark img,
  .home-page .brand.brand--wordmark img {
    height: 20px;
  }

  .footer-brand--wordmark .footer-brand-logo {
    height: 22px;
    max-width: min(120px, 42vw);
  }

  .mobile-menu {
    padding-top: max(96px, calc(72px + env(safe-area-inset-top, 0px)));
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
  }

  .mobile-menu a {
    font-size: clamp(0.9375rem, 3.8vw, 1.0625rem);
    min-height: 44px;
  }

  .home-page .home-plat-cinema-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .home-page .home-plat-cinema-actions .home-plat-cinema-cta,
  .home-page .home-plat-cinema-actions .secondary-action {
    width: 100%;
    justify-content: center;
  }

  .home-page .home-ops-flow > li:not(.home-ops-conn) {
    flex: 1 1 100%;
  }

  .demo-page .demo-form-card {
    padding: 24px 16px 28px;
  }

  .solution-builder-page .builder-panel {
    padding: 14px 12px;
  }
}

/* ── Legacy ≤480px (kept for denser brand sizing) ── */
@media (max-width: 480px) {
  .brand.brand--wordmark {
    max-width: min(120px, 38vw);
    height: 30px;
    padding: 2px 6px;
  }

  .brand.brand--wordmark img,
  .home-page .brand.brand--wordmark img {
    height: 20px;
  }

  .footer-brand--wordmark .footer-brand-logo {
    height: 22px;
    max-width: min(120px, 42vw);
  }
}

/* ── Touch: minimum tap targets ── */
@media (hover: none) and (pointer: coarse) {
  a.primary-action,
  a.secondary-action,
  .demo-button,
  .footer-pill,
  .home-eco-chip,
  .home-plat-dot,
  .solx-nav-track a {
    min-height: 44px;
  }
}