/* ========================================
   MOBILE-ONLY STYLES - Complements Desktop
   ======================================== */

/* This file ONLY applies to mobile devices and leaves desktop untouched */

/* ========================================
   MOBILE & DESKTOP: Logo Sizing Fix
   ======================================== */

/* Mobile Navigation Logo */
@media (max-width: 767px) {
    .mobile-logo {
        height: 50px !important;
        width: auto !important;
    }
    
    .mobile-nav-container {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 0.75rem 1rem !important;
    }
}

/* Desktop Navigation Logo */
@media (min-width: 768px) {
    nav img[alt="ENTROTERRA"] {
        height: 100px !important;
        width: auto !important;
    }
}

/* ========================================
   MOBILE: Property Detail Page
   ======================================== */

@media (max-width: 767px) {
    /* Property Page Container */
    .property-page {
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* Property Header */
    .property-header {
        padding: 1rem !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.75rem !important;
    }
    
    .property-header h1 {
        font-size: 1.75rem !important;
        line-height: 1.2 !important;
    }
    
    /* Photo Gallery - Stack Vertically */
    .photo-gallery-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.5rem !important;
        height: auto !important;
        grid-template-columns: none !important;
    }
    
    .photo-gallery-grid > div {
        width: 100% !important;
        height: 240px !important;
        grid-column: auto !important;
        grid-row: auto !important;
    }
    
    .photo-gallery-grid > div:first-child {
        height: 280px !important;
    }
    
    .photo-gallery-grid img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    /* Property Content */
    .property-content {
        padding: 1.25rem !important;
    }
    
    /* Bed Configuration */
    .bed-configuration {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
        padding: 1rem 0 !important;
        margin-left: -1.25rem !important;
        margin-right: -1.25rem !important;
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
    }
    
    .bed-item {
        padding: 0.75rem !important;
    }
    
    .bed-icon {
        font-size: 1.1rem !important;
    }
    
    .bed-room {
        font-size: 0.8rem !important;
    }
    
    .bed-type {
        font-size: 0.75rem !important;
    }
    
    /* Amenities Section */
    .amenities-section {
        padding: 1.5rem 1.25rem !important;
    }
    
    .amenities-section h3 {
        font-size: 1.5rem !important;
        margin-bottom: 1rem !important;
    }
    
    .amenities-grid {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
    }
    
    .amenity-item {
        padding: 1rem !important;
        font-size: 0.95rem !important;
    }
    
    .amenity-item i {
        font-size: 1.1rem !important;
        width: 32px !important;
    }
    
    /* Booking Section */
    .booking-section {
        padding: 1.25rem !important;
        margin: 0 !important;
    }
    
    /* Booking Calendar */
    .booking-calendar {
        width: 100% !important;
        max-width: 100% !important;
        padding: 1.25rem !important;
        margin: 0 !important;
    }
    
    .calendar-header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        margin-bottom: 1rem !important;
    }
    
    .calendar-header h3 {
        font-size: 1.35rem !important;
        margin: 0 !important;
    }
    
    .calendar-nav {
        display: flex !important;
        gap: 0.5rem !important;
    }
    
    .calendar-nav button {
        width: 44px !important;
        height: 44px !important;
        font-size: 1.25rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* Calendar Grid */
    .weekdays {
        display: grid !important;
        grid-template-columns: repeat(7, 1fr) !important;
        gap: 0.25rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    .weekday {
        font-size: 0.8rem !important;
        padding: 0.5rem 0.25rem !important;
        text-align: center !important;
    }
    
    .days-grid {
        display: grid !important;
        grid-template-columns: repeat(7, 1fr) !important;
        gap: 0.25rem !important;
    }
    
    .day {
        font-size: 0.9rem !important;
        padding: 0.6rem 0.25rem !important;
        min-height: 48px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* Date Selection */
    .date-select-group {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.75rem !important;
        margin-bottom: 1rem !important;
    }
    
    .date-select {
        width: 100% !important;
    }
    
    .date-select label {
        font-size: 0.85rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    .date-select input {
        width: 100% !important;
        padding: 0.75rem !important;
        font-size: 1rem !important;
    }
    
    /* Guest Selector */
    .guest-selector {
        padding: 1rem !important;
        margin-bottom: 1rem !important;
    }
    
    .guest-selector label {
        font-size: 0.95rem !important;
    }
    
    .guest-controls {
        display: flex !important;
        align-items: center !important;
        gap: 1rem !important;
    }
    
    .guest-controls button {
        width: 44px !important;
        height: 44px !important;
        font-size: 1.25rem !important;
    }
    
    .guest-count {
        font-size: 1.25rem !important;
        min-width: 40px !important;
    }
    
    /* Booking Summary - Stack Below Calendar */
    .booking-summary {
        position: relative !important;
        width: 100% !important;
        margin-top: 1.5rem !important;
        padding: 1.25rem !important;
        box-shadow: 0 2px 12px rgba(0,0,0,0.1) !important;
    }
    
    .booking-summary h4 {
        font-size: 1.25rem !important;
        margin-bottom: 1rem !important;
    }
    
    .price-breakdown {
        font-size: 0.95rem !important;
    }
    
    .summary-row {
        font-size: 0.9rem !important;
        padding: 0.75rem 0 !important;
    }
    
    .total-row {
        font-size: 1.15rem !important;
        padding: 1rem 0 0.5rem !important;
    }
    
    .btn-book-now {
        width: 100% !important;
        padding: 1rem !important;
        font-size: 1.05rem !important;
    }
    
    /* Contact Buttons */
    .contact-buttons {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.75rem !important;
        padding: 1.25rem !important;
        margin-top: 1rem !important;
    }
    
    .contact-buttons a,
    .contact-buttons button {
        width: 100% !important;
        padding: 1rem 1.5rem !important;
        font-size: 1rem !important;
        text-align: center !important;
        justify-content: center !important;
        display: flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
    }
    
    .contact-buttons i {
        font-size: 1.1rem !important;
    }
}

/* ========================================
   MOBILE: Mobile Menu Fix - Prevent Cutoff
   ======================================== */

@media (max-width: 767px) {
    .mobile-menu {
        max-height: calc(100vh - 100px) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
}

/* ========================================
   MOBILE: Hero Section - More Transparent
   ======================================== */

@media (max-width: 767px) {
    /* HOMEPAGE HERO - Better proportions - MAXIMUM SPECIFICITY */
    body section.hero-section[style*="margin-top"],
    section.hero-section[style*="margin-top"],
    section.hero-section[style],
    body section.hero-section,
    section.hero-section,
    .hero-section {
        height: 70vh !important;
        margin: 0 !important;
        margin-top: 80px !important; /* Account for fixed mobile nav */
        min-height: 500px !important;
        max-height: 600px !important;
        padding-top: 0 !important;
        position: relative !important;
    }
    
    /* Ensure video fills properly */
    .hero-video {
        object-fit: cover !important;
    }
    
    /* Make overlay darker for better text readability */
    .hero-overlay {
        background: linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.45)) !important;
    }
    
    .hero-content {
        padding: 2rem 1.5rem !important;
        max-width: 90% !important;
    }
    
    /* PREMIUM TYPOGRAPHY - Better proportions for mobile - MAXIMUM SPECIFICITY */
    body .hero-section .hero-title,
    section.hero-section .hero-title,
    .hero-section .hero-title,
    .hero-title {
        font-size: 2.5rem !important; /* Good size for mobile */
        margin-bottom: 1rem !important;
        text-shadow: 0 4px 24px rgba(0,0,0,0.85) !important;
        letter-spacing: -0.01em !important;
        line-height: 1.15 !important;
        font-weight: 600 !important;
    }
    
    /* Hero content paragraph - all except first */
    body .hero-section .hero-content p:not(:first-of-type),
    section.hero-section .hero-content p:not(:first-of-type),
    .hero-section .hero-content p:not(:first-of-type),
    .hero-content p[style] {
        font-size: 0.95rem !important; /* 15.2px - readable */
        margin-bottom: 1.5rem !important;
        text-shadow: 0 3px 16px rgba(0,0,0,0.75) !important;
        line-height: 1.6 !important;
        font-weight: 500 !important;
        max-width: 85% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding: 0 1rem !important;
    }
    
    /* Location text above title - MAXIMUM SPECIFICITY */
    body .hero-section .hero-content p:first-of-type,
    section.hero-section .hero-content p:first-of-type,
    .hero-section .hero-content p:first-of-type {
        font-size: 0.75rem !important; /* 12px for location */
        letter-spacing: 0.2em !important;
        margin-bottom: 0.75rem !important;
        font-weight: 700 !important;
        opacity: 1 !important;
        text-transform: uppercase !important;
        padding: 0 !important;
        max-width: 100% !important;
    }
    
    /* PREMIUM BUTTON - MAXIMUM SPECIFICITY */
    body .hero-section .hero-content .btn-primary,
    section.hero-section .hero-content .btn-primary,
    .hero-section .hero-content a.btn-primary,
    .hero-content .btn-primary[style],
    a.btn-primary[style] {
        padding: 0.875rem 2rem !important;
        font-size: 0.95rem !important; /* 15.2px - readable */
        font-weight: 600 !important;
        line-height: 1.3 !important;
        min-height: 48px !important;
        border-radius: 8px !important;
        letter-spacing: 0.02em !important;
        box-shadow: 0 4px 16px rgba(107,159,92,0.35) !important;
        max-width: 260px !important;
        width: auto !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-transform: none !important;
        white-space: nowrap !important;
    }
    
    /* REVIEW BADGES - Better spacing and breathing room */
    section div[style*="grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))"] {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
        padding: 0 1rem !important;
    }
    
    section div[style*="padding: 1.75rem"] {
        padding: 1.5rem !important;
        margin: 0 !important;
        line-height: 1.6 !important;
    }
    
    section div[style*="padding: 1.75rem"] span {
        line-height: 1.7 !important;
        margin-top: 0.5rem !important;
        display: block !important;
    }
    
    section div[style*="font-size: 2.5rem"] {
        font-size: 1.75rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    section div[style*="font-weight: 600"] {
        font-size: 0.875rem !important;
    }
}

/* ========================================
   MOBILE: Experiences Page (Marketplace)
   ======================================== */

@media (max-width: 767px) {
    /* Hero Section - VERY Compact on Experiences Page - HIGHEST PRIORITY */
    body .hero-section,
    .hero-section.text-center {
        padding: 0.75rem 1rem 0.5rem 1rem !important;
        margin-bottom: 0.75rem !important;
        min-height: auto !important;
        height: auto !important;
    }
    
    body .hero-section h1,
    .hero-section.text-center h1 {
        font-size: 1.65rem !important;
        margin-bottom: 0.5rem !important;
        line-height: 1.3 !important;
        padding: 0 !important;
    }
    
    body .hero-section h1 i,
    .hero-section.text-center h1 i {
        font-size: 1.4rem !important;
    }
    
    body .hero-section p,
    .hero-section.text-center p {
        font-size: 0.85rem !important;
        padding: 0 0.5rem !important;
        line-height: 1.4 !important;
        margin-bottom: 0 !important;
        max-width: 100% !important;
    }
    
    /* Filter section spacing */
    body .flex.flex-wrap.justify-center {
        margin-top: 0.75rem !important;
        margin-bottom: 0.75rem !important;
        padding: 0 0.5rem !important;
    }
    
    /* Filter Buttons - Wrap Better */
    .filter-btn {
        font-size: 0.8rem !important;
        padding: 0.5rem 1rem !important;
    }
    
    /* Experience Grid - SINGLE COLUMN on Mobile - Touch-Friendly Spacing */
    #experiences-grid {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }
    
    /* Experience Card Images - Consistent mobile sizing */
    .experience-image {
        height: 200px !important;
        flex-shrink: 0 !important;
        width: 100% !important;
        background-size: cover !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
        border-radius: 16px 16px 0 0 !important;
        overflow: hidden !important;
    }
    
    /* Experience Card Text Fix - CLEAN & BREATHABLE */
    body .experience-card,
    #experiences-grid .experience-card {
        font-size: 0.9rem !important;
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    body .experience-card h3,
    #experiences-grid .experience-card h3 {
        font-size: 1.1rem !important;
        margin-bottom: 0.6rem !important;
        line-height: 1.3 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }
    
    body .experience-card p,
    #experiences-grid .experience-card p {
        font-size: 0.85rem !important;
        line-height: 1.5 !important;
        margin-bottom: 0.75rem !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 3 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        flex-grow: 1 !important;
    }
    
    body .experience-card .p-6,
    #experiences-grid .experience-card .p-6,
    body .experience-card > div:last-child,
    #experiences-grid .experience-card > div:last-child {
        padding: 1.25rem !important;
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    /* Price and duration - keep visible */
    body .experience-card .flex.items-center,
    #experiences-grid .experience-card .flex.items-center {
        font-size: 0.8rem !important;
        margin-top: auto !important;
        margin-bottom: 0.75rem !important;
    }
    
    body .experience-card .text-sm,
    #experiences-grid .experience-card .text-sm {
        font-size: 0.75rem !important;
    }
    
    body .experience-card .text-lg,
    #experiences-grid .experience-card .text-lg {
        font-size: 0.85rem !important;
        font-weight: 700 !important;
    }
    
    /* Price and Duration - Fix Overlap */
    .experience-card .flex.items-center.justify-between {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.5rem !important;
    }
    
    .experience-card .text-sm {
        font-size: 0.7rem !important;
    }
    
    .experience-card .text-lg {
        font-size: 0.9rem !important;
    }
    
    /* Mobile Navigation - Hide desktop menu */
    nav .hidden.md\\:flex {
        display: none !important;
    }
}

