/* ===============================================
   MOBILE-SPECIFIC STYLES
   Safe areas, touch targets, and mobile optimizations
   =============================================== */

/* === SAFE AREA INSETS === */
:root {
    /* Safe area insets for notches and home indicators */
    --safe-area-top: env(safe-area-inset-top, 0px);
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-left: env(safe-area-inset-left, 0px);
    --safe-area-right: env(safe-area-inset-right, 0px);
    
    /* Touch target minimum size (iOS/Android guidelines) */
    --touch-target-min: 44px;
    
    /* Mobile-specific spacing */
    --mobile-padding: max(var(--space-md), var(--safe-area-left), var(--safe-area-right));
}

/* === VIEWPORT META SUPPORT === */
@supports (padding: max(0px)) {
    body {
        padding-left: var(--safe-area-left);
        padding-right: var(--safe-area-right);
    }
}

/* === NAVBAR SAFE AREA === */
.navbar {
    padding-top: calc(var(--space-md) + var(--safe-area-top));
    padding-left: var(--mobile-padding);
    padding-right: var(--mobile-padding);
}

/* === TOUCH TARGETS === */
@media (max-width: 768px) {
    /* Ensure all interactive elements are at least 44x44px */
    button,
    a,
    input[type="button"],
    input[type="submit"],
    .btn,
    .filter-btn,
    .gallery-dot,
    .accordion-header {
        min-width: var(--touch-target-min);
        min-height: var(--touch-target-min);
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Mobile menu toggle */
    #mobileToggle {
        min-width: var(--touch-target-min);
        min-height: var(--touch-target-min);
        padding: var(--space-sm);
        font-size: 1.5rem;
    }
    
    /* Filter buttons spacing */
    .filter-btn {
        margin: var(--space-xs);
        padding: var(--space-sm) var(--space-md);
    }
    
    /* Card hover effects disabled on mobile (no hover state) */
    .card:hover,
    .hover-lift:hover {
        transform: none;
    }
    
    /* Active state for touch feedback */
    .card:active,
    .btn:active,
    .filter-btn:active {
        transform: scale(0.98);
        transition: transform 0.1s ease;
    }
}

/* === MOBILE TYPOGRAPHY === */
@media (max-width: 768px) {
    /* Ensure text is readable on mobile */
    body {
        font-size: 16px; /* Prevent iOS zoom on focus */
    }
    
    /* Adjust heading sizes for mobile */
    h1 {
        font-size: clamp(2rem, 8vw, 3rem);
    }
    
    h2 {
        font-size: clamp(1.5rem, 6vw, 2.5rem);
    }
    
    h3 {
        font-size: clamp(1.25rem, 5vw, 2rem);
    }
    
    /* Prevent text overflow */
    p, li, span {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
}

/* === MOBILE FORMS === */
@media (max-width: 768px) {
    input,
    textarea,
    select {
        font-size: 16px; /* Prevent iOS zoom */
        min-height: var(--touch-target-min);
        padding: var(--space-sm) var(--space-md);
    }
    
    /* Better spacing for form elements */
    .form-group {
        margin-bottom: var(--space-lg);
    }
}

/* === MOBILE MODALS === */
@media (max-width: 768px) {
    .modal {
        padding: var(--space-md);
        align-items: flex-end; /* Bottom sheet style */
    }
    
    .modal-content {
        max-height: 90vh;
        max-height: calc(90vh - var(--safe-area-bottom));
        border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
        margin-bottom: 0;
    }
    
    .modal-close {
        min-width: var(--touch-target-min);
        min-height: var(--touch-target-min);
        top: var(--space-sm);
        right: var(--space-sm);
    }
}

/* === MOBILE GRID ADJUSTMENTS === */
@media (max-width: 768px) {
    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }
    
    /* Portfolio grid - 1 column on mobile */
    #portfolioGrid {
        grid-template-columns: 1fr !important;
    }
    
    /* Tool stack - 2 columns on mobile */
    #toolStackGrid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* === MOBILE NAVIGATION === */
@media (max-width: 768px) {
    .navbar-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        max-width: 300px;
        height: 100vh;
        height: calc(100vh - var(--safe-area-bottom));
        background: var(--bg-elevated);
        backdrop-filter: blur(20px);
        padding: calc(var(--space-2xl) + var(--safe-area-top)) var(--space-lg) var(--space-lg);
        transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: var(--z-modal);
        overflow-y: auto;
        box-shadow: -10px 0 30px rgba(0, 0, 0, 0.5);
    }
    
    .navbar-menu.active {
        right: 0;
    }
    
    /* Mobile menu backdrop */
    .navbar-menu.active::before {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.7);
        z-index: -1;
        animation: fadeIn 0.3s ease;
    }
    
    /* Menu items stack vertically */
    .navbar-menu .page-link {
        display: block;
        padding: var(--space-md);
        margin: var(--space-xs) 0;
        border-radius: var(--radius-lg);
        transition: all 0.2s ease;
    }
    
    .navbar-menu .page-link:hover,
    .navbar-menu .page-link:active {
        background: rgba(255, 255, 255, 0.1);
        transform: translateX(5px);
    }
}

