/* ===================================================================
   350-390 Queens Quay Private Residences - Tablet-Only Styles
   Optimized for tablet devices (769px - 1024px)
   Based on 370 Queens Quay proven tablet implementation
   =================================================================== */

@media (min-width: 769px) and (max-width: 1024px) {
    :root {
        --content-gap: 60px;
    }
    
    /* Body & Layout */
    body {
        padding-top: 90px;
    }

    .container {
        padding: 0 30px;
    }

    /* ===================
       TABLET HEADER
       =================== */
    .header-container {
        padding: 20px 30px;
        transition: all 0.3s ease;
    }

    /* Tablet Header Shrinking Effect */
    .page-header {
        transition: all 0.3s ease;
    }

    .page-header.header-shrunk .header-container {
        padding: 12px 25px;
    }

    .page-header.header-shrunk .logo-container svg {
        transform: scale(0.85);
        transition: transform 0.3s ease;
    }

    .page-header.header-shrunk .header-btn {
        padding: 10px 20px;
        font-size: 13px;
        transition: all 0.3s ease;
    }

    .page-header.header-shrunk .mobile-toggle {
        transform: scale(0.9);
        transition: transform 0.3s ease;
    }

    /* Header Button - Right aligned on tablet */
    .header-btn {
        margin-left: auto;
        display: flex !important;
    }

    /* Mobile toggle visible on tablet */
    .mobile-toggle {
        display: flex !important;
    }

    /* Hide desktop navigation on tablet */
    .primary-menu {
        display: none !important;
    }

    /* Mobile nav sidebar width for tablet */
    .mobile-nav-overlay {
        width: 400px;
        max-width: 50vw;
    }

    /* ===================
       TABLET HERO SECTION
       =================== */
    .hero-banner {
        min-height: 500px;
    }

    .hero-title {
        font-size: clamp(2.8rem, 6vw, 3.5rem);
    }

    /* ===================
       TABLET CONTENT SECTIONS
       =================== */
    .content-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .content-text {
        padding: 35px;
    }

    .section-title,
    .section-title2 {
        font-size: 2.5rem;
    }

    /* ===================
       TABLET AMENITIES
       =================== */
    .amenities-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .amenity-item,
    .amenity-card {
        padding: 35px 25px;
    }

    /* ===================
       TABLET GALLERY
       =================== */
    .gallery-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
    }

    .filter-btn {
        padding: 12px 20px;
        font-size: 14px;
    }

    /* ===================
       TABLET UNIT CARDS
       =================== */
    .unit-types-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .unit-type-card-body {
        padding: 25px 20px;
    }

    .unit-type-title {
        font-size: 26px;
    }

    /* ===================
       TABLET MODALS
       =================== */
    .tour-modal-overlay,
    .contact-modal-overlay {
        padding: 20px;
    }

    .tour-modal-content,
    .contact-modal-content {
        max-width: 90%;
        max-height: 90vh;
    }

    /* ===================
       TABLET FOOTER
       =================== */
    .footer-content {
        grid-template-columns: 1fr 1fr;
        gap: 50px;
    }

    .page-footer {
        padding: 70px 0 50px;
    }
}