/* FILE: assets/css/responsive.css (Revised) */

@media (max-width: 1200px) {
    .main-wrapper { 
        grid-template-columns: 1fr; 
    }
    .sidebar, .controls-section { 
        position: static; 
        height: auto; 
        max-height: 40vh; 
    }
    .details-right-column { 
        height: auto; 
        overflow-y: visible; 
    }
}

/* MODIFIED: Breakpoint now starts at 992px for tablets */
@media (max-width: 992px) {
    /* Hide desktop menus */
    .country-tabs,
    .nav-items {
        display: none;
    }

    /* Show hamburger button */
    #hamburger-menu-btn {
        display: block;
    }

    /* Adjust header grid for a simpler layout */
    .header-content {
        grid-template-columns: auto 1fr;
    }
    .logo {
        justify-self: center;
        margin-left: -40px; /* Offset to better center the logo */
    }

    .main-wrapper {
        padding: 0 10px;
        margin-top: 10px;
    }

    .details-content { 
        grid-template-columns: 1fr; 
    } 

    .blog-post-layout {
        grid-template-columns: 1fr;
    }
    .promo-sidebar {
        position: static;
        margin-top: 2rem;
    }
}


@media (max-width: 768px) {
    .filters-bar {
        flex-direction: column;
        align-items: stretch;
    }
    .filter-dropdown { width: 100%; }
    .filter-btn { justify-content: space-between; }

    .blog-posts-container {
        grid-template-columns: 1fr;
    }
    .blog-header h1 { font-size: 2rem; }
    .blog-post-full h1 { font-size: 1.8rem; }

    .details-page-container {
        flex-direction: column;
        height: auto;
        padding: 0;
        gap: 10px;
        margin: 10px;
        overflow-y: auto; /* Corrected to allow scrolling */
    }
    .details-sidebar,
    .details-main-area {
        width: 100%;
        height: auto;
    }
    .photo-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .highlight-grid {
        grid-template-columns: 1fr;
    }
    .admin-container {
        padding: 1rem;
    }
}

@media (max-width: 480px) {
    .logo {
        font-size: 18px;
    }
    .destination-tile {
        flex-direction: column;
        align-items: flex-start;
        padding: 1rem;
    }
    .tile-image {
        width: 100%;
        height: 150px;
        margin-right: 0;
        margin-bottom: 1rem;
    }
}