/* FILENAME: styles/responsive.css */
/* Comprehensive responsive design for all screen sizes */

/* Base responsive utilities */
* {
    box-sizing: border-box;
}

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

/* Typography scaling for different screen sizes */
h1 {
    font-size: clamp(1.875rem, 4vw, 3rem);
    line-height: 1.2;
}

h2 {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    line-height: 1.3;
}

h3 {
    font-size: clamp(1.25rem, 2.5vw, 1.875rem);
    line-height: 1.4;
}

h4 {
    font-size: clamp(1.125rem, 2vw, 1.5rem);
    line-height: 1.4;
}

p {
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.6;
}

/* Mobile-first: Extra small devices (phones, 320px and up) */
@media (min-width: 320px) {
    .container-responsive {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    .text-responsive {
        font-size: 0.875rem;
    }
    
    .button-responsive {
        padding: 0.625rem 1rem;
        font-size: 0.875rem;
    }
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    .container-responsive {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
    
    .text-responsive {
        font-size: 1rem;
    }
    
    .button-responsive {
        padding: 0.75rem 1.5rem;
        font-size: 0.9375rem;
    }
}

/* Medium devices (tablets, 768px and up) 
@media (min-width: 768px) {
    .container-responsive {
        padding-left: 2rem;
        padding-right: 2rem;
    }
    
    .text-responsive {
        font-size: 1.0625rem;
    }
    
    .button-responsive {
        padding: 0.875rem 2rem;
        font-size: 1rem;
    }
}*/

/* Large devices (desktops, 1024px and up) */
@media (min-width: 1024px) {
    .container-responsive {
        padding-left: 2.5rem;
        padding-right: 2.5rem;
    }
    
    .text-responsive {
        font-size: 1.125rem;
    }
    
    .button-responsive {
        padding: 1rem 2.5rem;
        font-size: 1.0625rem;
    }
}

/* Extra large devices (large desktops, 1280px and up) */
@media (min-width: 1280px) {
    .container-responsive {
        padding-left: 3rem;
        padding-right: 3rem;
    }
}

/* Navbar responsive adjustments */
@media (max-width: 767px) {
    nav {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    nav .text-2xl {
        font-size: 1.125rem;
    }
    
    nav img {
        width: 1.5rem;
        height: 1.5rem;
    }
    
    #mobile-menu {
        max-height: calc(100vh - 5rem);
        overflow-y: auto;
    }
}

/* Hero section responsive */
@media (max-width: 1023px) {
    .hero-section {
        min-height: auto;
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
    
    .hero-image {
        margin-top: 2rem;
    }
    
    .hero-badge {
        display: none;
    }
}

@media (max-width: 767px) {
    .hero-section {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
    
    .hero-title {
        font-size: clamp(1.75rem, 6vw, 2.5rem);
        margin-bottom: 1rem;
    }
    
    .hero-buttons {
        flex-direction: column;
        width: 100%;
    }
    
    .hero-buttons button {
        width: 100%;
        margin-bottom: 0.75rem;
    }
}

/* Card grid responsive */
@media (max-width: 639px) {
    .card-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .card {
        padding: 1rem;
    }
}

@media (min-width: 640px) and (max-width: 1023px) {
    .card-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}

/* Form responsive */
@media (max-width: 767px) {
    .form-container {
        padding: 1rem;
    }
    
    .form-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    input,
    textarea,
    select {
        font-size: 16px; /* Prevents zoom on iOS */
    }
}

/* Image responsive */
@media (max-width: 767px) {
    .responsive-image {
        width: 100%;
        height: auto;
        object-fit: cover;
    }
    
    .image-container {
        margin: 0 -1rem;
    }
}

/* Footer responsive */
@media (max-width: 767px) {
    footer {
        padding: 2rem 1rem;
    }
    
    footer .grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    footer .flex {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Team page responsive */
@media (max-width: 1023px) {
    .team-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 639px) {
    .team-grid {
        grid-template-columns: 1fr;
    }
    
    .team-card {
        margin-bottom: 1rem;
    }
}

/* Products page responsive */
@media (max-width: 1023px) {
    .product-hero {
        flex-direction: column;
        text-align: center;
    }
    
    .product-hero img {
        margin-top: 1.5rem;
        max-width: 100%;
    }
}

/* Services page responsive */
@media (max-width: 767px) {
    .service-card {
        flex-direction: column;
    }
    
    .service-icon {
        margin-bottom: 1rem;
        margin-right: 0;
    }
}

/* About page responsive */
@media (max-width: 1023px) {
    .about-grid {
        grid-template-columns: 1fr;
    }
    
    .about-image {
        order: -1;
        margin-bottom: 2rem;
    }
}

/* Events page responsive */
@media (max-width: 1023px) {
    .events-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .events-grid {
        grid-template-columns: 1fr;
    }
    
    .event-card {
        margin-bottom: 1.5rem;
    }
}

/* Technology page responsive */
@media (max-width: 1023px) {
    .tech-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .tech-grid {
        grid-template-columns: 1fr;
    }
    
    .pipeline-container {
        flex-direction: column;
        gap: 1.5rem;
    }
    
    .pipeline-arrow {
        transform: rotate(90deg);
    }
}

/* Clients page responsive */
@media (max-width: 1023px) {
    .clients-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .clients-grid {
        grid-template-columns: 1fr;
    }
}

/* Contact page responsive */
@media (max-width: 1023px) {
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .contact-info {
        order: 2;
    }
    
    .contact-form {
        order: 1;
    }
}

/* Button touch targets - minimum 44x44px for mobile */
@media (max-width: 767px) {
    button,
    a.button,
    .button {
        min-height: 44px;
        min-width: 44px;
        padding: 0.75rem 1.5rem;
    }
}

/* Spacing adjustments for mobile */
@media (max-width: 767px) {
    .section-padding {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
    
    .container-padding {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* Text alignment responsive */
@media (max-width: 767px) {
    .text-center-mobile {
        text-align: center;
    }
    
    .text-left-mobile {
        text-align: left;
    }
}

/* Hide/show elements based on screen size */
@media (max-width: 767px) {
    .hide-mobile {
        display: none !important;
    }
    
    .show-mobile {
        display: block !important;
    }
}

@media (min-width: 768px) {
    .show-mobile {
        display: none !important;
    }
    
    .hide-desktop {
        display: none !important;
    }
}

/* Landscape phone adjustments */
@media (max-width: 896px) and (orientation: landscape) {
    .hero-section {
        min-height: auto;
        padding: 1.5rem 0;
    }
    
    nav {
        height: auto;
        min-height: 4rem;
    }
}

/* Large desktop optimizations */
@media (min-width: 1920px) {
    .max-w-7xl {
        max-width: 90rem;
    }
}

/* Print styles */
@media print {
    nav,
    footer,
    .no-print {
        display: none;
    }
    
    body {
        font-size: 12pt;
        line-height: 1.5;
    }
    
    .page-break {
        page-break-after: always;
    }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* Accessibility: Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}