/* Responsive Styles */

/* Base Responsive Classes */
.hide-on-mobile {
    display: initial;
}

.show-on-mobile {
    display: none;
}

/* Small screens (up to 480px) */
@media (max-width: 480px) {
    :root {
        --text-5xl: 2.25rem;  /* 36px */
        --text-4xl: 1.875rem; /* 30px */
        --text-3xl: 1.5rem;   /* 24px */
        --text-2xl: 1.25rem;  /* 20px */
    }
    
    .container {
        padding: 0 var(--space-2);
    }
    
    .hide-on-mobile {
        display: none;
    }
    
    .show-on-mobile {
        display: initial;
    }
    
    .btn {
        padding: var(--space-1) var(--space-3);
    }
    
    .btn-large {
        padding: var(--space-1) var(--space-4);
    }
    
    .section-title {
        margin-bottom: var(--space-4);
    }
    
    /* Header adjustments */
    #main-header {
        padding: var(--space-1) 0;
    }
    
    .logo h1 {
        font-size: var(--text-2xl);
    }
    
    /* Hero adjustments */
    .hero-content h2 {
        font-size: var(--text-3xl);
    }
    
    .hero-content p {
        font-size: var(--text-lg);
    }
    
    /* CTA section */
    .cta-buttons {
        flex-direction: column;
        gap: var(--space-2);
    }
    
    .cta-buttons .btn {
        width: 100%;
    }
    
    /* Footer adjustments */
    .footer-grid {
        gap: var(--space-4);
    }
}

/* Medium screens (481px - 768px) */
@media (max-width: 768px) {
    /* General adjustments */
    .two-column,
    .two-column.reverse {
        flex-direction: column;
        gap: var(--space-4);
    }
    
    .services-grid,
    .testimonial-grid,
    .team-grid,
    .values-grid,
    .stats-grid,
    .amenities-grid,
    .contact-grid {
        grid-template-columns: 1fr;
    }
    
    /* Navigation adjustments */
    .menu-toggle {
        display: flex;
        z-index: 101;
    }
    
    .main-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 75%;
        height: 100vh;
        background-color: var(--steel-gray-dark);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        transition: right 0.3s ease;
        z-index: 100;
        padding: var(--space-5) 0;
    }
    
    .main-menu.active {
        right: 0;
    }
    
    .main-menu li {
        margin: var(--space-2) 0;
    }
    
    .main-menu li a {
        font-size: var(--text-lg);
        padding: var(--space-1) var(--space-2);
    }
    
    /* Page sections */
    .page-banner {
        height: 200px;
        margin-top: 60px;
    }
    
    .timeline-container::before {
        left: 30px;
    }
    
    .timeline-item,
    .timeline-item:nth-child(odd) {
        flex-direction: row;
    }
    
    .timeline-date {
        width: 80px;
        margin-right: var(--space-2);
        margin-left: 0;
    }
    
    .timeline-content {
        max-width: calc(100% - 100px);
    }
    
    /* Casino page */
    .game-category {
        flex-direction: column;
    }
    
    .category-image {
        flex: 0 0 200px;
        width: 100%;
    }
    
    .rewards-tiers,
    .membership-tiers {
        grid-template-columns: 1fr;
    }
    
    /* Contact page */
    .faq-question h3 {
        font-size: var(--text-base);
    }
}

/* Large screens (769px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    /* Adjust grid layouts */
    .services-grid,
    .team-grid,
    .amenities-grid,
    .contact-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Reduce padding */
    .service-feature {
        padding: var(--space-6) 0;
    }
    
    .intro,
    .featured-services,
    .casino-experience,
    .rooms-showcase,
    .testimonials,
    .about-intro,
    .timeline,
    .team-section,
    .values,
    .stats-section,
    .services-intro,
    .additional-services,
    .membership,
    .casino-intro,
    .gaming-options,
    .amenities,
    .rewards-program,
    .responsible-gaming-section,
    .contact-intro,
    .contact-options,
    .contact-form-section,
    .faq-section {
        padding: var(--space-6) 0;
    }
    
    /* Adjust hero text */
    .hero-content h2 {
        font-size: var(--text-4xl);
    }
    
    .hero-content p {
        font-size: var(--text-lg);
    }
}

/* Extra large screens (1025px - 1280px) */
@media (min-width: 1025px) and (max-width: 1280px) {
    .container {
        max-width: 1024px;
    }
    
    /* Slightly reduce section padding */
    .section-title {
        margin-bottom: var(--space-5);
    }
    
    .intro,
    .featured-services,
    .casino-experience,
    .rooms-showcase,
    .testimonials,
    .about-intro,
    .timeline,
    .team-section,
    .values,
    .stats-section,
    .services-intro,
    .additional-services,
    .membership,
    .casino-intro,
    .gaming-options,
    .amenities,
    .rewards-program,
    .responsible-gaming-section,
    .contact-intro,
    .contact-options,
    .contact-form-section,
    .faq-section {
        padding: var(--space-8) 0;
    }
}

/* Mobile navigation overlay */
@media (max-width: 768px) {
    .menu-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 99;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }
    
    .menu-overlay.active {
        opacity: 1;
        visibility: visible;
    }
    
    /* Add blur effect when menu is open */
    body.menu-open {
        overflow: hidden;
    }
    
    body.menu-open main,
    body.menu-open footer {
        filter: blur(5px);
        transition: filter 0.3s ease;
    }
}

