/* ═══════════════════════════════════════════════════════════════════
   ELLORIA MOBILE OPTIMIZATIONS
   Based on stitch_elloria_platform_design_home_mobile
   ═══════════════════════════════════════════════════════════════════ */

/* ── SCROLLBAR HIDE ──────────────────────────────────────────────── */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Hide all scrollbars globally on mobile */
@media (max-width: 768px) {
    ::-webkit-scrollbar {
        display: none;
    }
    
    * {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
}

/* ── SNAP SCROLL ─────────────────────────────────────────────────── */
.snap-x {
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

.snap-x-container {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.snap-x-container::-webkit-scrollbar {
    display: none;
}

.snap-center {
    scroll-snap-align: center;
    scroll-snap-stop: always;
}

.snap-start {
    scroll-snap-align: start;
}

.snap-card {
    flex: 0 0 auto;
    scroll-snap-align: start;
}

/* Desktop: cards take 33.333% width minus gap */
@media (min-width: 768px) {
    .snap-card {
        flex: 0 0 calc(33.333% - 27px); /* 3 cards visible, accounting for 10px gap */
    }
}

/* ── TOUCH INTERACTIONS ──────────────────────────────────────────── */
.water-ripple-effect:active {
    background: radial-gradient(circle, rgba(250, 218, 221, 0.4) 0%, transparent 70%);
    transition: background 0.3s ease;
}

/* Enhanced touch targets */
@media (max-width: 768px) {
    button,
    a[role="button"],
    .btn,
    .magnetic {
        min-height: 44px;
        min-width: 44px;
    }
}

/* Active states for mobile */
.mobile-active:active {
    transform: scale(0.95);
    transition: transform 0.1s ease;
}

/* ── MOBILE VIEWPORT HEIGHT ──────────────────────────────────────── */
@supports (height: 100dvh) {
    .min-h-screen {
        min-height: 100dvh;
    }
    
    .h-screen {
        height: 100dvh;
    }
}

/* iOS Safari bottom bar fix */
@supports (-webkit-touch-callout: none) {
    .min-h-screen {
        min-height: -webkit-fill-available;
    }
}

/* ── SAFE AREA INSETS ────────────────────────────────────────────── */
.pt-safe {
    padding-top: max(1rem, env(safe-area-inset-top));
}

.pb-safe {
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
}

.pl-safe {
    padding-left: max(1rem, env(safe-area-inset-left));
}

.pr-safe {
    padding-right: max(1rem, env(safe-area-inset-right));
}

/* ── MOBILE TYPOGRAPHY ───────────────────────────────────────────── */
@media (max-width: 640px) {
    /* Reduce hero text size */
    .hero-title {
        font-size: 3rem !important; /* 48px */
        line-height: 1.1;
    }
    
    /* Reduce section headings */
    .section-title {
        font-size: 2.25rem !important; /* 36px */
    }
    
    /* Adjust body text */
    body {
        font-size: 14px;
    }
}

/* ── MOBILE SPACING ──────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* Reduce section padding */
    .section-py {
        padding-top: 4rem !important;
        padding-bottom: 4rem !important;
    }
    
    /* Reduce container padding */
    .container-px {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
}

/* ── MOBILE GRID ADJUSTMENTS ─────────────────────────────────────── */
@media (max-width: 640px) {
    /* Force single column on mobile */
    .mobile-single-col {
        grid-template-columns: 1fr !important;
    }
    
    /* Reduce gaps */
    .mobile-gap-sm {
        gap: 1rem !important;
    }
}

/* ── HORIZONTAL SCROLL CONTAINERS ────────────────────────────────── */
.horizontal-scroll {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 1.5rem;
    padding: 0 1.5rem;
}

.horizontal-scroll::-webkit-scrollbar {
    display: none;
}

.horizontal-scroll > * {
    flex: 0 0 auto;
    scroll-snap-align: center;
}

/* ── MOBILE PRODUCT CARDS ────────────────────────────────────────── */
@media (max-width: 768px) {
    .product-card-mobile {
        min-width: 280px;
        max-width: 320px;
    }
    
    /* Optimize product suite scrolling */
    #suite-track {
        scroll-padding: 1.5rem;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
    
    #suite-track .snap-card {
        scroll-snap-align: center;
        scroll-snap-stop: always;
    }
    
    /* Smooth scroll behavior */
    #suite-track {
        scroll-behavior: smooth;
    }
    
    /* Product card text optimization */
    .snap-card h3 {
        font-size: 1.125rem;
        line-height: 1.3;
    }
    
    .snap-card p {
        font-size: 0.75rem;
        line-height: 1.4;
    }
    
    /* Scroll indicators */
    .suite-indicator {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .suite-indicator.bg-primary {
        width: 1.5rem;
    }
}

/* ── BACKDROP BLUR OPTIMIZATION ──────────────────────────────────── */
@supports (backdrop-filter: blur(12px)) {
    .mobile-glass {
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }
}

/* Fallback for browsers without backdrop-filter */
@supports not (backdrop-filter: blur(12px)) {
    .mobile-glass {
        background-color: rgba(255, 248, 246, 0.95);
    }
}

/* ── PERFORMANCE OPTIMIZATIONS ───────────────────────────────────── */
/* Optimize animations on mobile - keep them smooth but not too fast */
@media (max-width: 768px) {
    /* Don't override all animations - only specific ones */
    .reveal {
        animation-duration: 0.6s !important;
    }
    
    /* Keep smooth transitions for interactions */
    button, a, .magnetic {
        transition-duration: 0.2s !important;
    }
    
    /* Smooth scroll for containers */
    .snap-x-container {
        scroll-behavior: smooth;
    }
    
    /* IMPORTANT: Don't override fluid-canvas animation */
    .fluid-canvas {
        animation-duration: 15s !important;
        animation-timing-function: ease !important;
        animation-iteration-count: infinite !important;
    }
}

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    
    /* Keep fluid-canvas animation even with reduced motion (it's subtle) */
    .fluid-canvas {
        animation-duration: 15s !important;
        animation-iteration-count: infinite !important;
    }
}
    }
}

