/* ApartamNaDoby - Mobile-First Responsive Design */
/* Advanced Mobile Optimization with Modern CSS Features */

/* ==================== MOBILE CONTAINER QUERIES ==================== */
@supports (container-type: inline-size) {
    .responsive-container {
        container-type: inline-size;
    }
}

/* ==================== LARGE TABLETS (1024px and below) ==================== */
@media (max-width: 1024px) {
    :root {
        --space-container: var(--space-6);
        --grid-columns: repeat(auto-fit, minmax(280px, 1fr));
    }
    
    .container {
        padding: 0 var(--space-container);
    }
    
    .grid {
        grid-template-columns: var(--grid-columns);
        gap: var(--space-6);
    }
    
    .gallery {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: var(--space-4);
    }
    
    .hero {
        background-attachment: scroll;
        min-height: 70vh;
    }
    
    .section {
        padding: var(--space-20) 0;
    }
}

/* ==================== TABLETS (768px and below) ==================== */
@media (max-width: 768px) {
    :root {
        --space-container: var(--space-4);
        --text-hero: var(--text-4xl);
        --text-section: var(--text-3xl);
    }
    
    /* Header Adjustments */
    header {
        padding: var(--space-3) 0;
    }
    
    .header-container {
        flex-direction: column;
        gap: var(--space-4);
        align-items: center;
    }
    
    .logo {
        justify-content: center;
    }
    
    .logo img {
        width: 40px;
        height: 40px;
    }
    
    .logo-text {
        font-size: var(--text-lg);
    }
    
    /* Navigation */
    nav {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    
    nav::-webkit-scrollbar {
        display: none;
    }
    
    nav ul {
        flex-direction: row;
        gap: var(--space-6);
        justify-content: center;
        min-width: max-content;
        padding: 0 var(--space-4);
    }
    
    nav a {
        font-size: var(--text-sm);
        padding: var(--space-2) var(--space-4);
        white-space: nowrap;
        border-radius: var(--radius-lg);
        background: var(--bg-secondary);
        border: 1px solid var(--border);
    }
    
    nav a:hover {
        background: var(--accent-light);
        border-color: var(--accent);
    }
    
    /* Hero Section */
    .hero {
        min-height: 60vh;
        padding: var(--space-8) var(--space-4);
        background-attachment: scroll;
    }
    
    .hero-content {
        padding: var(--space-6);
    }
    
    .hero-content h1 {
        font-size: var(--text-hero);
        margin-bottom: var(--space-4);
        line-height: var(--leading-tight);
    }
    
    .hero-content p {
        font-size: var(--text-base);
        margin-bottom: var(--space-6);
    }
    
    .cta-button {
        width: 100%;
        max-width: 300px;
        padding: var(--space-4) var(--space-6);
        font-size: var(--text-base);
    }
    
    /* Sections */
    .section {
        padding: var(--space-16) 0;
    }
    
    .section-title {
        font-size: var(--text-section);
        margin-bottom: var(--space-12);
    }
    
    .section-content {
        text-align: left;
    }
    
    /* Grid System */
    .grid {
        grid-template-columns: 1fr;
        gap: var(--space-6);
        margin-top: var(--space-12);
    }
    
    .grid-item {
        padding: var(--space-6);
    }
    
    .grid-item img {
        height: 200px;
        margin-bottom: var(--space-4);
    }
    
    .grid-item h3 {
        font-size: var(--text-xl);
        margin-bottom: var(--space-3);
    }
    
    .grid-item p {
        font-size: var(--text-base);
    }
    
    /* Gallery */
    .gallery {
        grid-template-columns: 1fr;
        gap: var(--space-4);
        margin-top: var(--space-8);
    }
    
    .gallery-item {
        aspect-ratio: 16/9;
    }
    
    .gallery-overlay {
        transform: translateY(0);
        background: linear-gradient(transparent 50%, rgba(0, 0, 0, 0.9));
        padding: var(--space-4);
    }
    
    .gallery-overlay h4 {
        font-size: var(--text-lg);
        margin-bottom: var(--space-2);
    }
    
    .gallery-overlay p {
        font-size: var(--text-sm);
    }
}

/* ==================== MOBILE PHONES (480px and below) ==================== */
@media (max-width: 480px) {
    :root {
        --space-container: var(--space-3);
        --text-hero: var(--text-3xl);
        --text-section: var(--text-2xl);
    }
    
    .container {
        padding: 0 var(--space-container);
    }
    
    /* Hero Adjustments */
    .hero {
        min-height: 50vh;
        padding: var(--space-6) var(--space-3);
    }
    
    .hero-content {
        padding: var(--space-4);
    }
    
    .hero-content h1 {
        font-size: var(--text-hero);
        margin-bottom: var(--space-3);
    }
    
    .hero-content p {
        font-size: var(--text-sm);
        margin-bottom: var(--space-4);
    }
    
    /* Sections */
    .section {
        padding: var(--space-12) 0;
    }
    
    .section-title {
        font-size: var(--text-section);
        margin-bottom: var(--space-8);
    }
    
    /* Grid Items */
    .grid-item {
        padding: var(--space-4);
    }
    
    .grid-item img {
        height: 180px;
    }
    
    .grid-item h3 {
        font-size: var(--text-lg);
    }
    
    .grid-item p {
        font-size: var(--text-sm);
    }
    
    /* Navigation */
    nav ul {
        gap: var(--space-3);
    }
    
    nav a {
        font-size: var(--text-xs);
        padding: var(--space-2) var(--space-3);
    }
}

/* ==================== SMALL MOBILE (375px and below) ==================== */
@media (max-width: 375px) {
    :root {
        --space-container: var(--space-2);
        --text-hero: var(--text-2xl);
        --text-section: var(--text-xl);
    }
    
    .hero-content h1 {
        font-size: var(--text-hero);
    }
    
    .section-title {
        font-size: var(--text-section);
    }
    
    .cta-button {
        padding: var(--space-3) var(--space-4);
        font-size: var(--text-sm);
    }
    
    nav a {
        padding: var(--space-1-5) var(--space-2-5);
    }
}

/* ==================== FORMS - MOBILE OPTIMIZED ==================== */
@media (max-width: 768px) {
    .form-container {
        padding: var(--space-8);
        margin: 0 var(--space-4);
        border-radius: var(--radius-2xl);
    }
    
    .form-group {
        margin-bottom: var(--space-5);
    }
    
    .form-group label {
        font-size: var(--text-sm);
        margin-bottom: var(--space-2);
    }
    
    .form-group input,
    .form-group textarea,
    .form-group select {
        padding: var(--space-3) var(--space-4);
        font-size: var(--text-base);
        border-radius: var(--radius-lg);
    }
    
    .form-group textarea {
        min-height: 100px;
    }
    
    .checkbox-group {
        flex-direction: column;
        gap: var(--space-2);
        align-items: flex-start;
    }
    
    .checkbox-group input[type="checkbox"] {
        margin-top: 0;
        margin-right: var(--space-2);
    }
    
    .checkbox-group label {
        font-size: var(--text-xs);
        line-height: var(--leading-normal);
    }
}

@media (max-width: 480px) {
    .form-container {
        padding: var(--space-6);
        margin: 0 var(--space-2);
    }
    
    .form-group input,
    .form-group textarea,
    .form-group select {
        padding: var(--space-2-5) var(--space-3);
        font-size: var(--text-sm);
    }
    
    .checkbox-group label {
        font-size: var(--text-xs);
    }
}

/* ==================== PRICE TABLES - MOBILE ==================== */
@media (max-width: 768px) {
    .price-table {
        margin-bottom: var(--space-6);
    }
    
    .price-table-header {
        padding: var(--space-6);
    }
    
    .price-table-header h3 {
        font-size: var(--text-xl);
    }
    
    .price-table-body {
        padding: var(--space-6);
    }
    
    .price-row {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
        padding: var(--space-3) 0;
    }
    
    .price-label {
        font-size: var(--text-sm);
        font-weight: var(--font-normal);
    }
    
    .price-value {
        font-size: var(--text-lg);
        font-weight: var(--font-bold);
    }
}

@media (max-width: 480px) {
    .price-table-header {
        padding: var(--space-4);
    }
    
    .price-table-header h3 {
        font-size: var(--text-lg);
    }
    
    .price-table-body {
        padding: var(--space-4);
    }
    
    .price-row {
        padding: var(--space-2) 0;
    }
    
    .price-label {
        font-size: var(--text-xs);
    }
    
    .price-value {
        font-size: var(--text-base);
    }
}

/* ==================== TESTIMONIALS - MOBILE ==================== */
@media (max-width: 768px) {
    .testimonial {
        padding: var(--space-6);
        margin-bottom: var(--space-6);
        border-radius: var(--radius-xl);
    }
    
    .testimonial::before {
        font-size: 3rem;
        top: var(--space-3);
        left: var(--space-4);
    }
    
    .testimonial-content {
        font-size: var(--text-base);
        line-height: var(--leading-relaxed);
        margin-bottom: var(--space-3);
    }
    
    .testimonial-author {
        text-align: left;
        font-size: var(--text-sm);
        margin-top: var(--space-2);
    }
}

@media (max-width: 480px) {
    .testimonial {
        padding: var(--space-4);
    }
    
    .testimonial::before {
        font-size: 2.5rem;
        top: var(--space-2);
        left: var(--space-3);
    }
    
    .testimonial-content {
        font-size: var(--text-sm);
    }
    
    .testimonial-author {
        font-size: var(--text-xs);
    }
}

/* ==================== CONTACT INFO - MOBILE ==================== */
@media (max-width: 768px) {
    .contact-info {
        padding: var(--space-6);
        margin-bottom: var(--space-6);
    }
    
    .contact-item {
        flex-direction: row;
        align-items: flex-start;
        gap: var(--space-3);
        margin-bottom: var(--space-4);
    }
    
    .contact-item span {
        font-size: var(--text-lg);
        width: 24px;
        flex-shrink: 0;
    }
    
    .contact-link {
        font-size: var(--text-sm);
        word-break: break-word;
    }
}

@media (max-width: 480px) {
    .contact-info {
        padding: var(--space-4);
    }
    
    .contact-item {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
        margin-bottom: var(--space-4);
    }
    
    .contact-item span {
        font-size: var(--text-base);
    }
    
    .contact-link {
        font-size: var(--text-xs);
    }
}

/* ==================== FOOTER - MOBILE ==================== */
@media (max-width: 768px) {
    footer {
        padding: var(--space-16) 0 var(--space-8);
    }
    
    .footer-content {
        grid-template-columns: 1fr;
        gap: var(--space-8);
        margin-bottom: var(--space-8);
    }
    
    .footer-section {
        text-align: center;
    }
    
    .footer-section h3 {
        margin-bottom: var(--space-3);
        font-size: var(--text-lg);
    }
    
    .footer-section ul li {
        margin-bottom: var(--space-1);
    }
    
    .footer-section a {
        font-size: var(--text-sm);
    }
    
    .footer-bottom {
        padding-top: var(--space-6);
        margin-top: var(--space-6);
        font-size: var(--text-xs);
    }
}

@media (max-width: 480px) {
    footer {
        padding: var(--space-12) 0 var(--space-6);
    }
    
    .footer-content {
        gap: var(--space-6);
    }
    
    .footer-section h3 {
        font-size: var(--text-base);
    }
    
    .footer-section a {
        font-size: var(--text-xs);
    }
}

/* ==================== MOBILE TYPOGRAPHY ==================== */
@media (max-width: 768px) {
    h1 { font-size: var(--text-4xl); }
    h2 { font-size: var(--text-3xl); }
    h3 { font-size: var(--text-2xl); }
    h4 { font-size: var(--text-xl); }
    h5 { font-size: var(--text-lg); }
    h6 { font-size: var(--text-base); }
    
    p {
        font-size: var(--text-base);
        line-height: var(--leading-relaxed);
    }
}

@media (max-width: 480px) {
    h1 { font-size: var(--text-3xl); }
    h2 { font-size: var(--text-2xl); }
    h3 { font-size: var(--text-xl); }
    h4 { font-size: var(--text-lg); }
    h5 { font-size: var(--text-base); }
    h6 { font-size: var(--text-sm); }
    
    p {
        font-size: var(--text-sm);
        line-height: var(--leading-relaxed);
    }
}

/* ==================== MOBILE UTILITY CLASSES ==================== */
@media (max-width: 768px) {
    .text-center-mobile { text-align: center; }
    .text-left-mobile { text-align: left; }
    .hide-mobile { display: none; }
    .show-mobile { display: block; }
    .full-width-mobile { width: 100%; }
    .stack-mobile { flex-direction: column; }
    .no-gap-mobile { gap: 0; }
    .small-padding-mobile { padding: var(--space-2); }
}

/* ==================== TOUCH OPTIMIZATIONS ==================== */
@media (max-width: 768px) {
    /* Ensure touch targets are at least 44px */
    .cta-button,
    .contact-link,
    nav a,
    button,
    input[type="submit"],
    input[type="button"] {
        min-height: 44px;
        min-width: 44px;
    }
    
    .cta-button {
        display: flex;
        align-items: center;
        justify-content: center;
        touch-action: manipulation;
    }
    
    /* Disable problematic hover effects on touch devices */
    .gallery-item:hover,
    .grid-item:hover {
        transform: none;
    }
    
    .gallery-item:hover img,
    .grid-item:hover img {
        transform: none;
    }
    
    /* Better touch feedback */
    .cta-button:active {
        transform: scale(0.98);
    }
    
    nav a:active {
        background: var(--accent);
        color: white;
    }
}

/* ==================== LANDSCAPE PHONE OPTIMIZATION ==================== */
@media (max-width: 896px) and (orientation: landscape) {
    .hero {
        min-height: 50vh;
    }
    
    .hero-content h1 {
        font-size: var(--text-3xl);
    }
    
    .hero-content p {
        font-size: var(--text-sm);
    }
    
    .section {
        padding: var(--space-12) 0;
    }
    
    .header-container {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    
    nav ul {
        flex-direction: row;
        gap: var(--space-4);
    }
}

/* ==================== SPECIFIC DEVICE OPTIMIZATIONS ==================== */
/* iPhone SE and similar small screens */
@media (max-width: 375px) and (max-height: 667px) {
    .hero {
        min-height: 45vh;
    }
    
    .hero-content {
        padding: var(--space-3);
    }
    
    .section {
        padding: var(--space-10) 0;
    }
}

/* iPhone 12/13/14 Pro and similar */
@media (max-width: 390px) and (max-height: 844px) {
    .hero {
        min-height: 55vh;
    }
}

/* iPhone 12/13/14 Pro Max and similar */
@media (max-width: 428px) and (max-height: 926px) {
    .hero {
        min-height: 60vh;
    }
}

/* ==================== TABLET PORTRAIT MODE ==================== */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    .grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-6);
    }
    
    .gallery {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .hero {
        min-height: 60vh;
    }
    
    .form-container {
        max-width: 500px;
    }
    
    .footer-content {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==================== HIGH DPI DISPLAYS ==================== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .hero {
        background-image: linear-gradient(135deg, 
            rgba(30, 41, 59, 0.95) 0%, 
            rgba(51, 65, 85, 0.85) 50%, 
            rgba(59, 130, 246, 0.9) 100%
        ), url('/img/hero-bg.webp');
    }
    
    .logo img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* ==================== ACCESSIBILITY - REDUCED MOTION ==================== */
@media (prefers-reduced-motion: reduce) {
    .gallery-item:hover,
    .grid-item:hover,
    .cta-button:hover {
        transform: none;
    }
    
    .gallery-overlay {
        transform: translateY(0);
        opacity: 0.9;
    }
    
    .hero-content {
        animation: none;
    }
    
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ==================== MOBILE FORM IMPROVEMENTS ==================== */
@media (max-width: 768px) {
    /* Prevent zoom on iOS when focusing inputs */
    input[type="email"],
    input[type="tel"],
    input[type="url"],
    input[type="text"],
    textarea,
    select {
        font-size: 16px;
    }
    
    /* Better select styling for mobile */
    select {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23374151' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
        background-position: right var(--space-3) center;
        background-repeat: no-repeat;
        background-size: 1.5em 1.5em;
        padding-right: var(--space-10);
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
    }
    
    /* Better focus indicators for mobile */
    input:focus,
    textarea:focus,
    select:focus {
        outline: 3px solid var(--accent);
        outline-offset: 2px;
    }
}

/* ==================== SAFE AREA INSETS (for devices with notches) ==================== */
@supports (padding: max(0px)) {
    .header-container {
        padding-left: max(var(--space-4), env(safe-area-inset-left));
        padding-right: max(var(--space-4), env(safe-area-inset-right));
    }
    
    .container {
        padding-left: max(var(--space-4), env(safe-area-inset-left));
        padding-right: max(var(--space-4), env(safe-area-inset-right));
    }
    
    .footer-content {
        padding-left: max(var(--space-4), env(safe-area-inset-left));
        padding-right: max(var(--space-4), env(safe-area-inset-right));
        padding-bottom: env(safe-area-inset-bottom);
    }
}

/* ==================== PERFORMANCE OPTIMIZATIONS ==================== */
@media (max-width: 768px) {
    /* Reduce expensive effects on mobile */
    .hero {
        background-attachment: scroll;
        will-change: scroll-position;
    }
    
    /* Optimize animations for mobile */
    .grid-item,
    .gallery-item,
    .cta-button {
        will-change: transform;
    }
    
    /* Optimize image rendering */
    img {
        image-rendering: optimizeQuality;
        image-rendering: -webkit-optimize-contrast;
    }
}

/* ==================== CONTAINER QUERIES (Future-proof) ==================== */
@container (max-width: 768px) {
    .grid {
        grid-template-columns: 1fr;
    }
    
    .gallery {
        grid-template-columns: 1fr;
    }
    
    .footer-content {
        grid-template-columns: 1fr;
    }
}

/* ==================== MOBILE-SPECIFIC COMPONENTS ==================== */
@media (max-width: 768px) {
    /* Mobile-specific button group */
    .mobile-button-group {
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
        width: 100%;
    }
    
    .mobile-button-group .cta-button {
        width: 100%;
    }
    
    /* Mobile-specific card layout */
    .mobile-card {
        background: white;
        border-radius: var(--radius-xl);
        padding: var(--space-4);
        box-shadow: var(--shadow-sm);
        border: 1px solid var(--border);
        margin-bottom: var(--space-4);
    }
    
    /* Mobile-specific spacing */
    .mobile-spacing {
        padding: var(--space-4);
        margin-bottom: var(--space-6);
    }
}