/* ==========================================================================
   Utilities - Helper Classes, Responsive Design
   ========================================================================== */

/* ==========================================================================
   Utility Classes for Common Patterns
   ========================================================================== */

/* Spacing utilities - Margin */
.mb-4xl { margin-bottom: var(--spacing-4xl); }
.mb-3xl { margin-bottom: var(--spacing-3xl); }
.mb-2xl { margin-bottom: var(--spacing-2xl); }
.mb-xl { margin-bottom: var(--spacing-xl); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-xs { margin-bottom: var(--spacing-xs); }

.mt-4xl { margin-top: var(--spacing-4xl); }
.mt-3xl { margin-top: var(--spacing-3xl); }
.mt-2xl { margin-top: var(--spacing-2xl); }
.mt-xl { margin-top: var(--spacing-xl); }
.mt-lg { margin-top: var(--spacing-lg); }
.mt-md { margin-top: var(--spacing-md); }
.mt-sm { margin-top: var(--spacing-sm); }
.mt-xs { margin-top: var(--spacing-xs); }

/* Spacing utilities - Padding */
.p-4xl { padding: var(--spacing-4xl); }
.p-3xl { padding: var(--spacing-3xl); }
.p-2xl { padding: var(--spacing-2xl); }
.p-xl { padding: var(--spacing-xl); }
.p-lg { padding: var(--spacing-lg); }
.p-md { padding: var(--spacing-md); }
.p-sm { padding: var(--spacing-sm); }
.p-xs { padding: var(--spacing-xs); }

.py-4xl { padding-top: var(--spacing-4xl); padding-bottom: var(--spacing-4xl); }
.py-3xl { padding-top: var(--spacing-3xl); padding-bottom: var(--spacing-3xl); }
.py-2xl { padding-top: var(--spacing-2xl); padding-bottom: var(--spacing-2xl); }
.py-xl { padding-top: var(--spacing-xl); padding-bottom: var(--spacing-xl); }
.py-lg { padding-top: var(--spacing-lg); padding-bottom: var(--spacing-lg); }
.py-md { padding-top: var(--spacing-md); padding-bottom: var(--spacing-md); }

.px-4xl { padding-left: var(--spacing-4xl); padding-right: var(--spacing-4xl); }
.px-3xl { padding-left: var(--spacing-3xl); padding-right: var(--spacing-3xl); }
.px-2xl { padding-left: var(--spacing-2xl); padding-right: var(--spacing-2xl); }
.px-xl { padding-left: var(--spacing-xl); padding-right: var(--spacing-xl); }
.px-lg { padding-left: var(--spacing-lg); padding-right: var(--spacing-lg); }
.px-md { padding-left: var(--spacing-md); padding-right: var(--spacing-md); }

/* Text alignment */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* Text utilities - Text transform */
.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }
.normal-case { text-transform: none; }

/* Icon sizing */
.icon-lg { font-size: 2.2rem; }
.icon-md { font-size: 1.8rem; }
.icon-sm { font-size: 1.4rem; }

/* Hover effect utilities - lift effects removed, using scale effect instead */
.hover-scale {
    transition: transform var(--transition-slow) var(--transition-easing);
}

.hover-scale:hover {
    transform: scale(1.02);
}

/* ==========================================================================
   Common Patterns (for reference)
   ========================================================================== */

/* Hover scale effect - Used in:
   - .card:hover (components.css)
   - .feature-item:hover (components.css)
   - .highlight-item:hover (components.css)
   - .why-choose-item:hover (components.css)
   - .overview-photo:hover (layout.css)
   - .trust-photo:hover (layout.css)

   Pattern:
   .element {
       transition: transform var(--transition-slow) var(--transition-easing);
   }
   .element:hover {
       transform: scale(1.02);
   }

   Note: This pattern is duplicated across multiple components. Consider extracting to
   .hover-scale utility class (defined above) when refactoring individual components.
*/

/* Display utilities */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.items-stretch { align-items: stretch; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.justify-around { justify-content: space-around; }
.gap-sm { gap: var(--spacing-sm); }
.gap-md { gap: var(--spacing-md); }
.gap-lg { gap: var(--spacing-lg); }
.gap-xl { gap: var(--spacing-xl); }
.gap-2xl { gap: var(--spacing-2xl); }

/* ==========================================================================
   Grid Utilities
   ========================================================================== */

/* Base grid class */
.grid { display: grid; }

/* Complete grid utilities - include display, columns, and gap */
/* Auto-fit grid for responsive layouts (commonly used for lists) */
/* Max 2 columns by default, mobile breakpoint (768px) overrides to single column */
.grid-auto-fit {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-2xl);
    list-style: none;
    padding: 0;
}

/* Width utilities */
.w-full { width: 100%; }
.w-auto { width: auto; }
.max-w-full { max-width: 100%; }

/* Overflow utilities */
.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }
.overflow-visible { overflow: visible; }

/* ==========================================================================
   Responsive Design
   ========================================================================== */
/* 
 * Responsive Breakpoint Strategy:
 * - Breakpoints: xs (480px), sm (768px), md (1024px), lg (1200px)
 * - Mobile-first approach: base styles for mobile, enhancements for larger screens
 * - All media queries use max-width for progressive enhancement
 * - Breakpoint values defined in base.css for reference (CSS variables cannot be used in @media queries)
 */

