/* Responsive design for Winalo */

@media (max-width: 768px) {
  .header-inner {
    flex-wrap: wrap;
  }
  /* Show burger and hide nav on mobile */
  .burger {
    display: block;
  }
  .nav-menu {
    width: 100%;
  }
  .nav-menu ul {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 0.5rem;
  }
  .nav-menu.active ul {
    display: flex;
  }
  .nav-menu ul {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 0.5rem;
  }
  .lang-switcher {
    margin-top: 0.5rem;
  }
  .filters {
    flex-direction: column;
    align-items: stretch;
  }
  /* On medium screens show two cards per row */
  .brand-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .hero h1 {
    font-size: 1.6rem;
  }
  .cta-buttons {
    flex-direction: column;
    gap: 0.7rem;
  }
  /* Adjust slot grid on medium screens for better mobile experience */
  .slot-grid {
    grid-template-columns: repeat(3, 90px);
    gap: 0.5rem;
  }
  .slot-cell {
    width: 90px;
    height: 90px;
  }
  .slot-cell img {
    width: 60px;
    height: 60px;
  }
}

/* Extra small screens */
@media (max-width: 480px) {
  .brand-grid {
    grid-template-columns: 1fr;
  }
  .about-company {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .about-company img {
    margin-bottom: 1rem;
  }
  /* Smaller slot grid for very small screens */
  .slot-grid {
    grid-template-columns: repeat(3, 70px);
    gap: 0.4rem;
  }
  .slot-cell {
    width: 70px;
    height: 70px;
  }
  .slot-cell img {
    width: 50px;
    height: 50px;
  }
}