/* ========================================
   MOBILE: Homepage Experience Cards
   ======================================== */

@media (max-width: 767px) {
    /* Experience Grid - 2 Columns */
    #experiences-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
        padding: 0 !important;
    }
    
    /* Experience Section - Reduce padding */
    #experiences {
        padding: 3rem 1rem !important;
    }
    
    #experiences > div > div:first-child {
        padding: 2rem 1rem !important;
        margin-bottom: 2.5rem !important;
    }
    
    #experiences h2 {
        font-size: 2rem !important;
    }
    
    #experiences p {
        font-size: 0.95rem !important;
    }
    
    /* Experience Cards - Touch-Friendly Single Column - HOMEPAGE */
    #experiences .experience-card {
        height: auto !important;
        min-height: 380px !important;
        max-height: none !important;
        max-width: 100% !important;
        width: calc(100vw - 2rem) !important;
        border-radius: 16px !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }
    
    #experiences .experience-card img {
        height: 200px !important;
        object-fit: cover !important;
        flex-shrink: 0 !important;
        width: 100% !important;
        border-radius: 16px 16px 0 0 !important;
    }
    
    /* Target the padding div inside homepage experience cards - Touch-Friendly */
    #experiences .experience-card > div:last-child {
        padding: 1.5rem !important;
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
    }
    
    #experiences .experience-card h3 {
        font-size: 1.125rem !important;
        line-height: 1.3 !important;
        margin: 0 0 1rem 0 !important;
        max-height: none !important;
        overflow: visible !important;
        display: block !important;
        -webkit-line-clamp: unset !important;
    }
    
    #experiences .experience-card p {
        font-size: 0.875rem !important;
        line-height: 1.5 !important;
        margin-bottom: 1.25rem !important;
        flex: 1 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 3 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        max-height: none !important;
    }
    
    #experiences .experience-card a {
        font-size: 1rem !important;
        padding: 1rem 1.5rem !important;
        min-height: 44px !important;
        margin-top: 1.25rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        background: linear-gradient(135deg, #6B9F5C 0%, #5A8A4D 100%) !important;
        color: white !important;
        border-radius: 8px !important;
        font-weight: 600 !important;
        text-decoration: none !important;
    }
    
    /* Icon + Title row */
    .experience-card > div:last-child > div:first-child {
        margin-bottom: 0.5rem !important;
        gap: 0.5rem !important;
    }
    
    .experience-card i {
        font-size: 1rem !important;
    }
    
    /* Included badge */
    .experience-card span {
        padding: 0.4rem 0.8rem !important;
        font-size: 0.65rem !important;
        top: 0.75rem !important;
        left: 0.75rem !important;
    }
}

