/* Responsive Styles - Holland Casino Style Mobile First */

/* ============================================
   MOBILE (default)
   ============================================ */

.nav {
  display: none;
}

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

.grid-cols-2,
.grid-cols-3,
.grid-cols-4 {
  grid-template-columns: 1fr;
}

.hero {
  padding: var(--space-24) 0 var(--space-16);
  min-height: 400px;
}

.hero__content {
  padding: var(--space-6);
  margin: 0 var(--space-4);
}

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

.hero__subtitle {
  font-size: var(--text-base);
}

.hero__actions {
  flex-direction: column;
}

.hero__actions .btn {
  width: 100%;
}

.footer__inner {
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

/* ============================================
   TABLET (640px+)
   ============================================ */

@media (min-width: 640px) {
  .grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero__actions {
    flex-direction: row;
    justify-content: center;
  }

  .hero__actions .btn {
    width: auto;
  }

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

/* ============================================
   TABLET LANDSCAPE (768px+)
   ============================================ */

@media (min-width: 768px) {
  .container {
    padding: 0 var(--space-8);
  }

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

  .hero {
    padding: var(--space-32) 0 var(--space-20);
    min-height: 450px;
  }

  .hero__content {
    padding: var(--space-8);
    margin: 0 auto;
  }

  .hero__title {
    font-size: var(--text-4xl);
  }

  .hero__subtitle {
    font-size: var(--text-lg);
  }

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

  .section-title {
    font-size: var(--text-4xl);
  }
}

/* ============================================
   DESKTOP (1024px+)
   ============================================ */

@media (min-width: 1024px) {
  .nav {
    display: flex;
  }

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

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

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

  .hero {
    padding: var(--space-32) 0 var(--space-24);
  }

  .hero__title {
    font-size: var(--text-5xl);
  }

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

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

/* ============================================
   LARGE DESKTOP (1280px+)
   ============================================ */

@media (min-width: 1280px) {
  .grid-cols-4 {
    grid-template-columns: repeat(4, 1fr);
  }

  .container {
    padding: 0 var(--space-10);
  }

  .hero__title {
    font-size: var(--text-6xl);
  }
}

/* ============================================
   HOVER STATES (non-touch)
   ============================================ */

@media (hover: hover) {
  .card:hover {
    transform: translateY(-8px);
  }

  .category-card:hover {
    transform: translateY(-8px);
  }

  .category-card:hover .category-card__icon {
    transform: scale(1.1) rotate(5deg);
  }

  .btn--primary:hover {
    transform: translateY(-2px);
  }

  .btn--secondary:hover {
    transform: translateY(-2px);
  }

  .kw-pill:hover {
    transform: scale(1.05);
  }
}

/* Touch devices - disable transforms */
@media (hover: none) {
  .card:hover,
  .category-card:hover,
  .btn--primary:hover,
  .btn--secondary:hover,
  .kw-pill:hover {
    transform: none;
  }

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

/* ============================================
   REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  .carousel--animated .carousel__track {
    animation: none;
  }

  .modal__content {
    animation: none;
    transition: none;
  }

  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
  .header,
  .footer,
  .mobile-nav,
  .modal,
  .carousel,
  .btn,
  .pagination,
  .breadcrumb {
    display: none !important;
  }

  body {
    background: white;
    color: black;
    font-size: 12pt;
  }

  .main {
    padding: 0;
  }

  .container {
    max-width: 100%;
    padding: 0;
  }

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

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
  }

  .hero {
    background: none;
    padding: 2rem 0;
  }

  .hero__title,
  .hero__subtitle {
    color: black;
    text-shadow: none;
    background: none;
    -webkit-text-fill-color: black;
  }
}