/* ===== RESPONSIVE STYLES ===== */
/* Mobile First Approach */

/* Hide decorations on mobile by default */
.hero-decoration,
.section-with-slots::before,
.section-with-roulette::after,
.section-casinos::before,
.section-casinos::after {
  display: none;
}

/* Smaller jackpot on mobile */
.jackpot-counter {
  flex-direction: column;
  padding: var(--space-sm) var(--space-md);
}

.jackpot-counter__value {
  font-size: var(--text-xl);
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  .form-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .jackpot-counter {
    flex-direction: row;
    padding: var(--space-md) var(--space-xl);
  }

  .jackpot-counter__value {
    font-size: var(--text-2xl);
  }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .casino-card {
    flex-direction: row;
    align-items: center;
  }

  .casino-card__header {
    flex: 0 0 auto;
    width: 200px;
  }

  .casino-card__info {
    flex: 1;
  }

  .casino-card__features {
    flex: 0 0 auto;
  }

  .casino-card__actions {
    flex: 0 0 auto;
    flex-direction: column;
    margin-top: 0;
    width: 160px;
  }

  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Large devices (desktops, 1024px and up) */
@media (min-width: 1024px) {
  .nav {
    display: block;
  }

  .mobile-menu-btn {
    display: none;
  }

  .mobile-menu {
    display: none;
  }

  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }

  .grid-5 {
    grid-template-columns: repeat(5, 1fr);
  }

  .footer-grid {
    grid-template-columns: 2fr 1fr 1fr 1fr;
  }

  /* Show decorations on desktop */
  .hero-decoration {
    display: block;
  }

  .section-with-slots::before,
  .section-with-roulette::after {
    display: block;
  }

  .section-casinos::before,
  .section-casinos::after {
    display: block;
  }

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

  .hero h1 {
    font-size: var(--text-3xl);
  }
}

/* Extra large devices (large desktops, 1280px and up) */
@media (min-width: 1280px) {
  .container {
    padding: 0 var(--space-xl);
  }
}

/* ===== TOUCH TARGET SIZES ===== */
/* Ensure minimum 44x44px for touch devices */
@media (pointer: coarse) {
  .btn {
    min-height: 48px;
    min-width: 48px;
  }

  .nav-link {
    padding: var(--space-md);
  }

  .mobile-menu a {
    min-height: 52px;
  }

  .form-group input,
  .form-group textarea,
  .form-group select {
    min-height: 52px;
  }
}

/* ===== PREVENT HORIZONTAL OVERFLOW ===== */
* {
  max-width: 100%;
}

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

pre,
code {
  max-width: 100%;
  overflow-x: auto;
  white-space: pre-wrap;
  word-wrap: break-word;
}

table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

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

  body {
    background: white;
    color: black;
  }

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

  a {
    color: black;
    text-decoration: underline;
  }
}

/* ===== DARK MODE SUPPORT (if user prefers) ===== */
/* Site is already dark, but this ensures consistency */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
  }
}

/* ===== HIGH CONTRAST MODE ===== */
@media (prefers-contrast: high) {
  :root {
    --color-text: #FFFFFF;
    --color-text-muted: #CCCCCC;
  }

  .card {
    border-width: 2px;
  }

  .btn {
    border-width: 3px;
  }
}

/* ===== LANDSCAPE MOBILE ===== */
@media (max-width: 767px) and (orientation: landscape) {
  .hero {
    padding: var(--space-xl) 0;
  }

  .hero h1 {
    font-size: var(--text-xl);
  }

  .section {
    padding: var(--space-lg) 0;
  }
}

/* ===== SAFE AREA INSETS (for notched devices) ===== */
@supports (padding: max(0px)) {
  .site-header {
    padding-left: max(var(--space-md), env(safe-area-inset-left));
    padding-right: max(var(--space-md), env(safe-area-inset-right));
  }

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

  .container {
    padding-left: max(var(--space-md), env(safe-area-inset-left));
    padding-right: max(var(--space-md), env(safe-area-inset-right));
  }
}