/**
 * Lubinik Child Mobile Styles
 * 
 * This file contains all mobile-specific styles for the Lubinik Child theme.
 * It is loaded after all other CSS files to ensure proper overrides.
 * 
 * Breakpoint Standardization:
 * - Large desktops: 1200px and up
 * - Desktops: 992px to 1199px
 * - Tablets: 768px to 991px
 * - Mobile: 767px and below
 * - Small mobile: 480px and below
 */

/* ======================================
   Global Mobile Styles
   ====================================== */

/* Container adjustments */
@media (max-width: 991px) {
    /* Reset all percentage-based containers to full width on mobile */
    .site-footer .container,
    .site-header > .container,
    .top-bar .container {
        max-width: 100% !important;
        width: 100% !important;
    }
}

@media (max-width: 767px) {
    /* Even fuller width on very small screens */
    .site-header > .container,
    .top-bar .container {
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 10px;
        padding-right: 10px;
    }
    
    /* Special handling for footer container */
    .site-footer .container {
        max-width: 90% !important;
        width: 90% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* ======================================
   Grid System
   ====================================== */

@media (max-width: 1024px) {
    .grid-4 {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .col-lg-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
    .col-lg-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .col-lg-3 { flex: 0 0 25%; max-width: 25%; }
    .col-lg-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .col-lg-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .col-lg-6 { flex: 0 0 50%; max-width: 50%; }
    .col-lg-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .col-lg-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .col-lg-9 { flex: 0 0 75%; max-width: 75%; }
    .col-lg-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .col-lg-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .col-lg-12 { flex: 0 0 100%; max-width: 100%; }
}

@media (max-width: 767px) {
    .grid-3,
    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .col-md-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
    .col-md-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .col-md-3 { flex: 0 0 25%; max-width: 25%; }
    .col-md-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .col-md-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .col-md-6 { flex: 0 0 50%; max-width: 50%; }
    .col-md-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .col-md-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .col-md-9 { flex: 0 0 75%; max-width: 75%; }
    .col-md-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .col-md-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .col-md-12 { flex: 0 0 100%; max-width: 100%; }
}

@media (max-width: 480px) {
    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
    }
    
    .col-sm-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
    .col-sm-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .col-sm-3 { flex: 0 0 25%; max-width: 25%; }
    .col-sm-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .col-sm-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .col-sm-6 { flex: 0 0 50%; max-width: 50%; }
    .col-sm-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .col-sm-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .col-sm-9 { flex: 0 0 75%; max-width: 75%; }
    .col-sm-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .col-sm-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .col-sm-12 { flex: 0 0 100%; max-width: 100%; }
}

/* ======================================
   Header Components
   ====================================== */

/* Top Bar */
@media (max-width: 991px) {
    .top-bar-content {
        justify-content: center;
    }
    
    .top-social-links {
        width: 100%;
        display: flex;
        justify-content: end;
    }
    
    .site-header > .container {
        flex-wrap: wrap;
    }
    
    .site-branding {
        margin-bottom: 10px;
    }
}

/* ======================================
   Navigation
   ====================================== */

   @media (max-width: 1299px) {
    .menu-toggle {
        display: block;
    }
    
    .main-navigation ul {
        display: none;
        flex-direction: column;
        width: 100%;
        position: absolute;
        top: 100%;
        left: 0;
        background-color: var(--lubinik-primary-color);
        box-shadow: 0 5px 10px var(--lubinik-shadow-color-light);
        z-index: 100;
    }
    
    .main-navigation.toggled ul {
        display: flex !important;
    }
    
    .main-navigation li {
        margin: 0;
        border-bottom: 1px solid var(--lubinik-shadow-color-subtle);
    }
    
    .main-navigation a {
        padding: 15px;
    }
    
    .main-navigation a:after {
        display: none;
    }
}

/* ======================================
   Footer Components
   ====================================== */

@media (max-width: 991px) {
    .footer-branding,
    .footer-menu,
    .footer-contact {
        flex: 0 0 48%;
        margin-bottom: var(--lubinik-spacing-lg);
    }
    
    .footer-contact {
        flex: 0 0 100%;
    }
}

@media (max-width: 767px) {
    .footer-branding,
    .footer-menu,
    .footer-contact {
        flex: 0 0 100%;
        padding: 0;
        margin-bottom: var(--lubinik-spacing-lg);
        text-align: left;
    }
    
    .footer-content {
        flex-direction: column;
        align-items: flex-start;
    }

    .footer-menu ul {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .footer-contact .contact-info {
        justify-content: flex-start;
    }
}



/* ======================================
   Gallery Components
   ====================================== */

@media (max-width: 991px) {
    .masonry-gallery {
        column-count: 2;
    }
}

@media (max-width: 767px) {
    .gallery-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
    
    .masonry-gallery {
        column-count: 1;
    }
}

/* ======================================
   Features Components
   ====================================== */

@media (max-width: 991px) {
    .features-grid {
        gap: var(--lubinik-spacing-sm);
    }
    
    .feature-item {
        flex: 0 0 calc(50% - var(--lubinik-spacing-sm));
    }
}

@media (max-width: 767px) {
    .feature-item {
        flex: 0 0 100%;
    }
}

/* ======================================
   Hero Components
   ====================================== */

@media (max-width: 767px) {
    .hero-title {
        font-size: var(--lubinik-font-size-xl);
    }
    
    .hero-description {
        font-size: var(--lubinik-font-size-md);
    }
}

/* ======================================
   Section Components
   ====================================== */

@media (max-width: 767px) {
    .section {
        padding: 0;
    }
    
    .section-title {
        font-size: var(--lubinik-font-size-lg);
    }
}

/* ======================================
   Cards Components
   ====================================== */

@media (max-width: 767px) {
    .attractions-grid,
    .food-grid,
    .rooms-grid {
        grid-template-columns: 1fr;
    }
}

/* ======================================
   Button Components
   ====================================== */

@media (max-width: 767px) {
    .btn-group {
        flex-direction: column;
    }
    
    .btn-lg,
    .hero-button {
        padding: var(--lubinik-spacing-sm) var(--lubinik-spacing-md);
        font-size: var(--lubinik-font-size-base);
    }
}

/* ======================================
   Room Features Components
   ====================================== */

@media (max-width: 767px) {
    .room-features ul {
        grid-template-columns: 1fr;
    }
    
    .amenities-list {
        justify-content: center;
    }
}

/* ======================================
   Map Components
   ====================================== */

@media (max-width: 767px) {
    .map-container {
        height: 300px;
    }
}

/* ======================================
   Slider Components
   ====================================== */

@media (max-width: 767px) {
    .default-slider {
        height: 400px;
    }
    
    .slide-content h2 {
        font-size: 24px;
    }
    
    .slide-content p {
        font-size: 16px;
    }
}

/* ======================================
   Rooms Page
   ====================================== */



/* ======================================
   Services Page
   ====================================== */

@media (max-width: 767px) {
    .services-grid,
    .amenities-list,
    .policies-list {
        grid-template-columns: 1fr;
    }
}

/* ======================================
   Contact Page
   ====================================== */

@media (max-width: 767px) {
    .contact-content {
        flex: 0 0 100%;
        margin-bottom: var(--lubinik-spacing-lg);
    }
    
    .contact-map {
        flex: 0 0 100%;
    }
}