/* Global mobile optimizations shared by all VCB pages */

:root{
  --mobile-gap:12px;
}

/* Critical mobile fixes for startpage */
@media (max-width: 768px) {
  /* Fix viewport and overflow issues */
  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
  }
  
  /* Fix hero section on mobile */
  .hero {
    padding: 60px 0 40px !important;
    overflow: hidden !important;
  }
  
  /* Fix navigation wrapping */
  .nav {
    flex-wrap: wrap !important;
    padding: 12px 0 !important;
  }
  
  /* Fix grid layouts */
  .grid-2, .grid-3, .grid-4 {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  
  /* Fix card padding */
  .card {
    padding: 20px !important;
    margin: 0 !important;
  }
  
  /* Fix text sizing */
  h1 {
    font-size: clamp(28px, 7vw, 42px) !important;
  }
  
  h2 {
    font-size: clamp(20px, 6vw, 28px) !important;
  }
  
  /* Fix buttons */
  .btn {
    font-size: 14px !important;
    padding: 12px 20px !important;
    width: auto !important;
    max-width: 100% !important;
  }
  
  /* Fix stats grid */
  .stats {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }
  
  /* Disable problematic animations on mobile */
  .card:hover {
    transform: none !important;
  }
  
  /* Fix modal positioning */
  .video-modal-content {
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
  }
}

@media (max-width: 1024px){
  body{
    overflow-x:hidden;
    font-size:16px;
    -webkit-text-size-adjust:100%;
  }
  .wrap{ padding:0 18px; }
  .top{
    position:sticky;
    top:0;
    z-index:1000;
  }
  .brand img{
    height:140px !important;
    width:auto;
  }
  .nav{
    flex-wrap:wrap;
    gap:var(--mobile-gap);
    align-items:center;
  }
  .nav nav,
  .top nav{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    width:100%;
    gap:var(--mobile-gap);
    margin-right:0 !important;
  }
  .nav nav a,
  .nav a,
  nav a{
    font-size:1rem !important;
    margin:4px 8px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  .dropdown{
    width:100%;
    text-align:center;
    position:relative;
  }
  .dropdown > a{
    display:inline-flex;
    justify-content:center;
    width:100%;
    padding:10px 0;
  }
  .dropdown-content{
    position:static !important;
    display:none;
    flex-direction:column;
    width:100% !important;
    margin-top:6px;
    border-radius:16px !important;
    border:1px solid rgba(0,0,0,.08) !important;
    box-shadow:none !important;
    background:rgba(255,255,255,0.96) !important;
    overflow:hidden;
  }
  .dropdown:focus-within .dropdown-content,
  .dropdown.open .dropdown-content{
    display:flex !important;
  }
  .dropdown-content a{
    margin:0;
    width:100%;
    text-align:center;
  }
  .gogga-coming-soon{
    position:relative;
    top:auto;
    right:auto;
    transform:none;
    order:3;
    margin-left:auto;
    margin-right:auto;
  }
  .coming-soon-text{ font-size:0.8em; }
  .meet-vcb-seal{ margin-left:0; }
}

@media (max-width: 900px){
  .hero,
  header.hero{
    padding:72px 0 48px;
  }
  .section{ padding:56px 0; }
  h1{ font-size:clamp(34px,8vw,48px); }
  h2{ font-size:clamp(24px,6vw,36px); }
  h3{ font-size:clamp(18px,4.5vw,26px); }
  .grid,
  .grid-2-col,
  .grid-3-col,
  .grid-4-col,
  .metrics-grid,
  .value-grid,
  .card-grid,
  .capabilities-grid,
  .category-grid,
  .stats,
  .goals,
  .playbook-grid{
    grid-template-columns:1fr !important;
    gap:20px;
  }
  .card,
  .module,
  .panel,
  .metric-card,
  .value-block,
  .category-card{
    padding:24px;
  }
}

@media (max-width: 640px){
  .brand img{ height:95px !important; }
  .nav nav a,
  .nav a,
  nav a{
    font-size:0.92rem !important;
    margin:4px 6px;
  }
  .wrap{ padding:0 14px; }
  .stats{ grid-template-columns:1fr 1fr !important; }
  .stats .stat{ padding:14px; }
  .btn,
  .btn-ghost,
  .cta-btn,
  button{
    max-width:100%;
  }
  table{ display:block; overflow-x:auto; }
}