/* =====================================================
   RESPONSIVE — Tablet (≤ 1024px)
   ===================================================== */
@media screen and (max-width: 1024px) {
    .hero h1        { font-size: 2.6rem; }
    .hero p         { font-size: 1.05rem; }

    .footer-content {
        grid-template-columns: 1fr 1fr;
        gap: 3rem;
    }

    .footer-brand {
        grid-column: 1 / -1;
    }

    .contact-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .attraction-grid,
    .about-grid,
    .gallery-grid,
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}

/* =====================================================
   RESPONSIVE — Tablet / Mobile (≤ 768px)
   ===================================================== */
@media screen and (max-width: 768px) {
    /* Nav */
    header {
        background: rgba(10, 30, 18, 0.99);
    }

    .main-nav {
        flex-wrap: wrap;
        padding: 0.75rem 1rem;
        gap: 0;
    }

    .logo {
        flex: 1;
    }

    .mobile-menu-btn {
        display: block !important;
        z-index: 10;
    }

    .nav-links {
        display: none;
        flex-direction: column;
        width: 100%;
        background: rgba(10, 30, 18, 0.98);
        border-top: 1px solid var(--glass-border);
        padding: 0.5rem 0 1rem;
        margin-top: 0.5rem;
        border-radius: 0 0 12px 12px;
        gap: 0;
    }

    .nav-links.active {
        display: flex;
    }

    .nav-links li {
        width: 100%;
    }

    .nav-links a {
        display: block;
        padding: 0.75rem 1.2rem;
        font-size: 1rem;
        border-radius: 0;
        color: var(--text-light);
        border-bottom: 1px solid rgba(255,255,255,0.05);
    }

    .nav-links a[aria-current="page"]::after {
        display: none;
    }

    .nav-links a:hover,
    .nav-links a[aria-current="page"] {
        background: rgba(201, 168, 76, 0.1);
        color: var(--gold);
        padding-left: 1.8rem;
    }

    /* Hero */
    .hero {
        background-attachment: scroll;
        min-height: 100svh;
    }

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

    .hero-scroll { display: none; }

    /* Sections */
    .newsletter-form {
        flex-direction: column;
        gap: 0.8rem;
    }

    .newsletter-form input,
    .newsletter-form button {
        width: 100%;
        border-radius: 10px;
    }

    /* Grids */
    .gallery-grid,
    .about-grid,
    .attraction-grid,
    .stats-grid {
        grid-template-columns: 1fr;
    }

    /* Footer */
    .footer-content {
        grid-template-columns: 1fr;
        gap: 2.5rem;
        text-align: center;
    }

    .footer-brand {
        grid-column: 1;
    }

    .footer-brand .footer-logo {
        justify-content: center;
    }

    .footer-brand > p {
        max-width: 100%;
    }

    .footer-links ul {
        align-items: center;
    }

    .social-links {
        justify-content: center;
    }

    /* Why Visit */
    .features-grid {
        grid-template-columns: 1fr;
    }

    /* Video */
    .video-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    /* Back to top */
    .back-to-top {
        bottom: 1.2rem;
        right: 1.2rem;
        width: 42px;
        height: 42px;
    }

    /* Contact */
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .contact-info,
    .contact-form {
        padding: 2rem;
    }

    /* Page banners */
    .attractions-header,
    .gallery-header,
    .contact-header,
    .about-header {
        min-height: 42vh;
        padding: 7rem 1.5rem 4rem;
    }

    /* Tables */
    .table-container {
        border-radius: 8px;
    }
}

/* =====================================================
   RESPONSIVE — Mobile (≤ 480px)
   ===================================================== */
@media screen and (max-width: 480px) {
    .hero h1 { font-size: 1.7rem; }
    .hero p  { font-size: 0.92rem; }

    .cta-button {
        padding: 0.9rem 2rem;
        font-size: 0.82rem;
    }

    .attraction-grid,
    .gallery-grid,
    .about-grid,
    .stats-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .contact-info,
    .contact-form {
        padding: 1.4rem;
    }

    .footer-content {
        gap: 2rem;
    }

    .links-grid {
        flex-direction: column;
        align-items: center;
    }

    .external-link {
        width: 100%;
        max-width: 300px;
        justify-content: center;
    }

    caption {
        font-size: 1.3rem;
        padding: 1.4rem 1.2rem 1rem;
    }

    th, td {
        padding: 0.8rem 1rem;
        font-size: 0.85rem;
    }

    .map-embed iframe {
        height: 300px;
    }
}

/* =====================================================
   RESPONSIVE — Tables scrollable on small screens
   ===================================================== */
@media screen and (max-width: 768px) {
    .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    table th,
    table td {
        min-width: 110px;
        white-space: nowrap;
    }

    caption {
        white-space: normal;
    }
}