/* ===========================
   RESPONSIVE STYLES
   Mobile-first approach
   =========================== */

/* Prevent horizontal scroll */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

* {
  max-width: 100%;
  box-sizing: border-box;
}

img, video, iframe, embed, object {
  max-width: 100%;
  height: auto;
}

/* Base mobile styles */
.container {
  width: 100%;
  max-width: var(--container-xl);
  margin: 0 auto;
  padding: 0 1rem;
}

/* Hide on mobile */
.hide-mobile {
  display: none;
}

/* Hide on desktop */
.hide-desktop {
  display: block;
}

/* === SMALL SCREENS (640px+) === */
@media (min-width: 640px) {
  .container {
    padding: 0 1.5rem;
  }

  .hero__content {
    text-align: left;
  }

  .hero__buttons {
    justify-content: flex-start;
  }
}

/* === MEDIUM SCREENS (768px+) === */
@media (min-width: 768px) {
  .container {
    padding: 0 2rem;
  }

  .hide-mobile {
    display: block;
  }

  /* Adjust section spacing */
  .section {
    padding: var(--space-3xl) 0;
  }

  .section-lg {
    padding: calc(var(--space-3xl) * 1.5) 0;
  }

  /* Hero adjustments */
  .hero {
    padding: calc(var(--space-3xl) * 1.5) 0;
  }
}

/* === LARGE SCREENS (1024px+) === */
@media (min-width: 1024px) {
  .hide-desktop {
    display: none;
  }

  /* Navigation visible */
  .nav-desktop {
    display: flex;
  }

  .mobile-menu-btn,
  .mobile-menu {
    display: none !important;
  }

  /* Footer grid */
  .footer__grid {
    grid-template-columns: 2fr 1fr 1fr 1fr;
  }
}

/* === EXTRA LARGE SCREENS (1280px+) === */
@media (min-width: 1280px) {
  .container {
    padding: 0 2rem;
  }
}

/* === PRINT STYLES === */
@media print {
  .header,
  .footer,
  .mobile-menu,
  .mobile-menu-btn,
  .btn-cta,
  .casino-card__cta {
    display: none !important;
  }

  body {
    background: white;
    color: black;
  }

  .card {
    box-shadow: none;
    border: 1px solid #ccc;
  }
}

/* === REDUCED MOTION === */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* === DARK MODE OVERRIDE (if system prefers light) === */
/* Site is already dark, so no changes needed */

/* === HIGH CONTRAST === */
@media (prefers-contrast: high) {
  :root {
    --color-border: rgba(255, 255, 255, 0.4);
    --color-text-muted: #C0C0D0;
  }

  .card {
    border-width: 2px;
  }

  .btn {
    border: 2px solid currentColor;
  }
}

/* === TOUCH DEVICE OPTIMIZATIONS === */
@media (hover: none) and (pointer: coarse) {
  /* Larger touch targets */
  .btn {
    min-height: 48px;
    padding: 0.875rem 1.75rem;
  }

  .nav-desktop__link,
  .mobile-menu__link,
  .footer__link {
    min-height: 48px;
  }

  /* Remove hover effects that don't work well on touch */
  .card:hover {
    transform: none;
  }

  .casino-card:hover {
    transform: none;
  }

  .category-card:hover .category-card__icon {
    transform: none;
  }
}

/* === LANDSCAPE PHONE FIXES === */
@media (max-height: 500px) and (orientation: landscape) {
  .hero {
    padding: var(--space-xl) 0;
  }

  .mobile-menu {
    top: 60px;
  }
}

/* === SAFE AREA INSETS (iPhone X+) === */
@supports (padding: max(0px)) {
  .container {
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
  }

  .footer {
    padding-bottom: max(var(--space-xl), env(safe-area-inset-bottom));
  }
}