/* ========================================
   CABANILLAS RENTALS - RESPONSIVE STYLES
   ======================================== */



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

/* Burger menu hidden on desktop */
@media (min-width: 993px) {
    .burger-menu {
        display: none;
    }
}

@media (max-width: 992px) {

    /* Header & Nav Tablet/Mobile */
    .burger-menu {
        display: block;
        cursor: pointer;
        z-index: 1001;
        position: relative;
    }

    .burger-menu span {
        display: block;
        width: 25px;
        height: 3px;
        background: #fff;
        margin: 5px 0;
        transition: all 0.3s ease;
    }

    /* Header Scrolled - Burger Color */
    header.scrolled .burger-menu span {
        background: var(--color-primary);
    }

    /* Nav Overlay */
    .nav-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        /* Dimmed background */
        z-index: 999;
        visibility: hidden;
        opacity: 0;
        transition: all 0.3s ease;
    }

    .nav-overlay.active {
        visibility: visible;
        opacity: 1;
    }

    header nav {
        position: fixed;
        top: 0;
        right: -100%;
        right: -100%;
        width: 40%;
        /* 40% Width */
        min-width: 250px;
        height: 100vh;
        background: rgba(53, 110, 128, 0.98);
        z-index: 1000;
        transition: right 0.4s ease;
        display: flex;
        justify-content: center;
        align-items: center;
        box-shadow: -5px 0 15px rgba(0, 0, 0, 0.2);
    }

    header nav.active {
        right: 0;
    }

    header nav ul {
        flex-direction: column;
        gap: 2rem;
        text-align: center;
        width: 100%;
    }

    header nav a {
        font-size: 1rem;
        text-decoration: none !important;
        /* No visual effects */
        border-bottom: none !important;
        position: relative;
    }

    header nav a::after {
        display: none !important;
        /* Remove underline effect */
    }

    header nav a:hover {
        color: var(--color-secondary);
        /* Simple hover color */
    }

    /* External Btn specific style in mobile */
    header nav a.nav-btn-external {
        color: var(--color-secondary) !important;
        border: none !important;
        padding: 0;
        box-shadow: none !important;
    }

    /* Burger Animation */
    .burger-menu.active span:nth-child(1) {
        transform: rotate(-45deg) translate(-5px, 6px);
    }

    .burger-menu.active span:nth-child(2) {
        opacity: 0;
    }

    .burger-menu.active span:nth-child(3) {
        transform: rotate(45deg) translate(-5px, -6px);
    }

    /* Body lock */
    body.menu-open {
        overflow: hidden;
    }

    html.menu-open {
        overflow: hidden;
        /* Ensure HTML is also locked if needed */
    }

    /* Ensure Logo Proportion 0.47 */
    header .logo img {
        height: 60px;
        width: auto;
        max-width: none;
    }

    .property-grid {
        display: grid;
        width: 100%;
        gap: 1.5rem;
        /* Default for Tablet (below 992px but above 576px) */
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .property-card {
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
    }

    /* Mobile specific overrides */
    @media (max-width: 576px) {
        .property-grid {
            grid-template-columns: 1fr;
            gap: 2rem;
        }

        .property-card {
            max-width: 100%;
            /* Ensure full width but no overflow */
            width: 100%;
        }
    }

    .featured-properties {
        background-color: #E8B47E;
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    .hotspots-layout {
        flex-direction: column;
        background-color: transparent;
        padding: 0;
        margin-bottom: 2rem;
        border-radius: 0;
    }

    .hotspots-left,
    .hotspots-right {
        width: 100%;
    }

    .hotspots-bg-block {
        display: none;
    }

    .hotspots-title-large {
        position: static;
        font-size: 3rem;
        margin-bottom: 1rem;
        color: #dd914a;
        text-align: left;
    }

    .hotspots-description {
        color: #ffffff;
        /* White text */
        text-align: left;
        padding: 0;
        margin: 0;
        max-width: 100%;
    }

    .hotspots-left {
        padding-bottom: 0;
        padding-top: 0;
    }

    .hotspots-left .section-title {
        color: #ffffff !important;
    }

    .hotspots-left .section-subtitle {
        color: #ffffff !important;
    }

    .hotspots-right {
        padding-top: 1rem;
    }

    .hotspots-nav {
        display: none !important;
        /* Hide nav buttons */
    }

    .property-grid-hotspots {
        padding-bottom: 2rem;
        transform: none !important;
        /* Disable JS transform */
        justify-content: flex-start;
        scroll-snap-type: x mandatory;
        /* Enable snap */
    }

    .property-card-hotspot {
        scroll-snap-align: start;
        /* Snap to start */
        flex: 0 0 auto;
        width: 85vw;
        max-width: 320px;
        /* Cap at desktop size */
    }

    /* Always Visible Overlay for Mobile/Tablet */
    .property-card-hotspot .card-overlay {
        opacity: 1 !important;
        transform: translateY(0) !important;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.3) 60%, transparent) !important;
        pointer-events: auto !important;
    }

    .property-card-hotspot .hotspot-icon {
        top: -30px;
        right: 20px;
        opacity: 1;
    }

    /* FIX CAROUSEL SCROLL ON MOBILE */
    .carousel-wrapper {
        overflow: visible;
        /* Allow sticky/snap to work better or just visible */
        overflow-x: auto;
        display: flex;
        justify-content: flex-start;
        width: 100%;
        max-width: 100vw;
        padding-bottom: 2rem;
        /* Space for scrollbar if any */
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
    }

    .property-grid-hotspots {
        width: max-content;
        /* Let it grow */
        gap: 1rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

@media (max-width: 992px) {
    .about-section {
        background: var(--color-bg-light);
        /* Fallback to solid beige on tablet/mobile */
        padding: 4rem 0;
    }

    .about-top-row {
        flex-direction: column;
        gap: 2rem;
    }

    .about-text-col,
    .about-image-col {
        width: 100%;
    }

    .about-trust-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}

@media (max-width: 1024px) {
    .hero {
        height: auto;
        padding-bottom: 0;
        min-height: 100vh;
        /* 100vh for Laptop/Tablet */
        display: flex;
        align-items: center;
    }

    .hero img {
        height: 100%;
        position: absolute;
    }

    .hero-content {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        flex-direction: column;
        padding: 8rem 2rem 4rem;
        gap: 2rem;
        width: 100%;
        justify-content: center;
    }

    .hero-text {
        text-align: center;
        max-width: 80%;
    }

    .hero-form-overlay {
        position: relative;
        right: auto;
        top: auto;
        transform: none;
        margin-top: 0;
        max-width: 300px !important;
        width: 100%;
        margin-right: 0;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* Specific Laptop/Tablet Adjustment for Hero */
/* Specific Laptop Adjustment (Desktop Mode) */
@media (min-width: 1025px) and (max-width: 1366px) {
    .hero-content {
        padding-left: 5%;
        /* Prevent text from sticking to left edge */
        padding-right: 5%;
        gap: 2rem;
    }

    .hero-text {
        max-width: 55%;
        /* Allow it to take up space but leave room for form */
    }

    .hero-form-overlay {
        padding: 1rem;
        /* Reduce padding */
        max-width: 280px;
        /* Slightly smaller width if needed */
        margin-right: 0;
    }

    .hero-form-overlay h3 {
        font-size: 1.1rem;
        margin-bottom: 0.2rem;
    }

    .hero-form-overlay p {
        font-size: 0.8rem;
        margin-bottom: 1rem;
    }

    .form-group {
        margin-bottom: 0.8rem !important;
        /* Force smaller margin */
    }

    .hero-form-overlay form input {
        padding: 0.4rem;
        /* Smaller inputs */
        font-size: 0.85rem;
    }

    .hero-form-overlay form label {
        margin-bottom: 0.1rem;
    }

    .form-check {
        font-size: 0.65rem;
        margin-top: 0.5rem;
    }
}

@media (max-width: 767px) {
    /* Hero styles moved to 1024px block */
}

@media (max-width: 768px) {
    .contact-bg-split {
        background: var(--color-bg-light);
        /* All beige on mobile */
    }

    .contact-grid {
        flex-direction: column;
        gap: 2rem;
    }

    .form-row {
        flex-direction: column;
    }

    .contact-title {
        font-size: 2.5rem;
    }

    header nav ul {
        flex-direction: column;
        gap: 1rem;
    }

    header nav a {
        font-size: 0.8rem;
    }

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

    .hero-text {
        max-width: 100%;
    }

    .hero-form-overlay {
        width: 100%;
        max-width: 300px !important;
    }



    h1 {
        font-size: 2.2rem;
    }

    h2 {
        font-size: 2rem;
    }

    .section-title {
        font-size: 2rem !important;
    }

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

    .zone-card {
        height: 350px;
        /* Reduced specific height for mobile */
    }

    .zone-card-large {
        grid-column: span 1;
        height: 350px;
        /* Same height as others on mobile */
    }

    .zone-overlay {
        padding: 1rem;
        /* Reduce padding on mobile */
    }

    .zone-content {
        max-width: 100%;
        padding: 1.5rem;
        /* Reduced padding */
        padding-top: 2rem;
        /* Reduced padding top */
    }

    .zone-content h3 {
        font-size: 1.5rem;
        /* Smaller font */
        margin-bottom: 0.5rem;
    }

    .zone-card-large .zone-content h3 {
        font-size: 1.75rem;
        /* Smaller font for large card too */
    }

    .zone-content p {
        font-size: 0.85rem;
        margin-bottom: 1rem;
        display: none;
        /* Hide description on mobile to save space if needed, or keep short */
    }

    .zone-card-large .zone-content p {
        display: none;
        /* Hide description on mobile to ensure fit */
        margin-bottom: 1rem;
    }

    .zone-content .btn-zone {
        padding: 0.5rem 1.5rem;
        font-size: 0.8rem;
    }

    .zone-content .zone-icon {
        width: 40px !important;
        height: 40px !important;
        top: -20px;
        right: 10px;
    }

    .gallery-grid {
        grid-template-columns: 1fr;
        height: auto;
    }

    .gallery-grid>div:nth-child(2) {
        display: none;
        /* Hide secondary images on mobile for now or carousel them */
    }
}

@media (max-width: 576px) {
    .about-trust-grid {
        grid-template-columns: 1fr;
    }

    .about-text-col h2 {
        font-size: 2.2rem;
    }
}

@media (max-width: 480px) {
    .section-title {
        font-size: 1.75rem !important;
    }

    h1 {
        font-size: 1.8rem;
    }

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

    /* Zone Grid Small Mobile Refinements */
    .zone-content {
        padding: 1rem;
        padding-top: 2rem;
    }

    .zone-content h3 {
        font-size: 1.3rem;
    }

    .zone-card-large .zone-content h3 {
        font-size: 1.5rem;
    }
}

@media (max-width: 425px) {
    .property-card-hotspot {
        min-width: 85vw;
        /* Make it almost full width */
        width: 85vw;
        margin-right: 1rem;
    }

    .property-grid-hotspots {
        padding-left: 1rem;
        /* Center visually with padding */
        padding-right: 1rem;
    }
}

@media (max-width: 767px) {

    /* Footer Centering */
    footer .footer-content {
        display: flex;
        flex-direction: column;
        text-align: center;
        align-items: center;
        gap: 2rem;
    }

    footer .footer-info {
        text-align: center;
        align-items: center;
        width: 100%;
    }

    footer .footer-info p {
        text-align: center;
        width: 100%;
        margin-bottom: 0.5rem;
    }

    footer .footer-social {
        display: flex;
        justify-content: center;
        width: 100%;
        margin-top: 1rem;
        gap: 1rem;
    }

    footer .footer-bottom {
        text-align: center;
        margin-top: 2rem;
    }

    footer .footer-logo {
        margin-bottom: 1rem;
        display: flex;
        justify-content: center;
        width: 100%;
    }

    footer .footer-logo img {
        margin: 0 auto;
    }
}