/* ========================================================
   4U LUXURY INTERIOR - PROFESSIONAL RESPONSIVE SYSTEM
   Comprehensive mobile-first responsive overrides
   ======================================================== */

/* ═══════════════════════════════════════════
   LARGE DESKTOP (≤ 1400px)
   ═══════════════════════════════════════════ */
@media (max-width: 1400px) {
    .nav-container {
        padding: 0.9rem 1.5rem;
    }
}

/* ═══════════════════════════════════════════
   TABLET LANDSCAPE (≤ 1200px)
   ═══════════════════════════════════════════ */
@media (max-width: 1200px) {
    /* About section grid */
    .home-about-grid {
        gap: 3rem !important;
    }

    /* Royal about section */
    .royal-about-flex {
        gap: 50px !important;
    }
}

/* ═══════════════════════════════════════════
   TABLET PORTRAIT (≤ 1024px)
   ═══════════════════════════════════════════ */
@media (max-width: 1024px) {
    /* Typography scaling */
    h1 { font-size: 2.8rem !important; }
    h2 { font-size: 2rem !important; }

    /* Footer grid collapse */
    .site-footer-grid {
        grid-template-columns: 1fr !important;
        gap: 2.5rem !important;
        text-align: center !important;
    }
    .footer-title::after {
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%);
    }
    .footer-brand p { margin: 0 auto; }
    .footer-brand img { margin-left: auto; margin-right: auto; display: block; }
    .footer-links { text-align: center; }
    .footer-links li[style*="display: flex"] {
        justify-content: center;
    }
    .footer-brand div[style*="display: flex"] {
        justify-content: center;
    }

    /* Expertise cards padding */
    .luxury-expertise-card {
        padding: 2.5rem 2rem;
    }

    /* Contact grid collapse */
    .contact-grid {
        grid-template-columns: 1fr !important;
        gap: 4rem !important;
    }

    /* Royal about */
    .royal-about-flex {
        flex-direction: column !important;
        gap: 2.5rem !important;
    }
    .royal-about-flex > div {
        min-width: 100% !important;
    }

    /* Royal footer 3-col → 1-col */
    .royal-footer-grid {
        grid-template-columns: 1fr !important;
        text-align: center !important;
    }
    .royal-footer-grid > div {
        align-items: center;
    }
    .royal-footer-grid div[style*="flex-direction: column"] {
        align-items: center;
    }
    .royal-footer-grid div[style*="display: flex; gap: 1rem"] {
        justify-content: center;
    }
}

/* ═══════════════════════════════════════════
   MOBILE NAV BREAKPOINT (≤ 900px)
   Already handled in public.blade.php
   ═══════════════════════════════════════════ */

/* ═══════════════════════════════════════════
   TABLET SMALL / MOBILE LANDSCAPE (≤ 768px)
   ═══════════════════════════════════════════ */
