/* =============================================
   IRASHA Mobile Responsive Overrides
   Fixes mobile UX issues across all pages
   ============================================= */

/* --- Header / Nav Compact on Mobile --- */
@media (max-width: 767px) {

    /* Reduce section paddings on mobile */
    section.py-20 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }

    section.py-24 {
        padding-top: 3.5rem !important;
        padding-bottom: 3.5rem !important;
    }

    /* Hero section */
    header.py-20,
    header[class*="py-20"] {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }

    /* Reduce heading sizes on mobile for better readability */
    .font-display {
        letter-spacing: 0.05em !important;
    }

    h1.text-4xl,
    h1[class*="text-4xl"] {
        font-size: 1.875rem !important;
        line-height: 2.25rem !important;
    }

    h2.text-3xl,
    h2[class*="text-3xl"] {
        font-size: 1.5rem !important;
        line-height: 2rem !important;
    }

    h2.text-4xl {
        font-size: 1.5rem !important;
        line-height: 2rem !important;
    }

    h3.text-2xl,
    h3[class*="text-2xl"] {
        font-size: 1.25rem !important;
        line-height: 1.75rem !important;
    }

    /* Reduce "How It Works" section top padding */
    .mb-20 {
        margin-bottom: 2.5rem !important;
    }

    .mb-16 {
        margin-bottom: 2rem !important;
    }

    /* Fix grid spacing on mobile */
    .gap-12 {
        gap: 2rem !important;
    }

    .gap-8 {
        gap: 1.5rem !important;
    }

    /* Steps section - reduce left padding */
    .pl-20 {
        padding-left: 1rem !important;
    }

    /* Step number circle smaller on mobile */
    .w-16.h-16.rounded-full {
        width: 3rem !important;
        height: 3rem !important;
        font-size: 1.25rem !important;
    }

    /* Feature cards - tighter padding */
    .p-8.rounded-3xl {
        padding: 1.25rem !important;
    }

    /* Logo cards grid - 2 columns always on mobile */
    .grid-cols-2.md\:grid-cols-3.lg\:grid-cols-5 {
        gap: 0.75rem !important;
    }

    /* Logo card internal padding */
    .logo-card {
        padding: 0.75rem !important;
    }

    /* Stats row compact */
    .grid-cols-2.md\:grid-cols-4 {
        gap: 0.75rem !important;
    }

    /* Counter text smaller on mobile */
    .counter-anim,
    [data-target] {
        font-size: 1.5rem !important;
    }

    /* Testimonial cards */
    .grid.md\:grid-cols-3>div {
        padding: 1.25rem !important;
    }

    /* Footer columns */
    .grid-cols-2.md\:grid-cols-4.lg\:grid-cols-5 {
        gap: 1.5rem !important;
    }

    /* Help widget - less intrusive on mobile */
    .fixed.bottom-8.right-8 {
        bottom: 1rem !important;
        right: 1rem !important;
    }

    .fixed.bottom-8.right-8 button {
        padding: 0.75rem !important;
    }

    /* Float animation - make subtler on mobile for performance */
    .animate-float {
        animation-duration: 8s !important;
    }

    /* Blob animations - disable on mobile (mouse-based parallax, not useful on touch) */
    .animate-blob {
        animation: none !important;
    }

    /* Logo card - keep subtle animation */
    .logo-card {
        animation-duration: 10s !important;
    }

    /* Dashboard cards / glass effects on mobile */
    .glass-light.p-8,
    .glass.p-8,
    [class*="glass"].p-8 {
        padding: 1rem !important;
    }

    /* Reduce hero inner spacing */
    .grid.lg\:grid-cols-2.gap-12 {
        gap: 1.5rem !important;
    }

    /* Export Dashboard preview card - cleaner on mobile */
    .animate-float .p-6 {
        padding: 1rem !important;
    }

    /* Badge/tag spacing */
    .mb-6 {
        margin-bottom: 1rem !important;
    }

    /* Button sizing on mobile - make them easier to tap */
    .px-8.py-4.rounded-full {
        padding: 0.875rem 1.5rem !important;
        font-size: 0.875rem !important;
    }

    /* Ensure smooth scrolling */
    html {
        scroll-behavior: smooth;
    }

    /* Remove tilt card effect on mobile (touch devices) */
    .tilt-card {
        transform: none !important;
    }
}

/* --- Small mobile (< 360px) extra fixes --- */
@media (max-width: 359px) {

    h1.text-4xl,
    h1[class*="text-4xl"] {
        font-size: 1.5rem !important;
        line-height: 2rem !important;
    }

    h2.text-3xl,
    h2[class*="text-3xl"] {
        font-size: 1.25rem !important;
        line-height: 1.75rem !important;
    }

    .px-8.py-4.rounded-full {
        padding: 0.75rem 1.25rem !important;
        font-size: 0.8125rem !important;
    }
}