/* ========================================
   MOBILE: Extended Stays Section
   ======================================== */

@media (max-width: 767px) {
    .extended-stays-card-horizontal {
        display: flex !important;
        flex-direction: column !important;
        background: white !important;
        border-radius: 20px !important;
        overflow: hidden !important;
        margin: 0 1rem !important;
    }
    
    .extended-stays-card-horizontal img {
        width: 100% !important;
        height: 200px !important;
        object-fit: cover !important;
    }
    
    .extended-stays-content {
        padding: 1.5rem !important;
    }
    
    .extended-stays-content h3 {
        font-size: 1.5rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    .extended-stays-content p {
        font-size: 0.95rem !important;
        line-height: 1.6 !important;
        margin-bottom: 1rem !important;
    }
    
    .btn-extended-stays {
        width: 100% !important;
        padding: 0.85rem 1.5rem !important;
        font-size: 0.9rem !important;
        text-align: center !important;
        max-width: 100% !important;
        justify-content: center !important;
    }
}

/* ========================================
   MOBILE: Property Cards (Homepage)
   ======================================== */

@media (max-width: 767px) {
    .property-grid {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
        padding: 2rem 1rem !important;
    }
    
    .property-card {
        margin-bottom: 0 !important;
    }
    
    .property-gallery {
        height: 240px !important;
    }
    
    .property-details {
        padding: 1.5rem !important;
    }
    
    .property-name {
        font-size: 1.6rem !important;
    }
    
    .property-specs {
        font-size: 0.85rem !important;
        margin-bottom: 1rem !important;
    }
    
    .property-pricing {
        margin-bottom: 1rem !important;
    }
    
    .price-label {
        font-size: 0.7rem !important;
    }
    
    .price-amount {
        font-size: 1.75rem !important;
    }
    
    .price-period {
        font-size: 0.85rem !important;
    }
    
    .btn-check-availability {
        padding: 1rem !important;
        font-size: 1rem !important;
    }
}

/* ========================================
   LARGER PHONES (iPhone Pro Max 428px+)
   ======================================== */

@media (min-width: 428px) and (max-width: 767px) {
    /* Property Detail - Bigger photos */
    .photo-gallery-grid > div {
        height: 260px !important;
    }
    
    .photo-gallery-grid > div:first-child {
        height: 320px !important;
    }
    
    /* Calendar - Larger touch targets */
    .day {
        font-size: 1rem !important;
        padding: 0.7rem 0.3rem !important;
        min-height: 52px !important;
    }
    
    .weekday {
        font-size: 0.85rem !important;
    }
    
    /* Property Header */
    .property-header h1 {
        font-size: 2rem !important;
    }
    
    /* Amenities */
    .amenity-item {
        font-size: 1rem !important;
    }
    
    /* Experience Cards - Slightly bigger */
    .experience-card {
        height: 280px !important;
    }
    
    .experience-card img {
        height: 160px !important;
    }
    
    .experience-card h3 {
        font-size: 1.05rem !important;
    }
    
    .experience-card p {
        font-size: 0.8rem !important;
    }
}

/* ========================================
   SMALLER PHONES (iPhone SE 375px and below)
   ======================================== */

@media (max-width: 375px) {
    /* Property Detail - Compact photos */
    .photo-gallery-grid > div {
        height: 200px !important;
    }
    
    .photo-gallery-grid > div:first-child {
        height: 240px !important;
    }
    
    /* Calendar - Smaller but still usable */
    .calendar-header h3 {
        font-size: 1.15rem !important;
    }
    
    .day {
        font-size: 0.8rem !important;
        padding: 0.5rem 0.2rem !important;
        min-height: 44px !important;
    }
    
    .weekday {
        font-size: 0.75rem !important;
    }
    
    /* Experience Cards - More compact */
    .experience-card {
        height: 240px !important;
    }
    
    .experience-card img {
        height: 120px !important;
    }
    
    .experience-card h3 {
        font-size: 0.95rem !important;
    }
    
    .experience-card p {
        font-size: 0.7rem !important;
        -webkit-line-clamp: 2 !important;
    }
}