/* =================== ENHANCED RESPONSIVE DESIGN =================== */
/* File ini menambahkan perbaikan responsive untuk semua device */

/* Large Desktop (1440px+) */
@media (min-width: 1440px) {
    .container {
        max-width: 1600px;
        padding: 80px 3rem;
    }

    .hero-content h1 {
        font-size: 4rem;
    }

    .section-header h2 {
        font-size: 2.5rem;
    }
}

/* Perbaikan untuk Tablet Landscape */
@media (max-width: 1024px) {
    .search-input-group {
        flex: 1 1 calc(50% - 12px);
        min-width: 200px;
    }

    .search-input-group.full {
        flex: 1 1 100%;
    }

    .featured-wisata-grid,
    .cities-carousel {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }
}

/* Perbaikan untuk Mobile Large (640px) */
@media (max-width: 640px) {
    .container {
        padding: 35px 1.25rem;
    }

    .hero-section {
        height: 70vh;
        min-height: 480px;
    }

    .hero-content h1 {
        font-size: 2.2rem;
    }

    .section-header h2 {
        font-size: 1.6rem;
    }

    .wisata-featured-card .image-wrapper {
        height: 220px;
    }

    .wisata-featured-card .card-content {
        padding: 18px;
    }

    .wisata-featured-card h3 {
        font-size: 1.15rem;
    }

    .city-card {
        height: 260px;
    }

    .cities-carousel {
        grid-template-columns: 1fr;
    }
}

/* Perbaikan untuk Mobile Medium (480px) */
@media (max-width: 480px) {
    .booking-tab {
        flex: 1 1 calc(50% - 8px);
        justify-content: center;
        padding: 12px 16px;
    }

    .wisata-featured-card .image-wrapper {
        height: 200px;
    }

    .blog-item {
        grid-template-columns: 100px 1fr;
        gap: 14px;
    }

    .blog-item img {
        width: 100px;
        height: 85px;
    }
}

/* Perbaikan untuk Mobile Small (375px) */
@media (max-width: 375px) {
    .hero-content h1 {
        font-size: 1.8rem;
    }

    .section-header h2 {
        font-size: 1.4rem;
    }

    .wisata-featured-card h3 {
        font-size: 1.05rem;
    }

    .city-card h3 {
        font-size: 1.2rem;
    }

    .blog-featured h3 {
        font-size: 1.3rem;
    }
}

/* Landscape Mode untuk Mobile */
@media (max-height: 500px) and (orientation: landscape) {
    .hero-section {
        height: 100vh;
        min-height: auto;
    }

    .hero-content h1 {
        font-size: 2rem;
    }

    .hero-content>p {
        font-size: 1rem;
        margin: 10px 0 20px 0;
    }

    .search-bar-wrapper {
        margin-top: 15px;
    }

    .search-favorite-provinsi {
        margin-bottom: 10px;
    }
}

/* Perbaikan Grid untuk menghindari overflow */
@media (max-width: 768px) {

    .featured-wisata-grid,
    .cities-carousel {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .blog-content {
        grid-template-columns: 1fr;
        gap: 25px;
    }
}

/* Perbaikan untuk device sangat kecil */
@media (max-width: 320px) {
    .container {
        padding: 25px 0.75rem;
    }

    .favorite-provinsi-btn {
        padding: 7px 10px;
        font-size: 9px;
        min-width: 80px;
    }

    .wisata-featured-card .card-content {
        padding: 14px;
    }

    .city-card {
        height: 220px;
    }

    .blog-item {
        grid-template-columns: 90px 1fr;
        gap: 12px;
    }

    .blog-item img {
        width: 90px;
        height: 75px;
    }
}

/* Print Styles */
@media print {

    .hero-section,
    .booking-section,
    .search-bar-wrapper,
    .search-favorite-provinsi,
    .view-all-btn,
    .btn-search,
    .btn-whatsapp {
        display: none !important;
    }

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

    .wisata-featured-card,
    .city-card,
    .blog-item {
        page-break-inside: avoid;
    }
}

/* Perbaikan untuk mencegah horizontal scroll */
* {
    max-width: 100%;
}

img {
    max-width: 100%;
    height: auto;
}

.container,
.search-bar-wrapper,
.booking-container {
    overflow-x: hidden;
}

/* Smooth scrolling untuk semua device */
html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    overflow-x: hidden;
    width: 100%;
}