/* =========================================================================
   PHASE 14D — Voice & Chat AI · dedicated mobile editorial compression
   SCOPE: Voice and Chat AI.html ONLY (html[data-vc14d]).
   Mobile-only — every rule lives under @media (max-width: 767px). Desktop and
   all sibling "Voice Chat AI - *" landing pages are untouched (no marker).
   Builds on 14C (card caps) + the shared collapse system (mobile-section-nav).
   ========================================================================= */

/* Injected mobile chrome is hidden on tablet/desktop */
.vcqp, .vcmid { display: none; }

@media (max-width: 767px) {

  /* =================================================================
     HERO — drop the "giant technical poster" feeling
     ================================================================= */
  html[data-vc14d] .vc-hero {
    padding-top: 80px !important;
    padding-bottom: 22px !important;
  }
  html[data-vc14d] .vc-hero-sub {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 14px !important;
  }
  html[data-vc14d] .vc-hero-channels {
    gap: 6px !important;
    margin-top: 12px !important;
  }
  /* The three device mockups stack to ~1950px. Make them a swipeable rail. */
  html[data-vc14d] .vcg-hero-trio {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 14px !important;
    overflow-x: auto;
    overflow-y: hidden;
    margin: 16px -20px 0 !important;
    padding: 0 20px 10px !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 30px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 30px), transparent 100%);
  }
  html[data-vc14d] .vcg-hero-trio::-webkit-scrollbar { display: none; }
  html[data-vc14d] .vcg-hero-trio > * {
    flex: 0 0 82% !important;
    scroll-snap-align: center;
  }

  /* =================================================================
     QUICK PATH — compact decision block injected after the hero
     ================================================================= */
  html[data-vc14d] .vcqp {
    display: block;
    max-width: 560px;
    margin: 0 auto;
    padding: 16px 18px 2px;
  }
  .vcqp-label {
    font-family: var(--font-mono, ui-monospace, Menlo, monospace);
    font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--site-text-3, #6E7B98); margin: 0 0 10px;
  }
  .vcqp-primary {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    width: 100%; padding: 14px 16px; border-radius: 12px;
    background: var(--site-blue, #0055FF); color: #fff; text-decoration: none;
    font-weight: 600; font-size: 15px; margin-bottom: 10px;
    box-shadow: 0 6px 24px rgba(0,85,255,0.28);
  }
  .vcqp-primary .vcqp-arrow { flex: 0 0 auto; opacity: 0.9; }
  .vcqp-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .vcqp-tile {
    display: flex; flex-direction: column; gap: 4px; min-height: 64px;
    padding: 11px 10px; border-radius: 11px;
    background: rgba(12,18,38,0.85); border: 1px solid rgba(79,200,255,0.18);
    color: var(--site-text, #ECF0FA); text-decoration: none;
  }
  .vcqp-tile .t { font-size: 12.5px; font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; }
  .vcqp-tile .s {
    font-family: var(--font-mono, ui-monospace, Menlo, monospace);
    font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--site-text-3, #6E7B98);
  }
  .vcqp-tile:active { border-color: rgba(79,200,255,0.5); }

  /* =================================================================
     MID-PAGE CTA — after the first major content block
     ================================================================= */
  html[data-vc14d] .vcmid {
    display: block; margin: 4px 18px 8px; padding: 22px 20px;
    border-radius: 16px; text-align: center;
    background:
      radial-gradient(120% 140% at 50% 0%, rgba(0,85,255,0.18), transparent 60%),
      linear-gradient(180deg, rgba(12,18,38,0.92), rgba(6,9,18,0.94));
    border: 1px solid rgba(79,200,255,0.2);
  }
  .vcmid-h {
    font-family: var(--font-display, inherit);
    font-size: 21px; line-height: 1.18; font-weight: 600; letter-spacing: -0.01em;
    color: #fff; margin: 0 0 14px; text-wrap: balance;
  }
  .vcmid-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 13px 22px; border-radius: 11px;
    background: var(--site-blue, #0055FF); color: #fff; text-decoration: none;
    font-weight: 600; font-size: 15px; box-shadow: 0 6px 24px rgba(0,85,255,0.28);
  }

  /* =================================================================
     TECHNICAL / CINEMATIC — collapse the tall inner blocks to a tight
     summary window (heading stays above the fade). Toggle + fade come
     from styles-mobile-pass.css; we only tighten the collapsed height.
     ================================================================= */
  html[data-vc14d] .vca-console[data-bgmn-expand="collapsed"],
  html[data-vc14d] .vc-how-flow[data-bgmn-expand="collapsed"],
  html[data-vc14d] .vc-dash-frame[data-bgmn-expand="collapsed"],
  html[data-vc14d] .vci-flows[data-bgmn-expand="collapsed"],
  html[data-vc14d] .vcs-stage[data-bgmn-expand="collapsed"],
  html[data-vc14d] .cw-container[data-bgmn-expand="collapsed"] {
    max-height: 320px !important;
  }

  /* Integrations industry rail — 14 stacked chips → swipeable rail */
  html[data-vc14d] .vci-rail {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    gap: 8px !important;
    margin: 0 -20px 16px !important;
    padding: 2px 20px 8px !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 28px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 28px), transparent 100%);
  }
  html[data-vc14d] .vci-rail::-webkit-scrollbar { display: none; }
  html[data-vc14d] .vci-rail > * { flex: 0 0 auto !important; }

  /* Integrations logo cloud (decorative) — cap height with a soft fade */
  html[data-vc14d] .vci-stage {
    max-height: 300px !important;
    overflow: hidden !important;
    -webkit-mask-image: linear-gradient(180deg, #000 0, #000 72%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 0, #000 72%, transparent 100%);
  }

  /* Tighten the section rhythm a touch more than the sitewide 46px */
  html[data-vc14d] section:not(.vc-hero) {
    padding-top: 38px !important;
    padding-bottom: 38px !important;
  }
}