/* ── MOBILE BOTTOM NAVIGATION SPACING ────────────────────────────── */
@media (max-width: 768px) {
    /* Add padding to last section to account for bottom nav */
    main > section:last-of-type {
        padding-bottom: calc(5rem + env(safe-area-inset-bottom)) !important;
    }
    
    /* Adjust footer for bottom nav */
    footer {
        margin-bottom: calc(5rem + env(safe-area-inset-bottom));
    }
}

/* ── TOUCH FEEDBACK ──────────────────────────────────────────────── */
@media (hover: none) and (pointer: coarse) {
    /* Remove hover effects on touch devices */
    .hover\:scale-105:hover {
        transform: none;
    }
    
    /* Add active states instead */
    .hover\:scale-105:active {
        transform: scale(0.98);
    }
    
    button:active,
    a:active {
        opacity: 0.7;
        transition: opacity 0.1s ease;
    }
}

/* ── MOBILE SUBSCRIPTION SECTION ─────────────────────────────────── */
@media (max-width: 1024px) {
    .subscription-grid {
        grid-template-columns: 1fr !important;
    }
    
    .subscription-image {
        order: 1;
        max-width: 300px;
        margin: 0 auto;
    }
    
    .subscription-controls {
        order: 2;
    }
    
    .subscription-summary {
        order: 3;
        position: static !important;
        margin-top: 2rem;
    }
}

/* ── MOBILE HERO ADJUSTMENTS ─────────────────────────────────────── */
@media (max-width: 640px) {
    .hero-section {
        min-height: 100dvh;
        padding-top: 6rem;
        padding-bottom: 4rem;
    }
    
    .hero-content {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

/* ── MOBILE IMAGE OPTIMIZATION ───────────────────────────────────── */
@media (max-width: 768px) {
    img {
        max-width: 100%;
        height: auto;
    }
    
    /* Lazy load images */
    img[loading="lazy"] {
        opacity: 0;
        transition: opacity 0.3s;
    }
    
    img[loading="lazy"].loaded {
        opacity: 1;
    }
}

/* ── MOBILE FORM INPUTS ──────────────────────────────────────────── */
@media (max-width: 768px) {
    input,
    select,
    textarea {
        font-size: 16px !important; /* Prevents zoom on iOS */
    }
}

/* ── MOBILE MODAL/OVERLAY ────────────────────────────────────────── */
@media (max-width: 768px) {
    .modal-content {
        max-height: 90dvh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ── UTILITY CLASSES ─────────────────────────────────────────────── */
.mobile-only {
    display: none;
}

@media (max-width: 768px) {
    .mobile-only {
        display: block;
    }
    
    .desktop-only {
        display: none !important;
    }
}

/* ── SMOOTH SCROLLING ────────────────────────────────────────────── */
html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/* ── MOBILE CARD SHADOWS ─────────────────────────────────────────── */
@media (max-width: 768px) {
    .card-shadow {
        box-shadow: 0 4px 12px rgba(0, 148, 244, 0.08);
    }
    
    .card-shadow-lg {
        box-shadow: 0 10px 30px rgba(0, 148, 244, 0.12);
    }
}