/* Responsive Fixes for Specific Sections */

/* Hero section on mobile */
@media (max-width: 768px) {
    .hero {
        height: 90vh;
    }
    
    .hero-content {
        padding: 0 var(--space-2);
    }
}

/* Services cards on mobile */
@media (max-width: 480px) {
    .services-grid {
        gap: var(--space-3);
    }
    
    .service-card {
        padding: var(--space-3);
    }
}

/* Rooms slider on mobile */
@media (max-width: 768px) {
    .rooms-slider {
        height: 300px;
    }
}

/* Timeline on mobile */
@media (max-width: 768px) {
    .timeline-item {
        margin-bottom: var(--space-4);
    }
    
    .timeline-content {
        padding: var(--space-2);
    }
}

/* Team members on mobile */
@media (max-width: 480px) {
    .team-member {
        max-width: 280px;
        margin: 0 auto;
    }
    
    .member-image {
        height: 250px;
    }
}

/* Stats on mobile */
@media (max-width: 768px) {
    .stat-item {
        margin-bottom: var(--space-3);
    }
    
    .stat-number {
        font-size: var(--text-4xl);
    }
}

/* Service features on mobile */
@media (max-width: 768px) {
    .service-image {
        min-height: 250px;
        margin-bottom: var(--space-3);
    }
    
    .service-detail {
        padding: var(--space-2);
    }
}

/* Casino sections on mobile */
@media (max-width: 768px) {
    .game-category {
        margin-bottom: var(--space-4);
    }
    
    .category-content {
        padding: var(--space-3);
    }
    
    .event-calendar {
        margin-top: var(--space-3);
    }
    
    .event-date {
        width: 70px;
        padding: var(--space-1);
    }
    
    .event-details {
        padding: var(--space-1) var(--space-2);
    }
    
    .event-details h4 {
        font-size: var(--text-base);
    }
}

/* Contact form on mobile */
@media (max-width: 768px) {
    .contact-form {
        padding: var(--space-3);
    }
    
    .address-card {
        padding: var(--space-3);
    }
    
    .map-container {
        height: 250px;
    }
}

/* Footer on mobile */
@media (max-width: 768px) {
    footer {
        padding: var(--space-5) 0 var(--space-3);
    }
    
    .footer-grid {
        gap: var(--space-3);
    }
    
    .footer-column {
        margin-bottom: var(--space-3);
    }
}

/* Form elements on small screens */
@media (max-width: 480px) {
    .form-group input[type="text"],
    .form-group input[type="email"],
    .form-group input[type="tel"],
    .form-group select,
    .form-group textarea {
        padding: var(--space-1) var(--space-2);
    }
    
    .checkbox-group {
        align-items: flex-start;
    }
    
    .checkbox-group input {
        margin-top: 5px;
    }
}

/* FAQ items on mobile */
@media (max-width: 768px) {
    .faq-item {
        margin-bottom: var(--space-2);
    }
    
    .faq-question {
        padding: var(--space-2);
    }
    
    .faq-answer {
        padding: 0 var(--space-2) var(--space-2);
    }
}

/* Membership & rewards tiers on tablet */
@media (min-width: 481px) and (max-width: 768px) {
    .membership-tiers,
    .rewards-tiers {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Adjustments for print */
@media print {
    body {
        color: #000;
        background: #fff;
    }
    
    .hero,
    .cta-section,
    .page-banner,
    .footer,
    #main-header,
    .contact-form-section,
    video,
    audio {
        display: none;
    }
    
    .container {
        max-width: 100%;
        padding: 0;
        margin: 0;
    }
    
    a {
        color: #000;
        text-decoration: underline;
    }
    
    .glass-card,
    .service-card,
    .testimonial-card,
    .team-member,
    .game-category,
    .amenity-card,
    .contact-card {
        box-shadow: none;
        border: 1px solid #ccc;
    }
}

/* High-DPI Screens */
@media
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
    /* Optimize images for high-DPI displays */
    .hero::before,
    .page-banner::before,
    .service-image,
    .category-image,
    .room-slide,
    .member-image {
        background-size: cover;
    }
}

/* Dark mode preferences */
@media (prefers-color-scheme: dark) {
    .page-transition {
        background-color: var(--neutral-900);
    }
}

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

/* Fix footer display on short content pages */
@media (min-height: 100vh) {
    .min-height-container {
        min-height: calc(100vh - 400px); /* Adjust based on footer height */
    }
}

/* Landscape orientation fixes for mobile */
@media (max-width: 768px) and (orientation: landscape) {
    .hero {
        height: auto;
        min-height: 100vh;
    }
    
    .main-menu {
        padding: var(--space-3) 0;
    }
    
    .main-menu li {
        margin: var(--space-1) 0;
    }
}

/* Ultra-wide screens */
@media (min-width: 1921px) {
    .container {
        max-width: 1600px;
    }
    
    .hero::before,
    .parallax-section::before,
    .page-banner::before {
        background-size: cover;
    }
}

/* Safari-specific fixes */
@supports (-webkit-touch-callout: none) {
    .parallax-section {
        background-attachment: scroll;
    }
}

/* Edge-specific fixes */
@supports (-ms-ime-align: auto) {
    .glass-card {
        backdrop-filter: none;
        background-color: rgba(241, 250, 251, 0.9);
    }
}