/* Star Hospital - Responsive Design Enhancements */
/* Mobile First Approach - Optimized for phones, tablets, and iPads */

/* Base responsive font sizing */
@media (max-width: 640px) {
    html {
        font-size: 14px;
    }
    
    /* Better spacing on mobile */
    .max-w-7xl {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    /* Touch-friendly interactive elements */
    button,
    a[href],
    input,
    select {
        min-height: 44px;
    }
    
    /* Prevent text overflow */
    h1, h2, h3, h4, h5, h6 {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
}

/* Tablet optimization (768px - 1023px) */
@media (min-width: 641px) and (max-width: 1023px) {
    html {
        font-size: 15px;
    }
    
    .max-w-7xl {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
    
    /* Reduce excessive vertical spacing on tablets */
    section {
        padding-top: clamp(2.5rem, 4vw, 4rem) !important;
        padding-bottom: clamp(2.5rem, 4vw, 4rem) !important;
    }
    
    /* Better hero section height for tablets */
    .min-h-screen {
        min-height: 70vh !important;
    }
}

/* iPad and larger tablets */
@media (min-width: 1024px) and (max-width: 1279px) {
    html {
        font-size: 16px;
    }
}

/* Reduce large hero height on desktop */
@media (min-width: 1024px) {
    .lg\:min-h-screen {
        min-height: 50vh !important;
    }
}

/* Better image responsiveness */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Responsive iframe (for maps, videos) */
iframe {
    max-width: 100%;
}

/* Better grid responsiveness */
@media (max-width: 640px) {
    .grid {
        gap: 1rem !important;
    }
}

/* Form improvements for mobile */
@media (max-width: 640px) {
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="date"],
    select,
    textarea {
        font-size: 16px; /* Prevents zoom on iOS */
        padding: 0.75rem;
    }
}

/* Better navigation on tablets */
@media (min-width: 641px) and (max-width: 1023px) {
    nav a,
    nav button {
        font-size: 0.875rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    /* Compact headings on tablets */
    h1 {
        margin-bottom: 1.5rem !important;
    }
    
    h2, h3 {
        margin-bottom: 1rem !important;
    }
    
    /* Reduce gaps between sections */
    .grid {
        gap: 1.5rem !important;
    }
    
    /* Reduce margin-bottom values */
    .mb-20 {
        margin-bottom: 3rem !important;
    }
    
    .mb-16 {
        margin-bottom: 2.5rem !important;
    }
    
    .mb-12 {
        margin-bottom: 2rem !important;
    }
    
    /* Reduce top margins */
    .mt-12 {
        margin-top: 2rem !important;
    }
}

/* Card responsiveness */
@media (max-width: 640px) {
    .rounded-3xl {
        border-radius: 1.5rem;
    }
    
    .rounded-2xl {
        border-radius: 1rem;
    }
}

/* Better spacing for mobile */
@media (max-width: 640px) {
    .py-32 {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }
    
    .py-24 {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
    
    .py-20 {
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
    }
}

/* Prevent horizontal scroll */
body {
    overflow-x: hidden;
}

/* Better mobile menu */
@media (max-width: 768px) {
    .mobile-menu {
        max-width: 85vw;
    }
}

/* Responsive text sizing helper classes */
@media (max-width: 640px) {
    .text-responsive-sm {
        font-size: 0.875rem !important;
    }
    
    .text-responsive-base {
        font-size: 1rem !important;
    }
    
    .text-responsive-lg {
        font-size: 1.125rem !important;
    }
}

/* Better button responsiveness */
@media (max-width: 640px) {
    .btn-responsive {
        width: 100%;
        justify-content: center;
    }
}

/* Ensure tables are scrollable on mobile */
@media (max-width: 640px) {
    table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}

/* Fix for absolute positioned elements on mobile */
@media (max-width: 640px) {
    .absolute {
        position: relative;
    }
    
    .absolute.mobile-absolute {
        position: absolute;
    }
}