/* =========================================
   MOBILE RESPONSIVENESS & LAYOUT FIXES
   Complete mobile optimization for all pages
   ========================================= */

/* === BRAND COLORS === */
:root {
    /* Updated Brand Colors as requested */
    --healthcare-primary: #1E6FE3;
    --healthcare-secondary: #2DB6A3;
    --healthcare-text: #1F2937;
    --healthcare-bg: #FFFFFF;
    --healthcare-bg-alt: #F5F7FA;

    /* Supporting colors */
    --color-text-body: #4B5563;
    --color-border: #E5E7EB;
    --color-shadow: rgba(30, 111, 227, 0.1);
}

/* === BASE MOBILE FIXES === */
* {
    box-sizing: border-box;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Prevent horizontal scroll */
body {
    overflow-x: hidden;
    max-width: 100vw;
}

/* === MOBILE RESPONSIVE BREAKPOINTS === */

/* Mobile First - Default styles for mobile (up to 767px) */

/* Grid fixes for mobile */
@media (max-width: 767px) {

    /* Force single column on mobile */
    .grid-cols-2,
    .grid-cols-3,
    .grid-cols-4,
    .md\:grid-cols-2,
    .md\:grid-cols-3,
    .md\:grid-cols-4,
    .lg\:grid-cols-2,
    .lg\:grid-cols-3 {
        grid-template-columns: 1fr !important;
    }

    /* Reduce gaps on mobile */
    .gap-10,
    .gap-12,
    .gap-16,
    .gap-20 {
        gap: 1.5rem !important;
    }

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

    /* Padding adjustments */
    .px-8 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .py-32 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }

    .py-20 {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }

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

    .py-16 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

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

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

    /* Hero Section Mobile */
    .hero-section {
        padding-top: 7rem !important;
        padding-bottom: 3rem !important;
        min-height: auto !important;
    }

    .hero-title {
        font-size: 2rem !important;
        line-height: 1.2 !important;
        margin-bottom: 1rem !important;
    }

    .hero-subtitle {
        font-size: 1rem !important;
        line-height: 1.6 !important;
        margin-bottom: 1.5rem !important;
    }

    .page-title {
        font-size: 2rem !important;
        line-height: 1.2 !important;
    }

    .section-title {
        font-size: 1.75rem !important;
        line-height: 1.3 !important;
    }

    .page-description {
        font-size: 1rem !important;
        line-height: 1.6 !important;
    }

    /* Page Header Mobile */
    .page-header-section {
        padding-top: 7rem !important;
        padding-bottom: 2.5rem !important;
    }

    /* Text sizing */
    .text-4xl {
        font-size: 1.75rem !important;
    }

    .text-3xl {
        font-size: 1.5rem !important;
    }

    .text-2xl {
        font-size: 1.25rem !important;
    }

    .text-xl {
        font-size: 1.125rem !important;
    }

    .text-lg {
        font-size: 1rem !important;
    }

    /* Button mobile sizing */
    .btn-primary,
    .btn-whatsapp,
    .btn-secondary,
    .btn-brand {
        padding: 0.875rem 1.5rem !important;
        font-size: 0.9375rem !important;
        width: 100%;
        justify-content: center;
    }

    /* Flexbox mobile adjustments */
    .flex-col.sm\:flex-row {
        flex-direction: column !important;
    }

    /* Card mobile styling */
    .p-10 {
        padding: 1.5rem !important;
    }

    .p-8 {
        padding: 1.25rem !important;
    }

    .p-6 {
        padding: 1rem !important;
    }

    /* Image containers */
    .h-64 {
        height: auto !important;
        min-height: 200px;
    }

    .h-\[600px\] {
        height: auto !important;
        min-height: 300px !important;
        max-height: 400px !important;
    }

    .aspect-video {
        aspect-ratio: 16 / 9;
        width: 100%;
        height: auto !important;
    }

    /* Hide overflow on mobile for images */
    .rounded-2xl img,
    .rounded-3xl img {
        object-fit: cover;
        width: 100%;
        height: 100%;
    }

    /* Portfolio/Work page grid */
    .grid.grid-cols-1.lg\:grid-cols-2 {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    /* Results/Stats grid mobile */
    .grid.grid-cols-3 {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    .grid.grid-cols-2 {
        grid-template-columns: 1fr 1fr !important;
        gap: 1rem !important;
    }

    /* Service page 2-column layouts */
    .grid.grid-cols-2.gap-20 {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }

    /* Ensure order consistency on mobile */
    .order-1 {
        order: 1 !important;
    }

    .order-2 {
        order: 2 !important;
    }

    .lg\:order-1 {
        order: unset !important;
    }

    .lg\:order-2 {
        order: unset !important;
    }

    /* Footer grid mobile */
    .md\:grid-cols-4 {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    .md\:col-span-2 {
        grid-column: span 1 !important;
    }

    /* Icon sizing mobile */
    .w-16.h-16 {
        width: 3rem !important;
        height: 3rem !important;
    }

    .w-14.h-14 {
        width: 2.75rem !important;
        height: 2.75rem !important;
    }

    .w-20.h-20 {
        width: 3.5rem !important;
        height: 3.5rem !important;
    }

    /* Badge mobile */
    .badge {
        font-size: 0.625rem !important;
        padding: 0.5rem 1rem !important;
    }

    /* Form mobile styling */
    input[type="text"],
    input[type="tel"],
    input[type="email"],
    select,
    textarea {
        font-size: 16px !important;
        /* Prevents iOS zoom */
        padding: 0.875rem 1rem !important;
    }

    /* Contact cards mobile */
    .flex.items-center.gap-6 {
        gap: 1rem !important;
    }

    /* Spacing adjustments */
    .space-y-6>*+* {
        margin-top: 1rem !important;
    }

    .space-y-4>*+* {
        margin-top: 0.75rem !important;
    }

    /* Service image containers */
    .rounded-3xl.overflow-hidden {
        border-radius: 1rem !important;
    }

    .rounded-2xl {
        border-radius: 0.75rem !important;
    }

    /* WhatsApp float mobile */
    .fixed.bottom-8.right-8 {
        bottom: 1rem !important;
        right: 1rem !important;
        width: 3.5rem !important;
        height: 3.5rem !important;
    }

    .fixed.bottom-8.right-8 svg {
        width: 1.75rem !important;
        height: 1.75rem !important;
    }
}

/* Tablet adjustments (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {

    /* 2 columns for tablet where appropriate */
    .grid-cols-3,
    .grid-cols-4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .py-32 {
        padding-top: 4rem !important;
        padding-bottom: 4rem !important;
    }

    .hero-section {
        padding-top: 8rem !important;
        padding-bottom: 4rem !important;
    }

    .page-header-section {
        padding-top: 8rem !important;
        padding-bottom: 3rem !important;
    }

    .hero-title {
        font-size: 2.5rem !important;
    }

    .page-title {
        font-size: 2.25rem !important;
    }

    .section-title {
        font-size: 2rem !important;
    }
}

/* === IMAGE OPTIMIZATION === */
img {
    /* Prevent image distortion */
    object-fit: cover;
    object-position: center;

    /* Smooth loading */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* Specific image fix for portfolio/work */
.aspect-video img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Service images */
.service-image,
.portfolio-image,
.project-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

/* === TOUCH-FRIENDLY IMPROVEMENTS === */
@media (max-width: 767px) {

    /* Larger tap targets on mobile */
    a,
    button {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* Better spacing for readability */
    p {
        line-height: 1.7;
        margin-bottom: 1rem;
    }

    /* List spacing */
    ul,
    ol {
        padding-left: 1.25rem;
    }

    li {
        margin-bottom: 0.5rem;
    }
}

/* === CONSISTENT CONTAINER WIDTHS === */
.max-w-7xl {
    width: 100%;
    max-width: 80rem;
    margin-left: auto;
    margin-right: auto;
}

.max-w-4xl {
    width: 100%;
    max-width: 56rem;
    margin-left: auto;
    margin-right: auto;
}

.max-w-3xl {
    width: 100%;
    max-width: 48rem;
    margin-left: auto;
    margin-right: auto;
}

.max-w-2xl {
    width: 100%;
    max-width: 42rem;
    margin-left: auto;
    margin-right: auto;
}

/* === PREVENT LAYOUT SHIFT === */
@media (max-width: 767px) {

    /* Prevent content jump on mobile */
    * {
        -webkit-tap-highlight-color: transparent;
    }

    /* Smooth font scaling */
    html {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }
}

/* === ACCESSIBILITY IMPROVEMENTS === */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* === PRINT STYLES === */
@media print {

    .fixed,
    nav,
    footer,
    .btn-whatsapp,
    .mobile-menu {
        display: none !important;
    }
}