/* === MOBILE SCROLL BEHAVIOR === */
@media (max-width: 768px) {
    /* Smooth scrolling */
    html {
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Prevent horizontal scroll */
    body {
        overflow-x: hidden;
    }
    
    /* Better scroll performance */
    * {
        -webkit-tap-highlight-color: transparent;
    }
}

/* === MOBILE IMAGES === */
@media (max-width: 768px) {
    img {
        max-width: 100%;
        height: auto;
    }
    
    /* Lazy loading placeholder */
    img[loading="lazy"] {
        background: linear-gradient(90deg, 
            rgba(255, 255, 255, 0.05) 25%, 
            rgba(255, 255, 255, 0.1) 50%, 
            rgba(255, 255, 255, 0.05) 75%
        );
        background-size: 200% 100%;
        animation: shimmer 1.5s infinite;
    }
    
    @keyframes shimmer {
        0% { background-position: -200% 0; }
        100% { background-position: 200% 0; }
    }
}

/* === MOBILE CARDS === */
@media (max-width: 768px) {
    .card {
        padding: var(--space-md);
    }
    
    .card-blog,
    .card-portfolio,
    .card-testimonial {
        margin-bottom: var(--space-md);
    }
}

/* === MOBILE FOOTER === */
@media (max-width: 768px) {
    .footer {
        padding-bottom: calc(var(--space-2xl) + var(--safe-area-bottom));
    }
}

/* === MOBILE SOCIAL DOCK === */
@media (max-width: 768px) {
    .social-dock {
        bottom: calc(var(--space-md) + var(--safe-area-bottom));
        right: var(--space-md);
    }
    
    .social-dock a {
        width: var(--touch-target-min);
        height: var(--touch-target-min);
    }
}

/* === MOBILE WHATSAPP SECTION === */
@media (max-width: 768px) {
    #whatsappContact {
        padding: var(--space-lg) var(--mobile-padding);
    }
    
    #whatsappContact h2 {
        font-size: clamp(1.5rem, 6vw, 2.5rem);
        margin-bottom: var(--space-md);
    }
    
    #whatsappContact .phone-number {
        font-size: clamp(1.25rem, 4vw, 1.5rem) !important;
        word-break: break-all;
        margin: var(--space-md) 0;
    }
    
    #whatsappContact .btn {
        width: 100%;
        min-height: var(--touch-target-min);
        padding: var(--space-md) var(--space-lg);
        font-size: 1rem;
    }
    
    #whatsappContact .whatsapp-icon {
        font-size: 1.5rem;
    }
}

/* === MOBILE PORTFOLIO FILTER === */
@media (max-width: 768px) {
    .portfolio-filters {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--space-xs);
        margin-bottom: var(--space-lg);
    }
    
    .filter-btn {
        flex: 0 1 auto;
        white-space: nowrap;
    }
}

/* === MOBILE ACCORDION === */
@media (max-width: 768px) {
    .accordion-header {
        padding: var(--space-md);
        cursor: pointer;
    }
    
    .accordion-icon {
        font-size: 1.25rem;
    }
}

/* === MOBILE ANIMATIONS === */
@media (max-width: 768px) {
    /* Reduce motion for better performance */
    @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
    }
    
    /* Lighter animations on mobile */
    .card,
    .btn,
    .filter-btn {
        transition-duration: 0.2s;
    }
}

/* === MOBILE LANDSCAPE === */
@media (max-width: 768px) and (orientation: landscape) {
    /* Adjust for landscape mode */
    .hero {
        min-height: auto;
        padding: var(--space-2xl) var(--mobile-padding);
    }
    
    .modal-content {
        max-height: 80vh;
    }
}

/* === VERY SMALL SCREENS (< 375px) === */
@media (max-width: 374px) {
    :root {
        --space-xs: 0.25rem;
        --space-sm: 0.5rem;
        --space-md: 0.75rem;
        --space-lg: 1rem;
    }
    
    .container {
        padding: var(--space-sm);
    }
    
    h1 {
        font-size: 1.75rem;
    }
    
    h2 {
        font-size: 1.5rem;
    }
}

/* === TABLET (768px - 1024px) === */
@media (min-width: 769px) and (max-width: 1024px) {
    .grid-3,
    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    #portfolioGrid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* === MOBILE-FIRST UTILITIES === */
@media (max-width: 768px) {
    .mobile-hidden {
        display: none !important;
    }
    
    .mobile-only {
        display: block !important;
    }
    
    .mobile-text-center {
        text-align: center !important;
    }
    
    .mobile-full-width {
        width: 100% !important;
    }
}

/* Desktop utilities */
@media (min-width: 769px) {
    .desktop-hidden {
        display: none !important;
    }
    
    .mobile-only {
        display: none !important;
    }
}