@media (max-width: 768px) {
    /* --- GLOBAL --- */
    body {
        font-size: 15px;
    }

    h1 { font-size: 2.2rem !important; }
    h2 { font-size: 1.7rem !important; }
    h3 { font-size: 1.15rem !important; }

    .section {
        padding: 3.5rem 1rem;
    }

    .nav-container {
        padding: 0.7rem 1rem;
    }

    .logo img {
        height: 36px;
    }

    /* --- HERO SLIDER --- */
    .slider-container {
        height: 65vh !important;
    }

    .slider-container h1 {
        font-size: 2rem !important;
        margin-bottom: 0.8rem !important;
    }

    .slider-container h4 {
        font-size: 0.8rem !important;
        letter-spacing: 2px !important;
        margin-bottom: 0.6rem !important;
    }

    .slider-container p {
        font-size: 0.9rem !important;
        margin-bottom: 1.5rem !important;
        line-height: 1.6 !important;
    }

    .slider-container .btn-primary {
        font-size: 0.85rem !important;
        padding: 0.7rem 1.8rem !important;
    }

    /* Slider text container */
    .slide > div > div {
        padding: 1.5rem !important;
        padding-bottom: 12vh !important;
    }

    /* Slider nav arrows */
    .slider-container > button {
        width: 40px !important;
        height: 40px !important;
        font-size: 1rem !important;
    }
    .slider-container > button:first-of-type {
        left: 10px !important;
    }
    .slider-container > button:last-of-type {
        right: 10px !important;
    }

    /* Slider dots */
    .slider-container > div:last-child {
        bottom: 25px !important;
    }

    /* Video mute button */
    .slide button[onclick*="toggleVideoMute"] {
        width: 40px !important;
        height: 40px !important;
        bottom: 25px !important;
        right: 15px !important;
        font-size: 1rem !important;
    }

    /* --- ABOUT SECTION --- */
    .about-img-wrap {
        display: none !important;
    }

    .home-about-grid {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }

    /* --- PROJECT CARDS --- */
    .filter-tabs {
        justify-content: flex-start !important;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    
    .projects-grid {
        grid-template-columns: 1fr !important;
    }

    .home-project-card,
    .project-card,
    .royal-project-card {
        border-radius: 16px;
    }

    .project-swiper,
    .home-project-swiper,
    .royal-card-swiper {
        height: 260px !important;
    }

    /* --- EXPERTISE CARDS --- */
    .expertise-grid {
        grid-template-columns: 1fr !important;
    }
    .luxury-expertise-card {
        padding: 2rem 1.5rem;
    }
    .luxury-expertise-card .icon-wrap {
        width: 65px;
        height: 65px;
        font-size: 1.8rem;
        margin-bottom: 1.5rem;
        border-radius: 16px;
    }
    .luxury-expertise-card .card-title {
        font-size: 1.3rem;
    }
    .luxury-expertise-card .card-desc {
        font-size: 0.92rem;
        margin-bottom: 1.5rem;
    }

    /* --- STATS COUNTERS --- */
    .stats-card {
        grid-template-columns: 1fr 1fr !important;
        padding: 2.5rem 1.5rem !important;
        border-radius: 20px !important;
    }
    .stat-item {
        border-inline-end: none !important;
        border-bottom: 1px solid var(--border-color) !important;
        padding-bottom: 1.5rem !important;
    }
    .stat-item:nth-child(even) {
        border-inline-start: 1px solid var(--border-color) !important;
        padding-inline-start: 1.5rem !important;
    }
    .stat-item:nth-last-child(-n+2) {
        border-bottom: none !important;
        padding-bottom: 0 !important;
    }
    .counter-val {
        font-size: 2.5rem !important;
    }

    /* --- REVIEWS --- */
    .testimonials-swiper {
        overflow: hidden !important;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
    .testimonials-swiper .swiper-wrapper {
        padding-top: 40px; /* space for avatar overflow */
    }
    .review-card {
        padding: 1.8rem !important;
        padding-top: 3rem !important;
    }
    .review-card-wrapper {
        width: auto !important;
    }

    /* --- REVIEW MODAL --- */
    .review-modal-content {
        flex-direction: column !important;
        padding: 2rem !important;
        align-items: center !important;
        text-align: center !important;
        gap: 1.5rem !important;
        width: 95% !important;
    }

    /* --- CTA SECTION --- */
    .cta-section {
        padding: 4rem 1.5rem !important;
    }
    .cta-section h2 {
        font-size: 1.8rem !important;
    }
    .cta-section p {
        font-size: 1rem !important;
    }

    /* --- HERO PAGES (About, Contact, Projects) --- */
    .page-hero {
        height: 45vh !important;
        min-height: 300px;
    }
    .page-hero h1 {
        font-size: 2.2rem !important;
    }
    .page-hero span {
        font-size: 0.8rem !important;
        letter-spacing: 2px !important;
    }

    /* --- ABOUT PAGE --- */
    .about-story-grid {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }
    .about-story-grid .reveal-right {
        order: -1;
    }
    .about-values-grid {
        grid-template-columns: 1fr !important;
    }

    /* --- CONTACT PAGE --- */
    .luxury-form-card {
        padding: 2rem 1.5rem;
        border-radius: 20px;
    }
    .contact-form-2col {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
    .premium-input {
        padding: 1rem 1.2rem !important;
    }
    .info-icon {
        width: 50px;
        height: 50px;
        font-size: 1.3rem;
        border-radius: 14px;
    }

    /* --- ROYAL BUILDING --- */
    .royal-hero {
        height: 55vh !important;
        min-height: 400px;
    }
    .royal-hero h1 {
        font-size: 2.5rem !important;
    }
    .royal-about-features {
        grid-template-columns: 1fr !important;
    }

    /* --- FOOTER --- */
    .site-footer {
        padding: 3.5rem 1.5rem 1.5rem;
    }

    /* --- WHATSAPP FLOAT --- */
    .whatsapp-float span {
        display: none;
    }
    .whatsapp-float {
        padding: 12px;
        border-radius: 50%;
        bottom: 20px;
        right: 20px;
    }
    html[dir="rtl"] .whatsapp-float {
        right: auto;
        left: 20px;
    }

    /* --- MAP SECTION --- */
    .map-section {
        padding: 0 1rem 4rem !important;
    }
    .map-section > div:last-child {
        height: 250px !important;
        border-radius: 16px !important;
    }

    /* General section padding override */
    section[style*="padding: 7rem 2rem"],
    section[style*="padding: 100px 2rem"],
    section[style*="padding: 100px 0"] {
        padding-top: 4rem !important;
        padding-bottom: 4rem !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    section[style*="padding: 6rem 2rem"] {
        padding: 3.5rem 1.5rem !important;
    }

    section[style*="padding: 5rem 2rem"] {
        padding: 3rem 1.5rem !important;
    }

    section[style*="padding: 4rem 2rem"] {
        padding: 3rem 1rem !important;
    }

    /* Project grids with inline minmax */
    div[style*="minmax(380px, 1fr)"],
    div[style*="minmax(320px, 1fr)"] {
        grid-template-columns: 1fr !important;
    }

    /* 2-col inline grids */
    div[style*="grid-template-columns: 1fr 1fr"][style*="gap: 5rem"],
    div[style*="grid-template-columns: 1fr 1fr"][style*="gap: 6rem"],
    div[style*="grid-template-columns: 1fr 1.3fr"] {
        grid-template-columns: 1fr !important;
        gap: 2.5rem !important;
    }

    /* 3-col inline grids */
    div[style*="grid-template-columns: 1fr 1fr 1fr"],
    div[style*="grid-template-columns: 2fr 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    /* Flex wrap layouts with min-width */
    div[style*="min-width: 350px"],
    div[style*="min-width: 300px"] {
        min-width: 100% !important;
    }

    /* Flex layouts with large gaps */
    div[style*="gap: 80px"] {
        flex-direction: column !important;
        gap: 2.5rem !important;
    }
}

/* ═══════════════════════════════════════════
   MOBILE PORTRAIT (≤ 600px)
   ═══════════════════════════════════════════ */
@media (max-width: 600px) {
    h1 { font-size: 1.9rem !important; }
    h2 { font-size: 1.5rem !important; }

    /* Slider */
    .slider-container {
        height: 55vh !important;
    }
    .slider-container h1 {
        font-size: 1.75rem !important;
    }
    .slider-container h4 {
        font-size: 0.72rem !important;
        letter-spacing: 2px !important;
    }

    /* Stats counters to 2 col */
    .stats-card {
        grid-template-columns: 1fr 1fr !important;
        padding: 2rem 1rem !important;
        gap: 1.5rem !important;
    }

    .counter-val {
        font-size: 2rem !important;
    }

    .stat-item p {
        font-size: 0.7rem !important;
        letter-spacing: 1px !important;
    }

    /* Review cards */
    .review-card-wrapper {
        width: 90% !important;
    }

    /* Review modal */
    .review-modal-content {
        width: 95% !important;
    }
    #modalAvatarBox {
        width: 80px !important;
        height: 80px !important;
    }

    /* Contact form 2-col sections */
    .contact-form-2col,
    div[style*="grid-template-columns: 1fr 1fr"][style*="gap: 2rem"] {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }

    /* Expertise grid */
    .expertise-grid,
    div[style*="minmax(320px, 1fr)"] {
        grid-template-columns: 1fr !important;
    }

    /* Buttons */
    .btn-primary, .btn-secondary {
        padding: 0.7rem 1.8rem;
        font-size: 0.82rem;
        letter-spacing: 1px;
    }

    /* Contact page header row */
    div[style*="display: flex; justify-content: space-between"][style*="margin-bottom: 0.8rem"],
    div[style*="display: flex; justify-content: space-between"][style*="margin-bottom: 1.5rem"] {
        flex-direction: column;
        gap: 0.8rem;
        align-items: flex-start !important;
    }

    /* Budget display */
    #budgetValue {
        font-size: 1.2rem !important;
    }

    /* Royal Building desktop-only elements */
    .desktop-only {
        display: none !important;
    }

    /* Page hero sections */
    .page-hero {
        height: 40vh !important;
        min-height: 260px;
    }

    .page-hero .reveal-up {
        padding: 2rem 1.5rem !important;
    }

    /* Royal hero */
    .royal-hero {
        height: 50vh !important;
        min-height: 350px;
    }

    /* About page image */
    .about-story-grid .reveal-right img {
        height: 280px !important;
    }

    /* Filter tabs */
    .filter-tab {
        padding: 0.7rem 1.2rem;
        font-size: 0.8rem;
    }
}

/* ═══════════════════════════════════════════
   SMALL MOBILE (≤ 480px)
   ═══════════════════════════════════════════ */
@media (max-width: 480px) {
    h1 { font-size: 1.65rem !important; }
    h2 { font-size: 1.35rem !important; }

    /* Further reduce section padding */
    section {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    /* Slider compact */
    .slider-container {
        height: 50vh !important;
    }
    .slider-container h1 {
        font-size: 1.5rem !important;
    }
    .slider-container p {
        font-size: 0.85rem !important;
        padding: 0 0.25rem;
        line-height: 1.5 !important;
    }
    .slider-container .btn-primary {
        font-size: 0.8rem !important;
        padding: 0.65rem 1.5rem !important;
    }
    .slide > div > div {
        padding: 1rem !important;
        padding-bottom: 10vh !important;
    }

    /* Slider arrows even smaller */
    .slider-container > button {
        width: 36px !important;
        height: 36px !important;
        font-size: 0.9rem !important;
    }
    .slider-container > button:first-of-type {
        left: 5px !important;
    }
    .slider-container > button:last-of-type {
        right: 5px !important;
    }

    /* Stats to 1 column on very small */
    .stats-card {
        grid-template-columns: 1fr !important;
    }
    .stat-item:nth-child(even) {
        border-inline-start: none !important;
        padding-inline-start: 0 !important;
    }
    .stat-item {
        border-bottom: 1px solid var(--border-color) !important;
        padding-bottom: 1.2rem !important;
    }
    .stat-item:last-child {
        border-bottom: none !important;
        padding-bottom: 0 !important;
    }

    /* Project card swiper */
    .project-swiper,
    .home-project-swiper,
    .royal-card-swiper {
        height: 220px !important;
    }

    /* Form card */
    .luxury-form-card {
        padding: 1.5rem 1rem !important;
        border-radius: 16px !important;
    }

    .premium-input {
        padding: 0.9rem 1rem !important;
        font-size: 0.9rem !important;
        border-radius: 12px !important;
    }

    .premium-submit {
        padding: 1.1rem !important;
        font-size: 0.9rem !important;
        border-radius: 14px !important;
    }

    /* Contact info icons */
    .info-icon {
        width: 44px;
        height: 44px;
        font-size: 1.1rem;
        border-radius: 12px;
    }

    .info-item {
        gap: 1rem !important;
    }

    /* CTA section */
    .cta-section .btn-primary,
    section[style*="background: linear-gradient"] .btn-primary {
        padding: 0.8rem 2rem !important;
        font-size: 0.85rem !important;
    }

    /* Review card avatar */
    .review-card > div:first-child {
        width: 60px !important;
        height: 60px !important;
        top: -28px !important;
    }

    /* Map container */
    .map-section > div:last-child {
        height: 200px !important;
        border-radius: 14px !important;
    }

    /* Royal Building page */
    .royal-hero {
        height: 45vh !important;
        min-height: 320px;
    }

    /* Nav on small mobile */
    .logo img {
        height: 32px;
    }
}

/* ═══════════════════════════════════════════
   VERY SMALL MOBILE (≤ 375px)
   ═══════════════════════════════════════════ */
@media (max-width: 375px) {
    h1 { font-size: 1.45rem !important; }
    h2 { font-size: 1.2rem !important; }

    .slider-container {
        height: 45vh !important;
    }
    .slider-container h1 {
        font-size: 1.35rem !important;
    }

    .nav-container {
        padding: 0.6rem 0.75rem;
    }

    .logo img {
        height: 28px;
    }

    .btn-primary, .btn-secondary {
        padding: 0.6rem 1.5rem;
        font-size: 0.78rem;
    }

    .luxury-expertise-card {
        padding: 1.5rem 1rem;
    }
    .luxury-expertise-card .icon-wrap {
        width: 55px;
        height: 55px;
        font-size: 1.5rem;
    }

    /* Stats */
    .counter-val {
        font-size: 1.8rem !important;
    }
}

/* ═══════════════════════════════════════════
   LANDSCAPE MOBILE ORIENTATION
   ═══════════════════════════════════════════ */
@media (max-height: 500px) and (orientation: landscape) {
    .slider-container {
        height: 100vh !important;
    }
    .slide > div > div {
        padding: 1rem 2rem !important;
    }
    .slider-container h1 {
        font-size: 1.5rem !important;
    }
    .page-hero,
    .royal-hero {
        height: 100vh !important;
        min-height: auto;
    }
}

/* ═══════════════════════════════════════════
   PRINT STYLES
   ═══════════════════════════════════════════ */
@media print {
    header, .whatsapp-float, .mobile-menu-btn, .slider-container > button {
        display: none !important;
    }
    main {
        margin-top: 0 !important;
    }
    .slider-container {
        height: auto !important;
    }
}

/* ═══════════════════════════════════════════
   TOUCH DEVICE OPTIMIZATIONS
   ═══════════════════════════════════════════ */
@media (hover: none) and (pointer: coarse) {
    /* Remove hover transforms on touch */
    .home-project-card:hover,
    .project-card:hover,
    .royal-project-card:hover,
    .luxury-expertise-card:hover {
        transform: none;
    }

    /* Increase tap targets */
    .filter-tab {
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .nav-links a {
        min-height: 44px;
    }

    /* Smooth scrolling for momentum */
    .filter-tabs,
    .testimonials-swiper {
        -webkit-overflow-scrolling: touch;
    }
}