/* ========================================================
   DAYZELCORP V2 - CLEAN TECH ESPORTS DESIGN SYSTEM
   responsive.css - Media Queries
   ======================================================== */

@media (max-width: 1024px) {
  .dz-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .dz-header {
    display: none; /* Hide desktop floating header on mobile */
  }

  .dz-bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background-color: var(--dz-bg);
    border-top: 1px solid var(--dz-border);
    z-index: 1000;
    justify-content: space-around;
    align-items: center;
    /* Strict limitation on filter to avoid GPU tiling issues */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  .dz-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--dz-text-secondary);
    font-size: 10px;
    text-transform: uppercase;
  }
  
  .dz-nav-item i {
    font-size: 18px;
    margin-bottom: 2px;
  }
  
  .dz-nav-item.active {
    color: var(--dz-brand-secondary);
  }

  .dz-grid-2,
  .dz-grid-3,
  .dz-grid-4 {
    grid-template-columns: 1fr; /* Stack grids on mobile */
  }
  
  body {
    padding-bottom: 70px; /* Space for bottom nav */
  }
  
  .dz-section {
    padding: var(--dz-space-xl) 0;
  }
  
  .dz-hero-title {
    font-size: 2rem;
  }
}