/* Vue SPA responsive / mobile UX layer — keeps pitch-v3 look, fixes breakpoints */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  overflow-x: hidden;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

img,
video,
iframe {
  max-width: 100%;
}

/* Sticky nav respects notch */
.pitch-nav {
  padding-top: env(safe-area-inset-top);
  top: 0;
}

/* Mobile: restore Recognition access when desktop nav is hidden */
.nav-mobile-link {
  display: none;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
  color: #63526e;
  white-space: nowrap;
  padding: 8px 6px;
  min-height: 44px;
}

.nav-mobile-link:hover,
.nav-mobile-link.router-link-active {
  color: #792aa8;
}

/* Touch-friendly filter chips */
.filter-pill {
  flex-shrink: 0;
  min-height: 40px;
  -webkit-tap-highlight-color: transparent;
}

.filter-scroller {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.filter-scroller::-webkit-scrollbar {
  display: none;
}

.search-shell {
  min-width: 0;
}

.search-shell input {
  width: 100%;
  min-height: 44px;
  font-size: 16px; /* iOS: avoid zoom-on-focus */
}

.directory-pick,
.pitch-nav-present,
.locale-option,
.award-left,
.award-right,
.hero-video-option,
.card-video-toggle,
.present-clip,
#slidePrev,
#slideNext,
.p-fullscreen,
.p-exit {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Awards track: swipeable on touch devices */
.awards-track {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
}

.award-tile {
  scroll-snap-align: start;
}

/* Presentation tray: safe area + wrap on narrow phones */
.presentation-tray {
  bottom: max(14px, env(safe-area-inset-bottom));
  flex-wrap: wrap;
  justify-content: center;
  row-gap: 8px;
  max-width: min(560px, calc(100% - 20px));
}

body.is-choosing {
  padding-bottom: calc(88px + env(safe-area-inset-bottom));
}

/* Presentation mode */
.pitch-presentation {
  height: 100dvh;
  max-height: 100dvh;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  overscroll-behavior: none;
  touch-action: pan-y;
}

.pitch-present-bar,
.pitch-present-footer {
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
}

.presentation-body {
  overscroll-behavior: none;
}

/* Product detail: prevent video overflow */
.product-main-photo,
.product-hero-demo-video {
  width: 100%;
}

.exp-video iframe,
.exp-video video,
.demo-frame video,
.demo-frame iframe {
  width: 100%;
  max-width: 100%;
}

.control-method-card img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* Footer grid collapse already exists; tighten gaps */
@media (max-width: 740px) {
  .nav-mobile-link {
    display: inline-flex;
  }

  .pitch-container {
    width: calc(100% - 28px);
  }

  .directory-heading {
    gap: 14px;
  }

  .directory-pick {
    width: 100%;
    justify-content: center;
    min-height: 44px;
  }

  .directory-toolbar {
    gap: 12px;
    padding: 10px;
  }

  .directory-count {
    flex-wrap: wrap;
    gap: 10px;
  }

  .scroll-cue {
    font-size: 10px;
  }

  .innovation-card-info {
    padding: 16px 16px 18px;
  }

  .innovation-card-info > p {
    font-size: 13px;
    line-height: 1.65;
  }

  .presentation-tray {
    gap: 6px 10px;
    padding: 10px 12px;
    border-radius: 22px;
    font-size: 11px;
  }

  .presentation-tray > div:first-child {
    flex: 1 1 100%;
    text-align: center;
  }

  .presentation-tray button {
    min-height: 44px;
    flex: 1;
  }

  .presentation-tray button:last-child {
    flex: 1.4;
  }

  .footer-main {
    grid-template-columns: 1fr;
    gap: 28px;
    padding-bottom: 36px;
  }

  .pitch-footer {
    padding: 48px 0 calc(22px + env(safe-area-inset-bottom));
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    font-size: 11px;
  }

  .product-hero-buttons {
    flex-wrap: wrap;
  }

  .btn-hero-light,
  .btn-hero-outline {
    min-height: 44px;
  }

  .product-breadcrumb {
    flex-wrap: wrap;
    gap: 8px;
  }

  .hero-video-selector {
    flex-wrap: wrap;
  }

  .hero-video-option {
    min-height: 40px;
  }

  /* Presentation chrome */
  .pitch-present-bar {
    height: auto;
    min-height: 64px;
    padding: 10px 12px;
    gap: 8px;
    flex-wrap: wrap;
  }

  .present-header-center {
    order: 3;
    flex: 1 1 100%;
    text-align: center;
    font-size: 10px;
    letter-spacing: 0.08em;
  }

  .present-header-actions {
    gap: 4px;
    margin-left: auto;
  }

  .pitch-present-footer {
    height: auto;
    min-height: 64px;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
  }

  .present-shortcuts {
    display: none;
  }

  .present-central-nav {
    gap: 16px;
    width: 100%;
    justify-content: center;
  }

  .present-central-nav button {
    min-width: 48px;
    min-height: 44px;
    font-size: 18px;
  }

  .present-progress {
    order: -1;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
  }

  .pitch-slide-visual {
    margin: 8px;
    border-radius: 14px;
  }

  .pitch-slide-copy {
    padding: 12px 16px 20px;
    -webkit-overflow-scrolling: touch;
  }

  .pitch-clip-switch {
    flex-wrap: wrap;
  }

  .p-fullscreen {
    /* Many mobile browsers lack reliable Fullscreen API */
    display: none;
  }

  .locale-switcher-present .locale-option {
    min-width: 36px;
    min-height: 40px;
  }
}

@media (max-width: 490px) {
  .pitch-container {
    width: calc(100% - 24px);
  }

  .pitch-logo {
    width: 102px;
    height: auto;
  }

  .nav-mobile-link {
    font-size: 11px;
    padding: 6px 4px;
  }

  .directory-heading h2,
  .section-split-header h2,
  .profile-highlights h2 {
    font-size: clamp(28px, 8vw, 34px);
  }

  .innovation-card-image {
    height: min(245px, 58vw);
  }

  .presentation-tray span[data-lang] {
    font-size: 10px;
  }

  .case-study-cover img {
    width: 100%;
  }
}

/* Landscape phones in presentation mode */
@media (max-height: 480px) and (orientation: landscape) {
  .pitch-slide.active {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .pitch-slide-visual {
    height: auto !important;
    margin: 8px;
  }

  .pitch-present-bar,
  .pitch-present-footer {
    min-height: 48px;
    height: 48px;
    padding-top: 4px;
    padding-bottom: 4px;
  }

  .present-header-center {
    display: none;
  }
}

/* Avoid horizontal page scroll from sticky/full-bleed elements */
.site-shell,
.pitch-presentation,
main {
  max-width: 100%;
  overflow-x: clip;
}