/* Mobile Responsive */
@media (max-width: 768px) {
    /* Breakpoint: --breakpoint-sm (768px) - Note: CSS variables cannot be used in media queries */
    /* Base Styles */
    .container {
        padding: 0 var(--spacing-md);
    }

    /* Navigation */
    .nav-container {
        padding: var(--spacing-lg) var(--spacing-lg);
    }

    .nav-logo-img {
        height: 40px;
    }

    .cta-button {
        padding: var(--spacing-xs) var(--spacing-md);
        font-size: 0.9rem;
    }

    /* Banner - Homepage and AI page mobile styles */
    .banner-home,
    .banner-ai {
        height: 85vh;
    }

    .banner-text h1 {
        font-size: 1.8rem;
    }

    /* Typography */
    h2 {
        font-size: 2rem;
        margin-bottom: var(--spacing-xl);
    }

    h3 {
        font-size: 1.3rem;
    }

    /* Services */
    .section--padded-lg {
        padding: var(--spacing-3xl) 0;
    }

    #ai-services .services-intro,
    .mfg-intro {
        margin-top: 0;
    }

    /* Grid layouts - all single column on mobile */
    .service-features,
    .project-images,
    .project-highlights,
    .why-choose-grid,
    .grid-auto-fit {
        grid-template-columns: 1fr !important;
        gap: var(--spacing-md);
    }

    /* Ensure placeholder images stack properly on mobile */
    .project-images:has(.project-image-placeholder) {
        gap: var(--spacing-md) !important;
    }

    .feature-item {
        padding: var(--spacing-md);
    }

    /* Projects */
    .projects-header {
        padding: var(--spacing-xl) 0 var(--spacing-md) 0;
    }

    .projects-header h2 {
        font-size: 2rem;
    }

    .projects-content {
        padding: var(--spacing-md) 0 var(--spacing-3xl) 0;
        padding-left: var(--spacing-md);
        padding-right: var(--spacing-md);
    }

    .project-showcase {
        padding: var(--spacing-xl) var(--spacing-lg);
        margin-bottom: var(--spacing-xl);
    }

    .project-showcase h3 {
        font-size: 1.5rem;
    }
    
    /* Ensure images fill full width on mobile */
    .project-image,
    .project-image-placeholder {
        width: 100%;
    }

    .highlight-item {
        padding: var(--spacing-sm) var(--spacing-md);
        gap: var(--spacing-sm);
    }

    /* Why Choose Section */
    .section--padded-lg-bottom-xl {
        padding: var(--spacing-3xl) 0 var(--spacing-5xl) 0;
    }

    .section--copper-dark h2 {
        font-size: 2rem;
        margin-bottom: var(--spacing-xl);
    }

    .why-choose-grid {
        margin-bottom: var(--spacing-3xl);
    }

    .why-choose-item {
        padding: var(--spacing-xl) var(--spacing-lg);
    }

    .why-choose-item h3 {
        font-size: 1.2rem;
    }

    .cta-text {
        font-size: 1.1rem;
    }

    .cta-actions {
        gap: var(--spacing-lg);
    }

    /* Footer */
    .footer {
        padding: var(--spacing-lg) 0;
    }

    .footer p {
        font-size: 0.8rem;
        color: var(--color-light-gray);
    }
}

/* Tablet Responsive */
@media (max-width: 1024px) {
    /* Breakpoint: --breakpoint-md (1024px) - Note: CSS variables cannot be used in media queries */
    /* Navigation */
    .nav-container {
        padding: var(--spacing-xl) var(--spacing-xl);
    }

    .nav-logo-img {
        height: 40px;
    }

    /* Banner */
    .banner-text h1 {
        font-size: 2.25rem;
    }

    /* Grid layouts - responsive auto-fit on tablet */
    .service-features {
        grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
    }

    /* Projects */
    .projects-content {
        padding: var(--spacing-lg) var(--spacing-lg) var(--spacing-4xl) var(--spacing-lg);
    }

    .project-showcase {
        padding: var(--spacing-xl) var(--spacing-lg);
    }

    .project-images {
        grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
        gap: var(--spacing-md);
    }

    .project-highlights {
        grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
        gap: var(--spacing-md);
    }

    /* Why Choose */
    .why-choose-grid {
        grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
        gap: var(--spacing-xl);
    }
}

/* Very Small Devices (phones in portrait, < 480px) */
@media (max-width: 480px) {
    /* Breakpoint: --breakpoint-xs (480px) - Note: CSS variables cannot be used in media queries */
    /* Navigation - prevent button overflow */
    .nav-container {
        padding: var(--spacing-md) var(--spacing-md);
        width: 100%;
        margin-top: var(--spacing-xs);
    }

    .nav-logo-img {
        height: 32px;
    }

    .nav-actions {
        gap: var(--spacing-xs);
        flex-shrink: 1;
        min-width: 0;
    }

    .cta-button {
        padding: var(--spacing-xs) var(--spacing-sm);
        font-size: 0.7rem;
        letter-spacing: 0.2px;
    }

    /* Service cards - ensure single column and centered */
    .grid-auto-fit {
        grid-template-columns: 1fr !important;
        justify-items: center;
        gap: var(--spacing-md);
    }

    .feature-item {
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
    }

    /* Container padding for very small devices */
    .container {
        padding: 0 var(--spacing-sm);
    }

    /* Card padding adjustments */
    .card--padded-lg {
        padding: var(--spacing-xl) var(--spacing-md);
    }
}


/* ==========================================================================
   Safari Compatibility
   ========================================================================== */

/* Respect user accessibility preferences */
@media screen and (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;
    }
    
    html {
        scroll-behavior: auto !important;
    }
}

/* Ensure good contrast for high contrast mode */
@media screen and (prefers-contrast: high) {
    body {
        background-color: var(--color-white);
        color: var(--color-midnight);
    }

    .banner {
        background-color: var(--color-light-gray);
    }
    
    a:focus-visible,
    button:focus-visible {
        outline-width: 4px;
    }
}

/* Safari-specific optimizations for general compatibility */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    body {
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
    }
}