/* ========================================
   LAYOUT SYSTEM
   Apple HIG-inspired layout with grid and flexbox
   ======================================== */

/* Base Layout */
html {
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
    background: #FFFFFF !important;
}

/* Flexbox Utilities */
.flex {
    display: flex;
}

.flex-row {
    flex-direction: row;
}

.flex-col {
    flex-direction: column;
}

.flex-wrap {
    flex-wrap: wrap;
}

.items-center {
    align-items: center;
}

.items-start {
    align-items: flex-start;
}

.items-end {
    align-items: flex-end;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.justify-start {
    justify-content: flex-start;
}

.justify-end {
    justify-content: flex-end;
}

/* Grid Utilities */
.grid {
    display: grid;
}

.grid-cols-1 { grid-template-columns: 1fr; }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

.grid-auto-fit {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.grid-auto-fit-sm {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.grid-auto-fit-lg {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* Positioning */
.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.fixed {
    position: fixed;
}

.sticky {
    position: sticky;
}

.z-1 { z-index: 1; }
.z-10 { z-index: 10; }
.z-50 { z-index: 50; }
.z-100 { z-index: 100; }
.z-999 { z-index: 999; }
.z-1000 { z-index: 1000; }
.z-1001 { z-index: 1001; }
.z-1002 { z-index: 1002; }

/* Width and Height */
.w-full { width: 100%; }
.w-auto { width: auto; }
.h-full { height: 100%; }
.h-auto { height: auto; }

/* Display */
.block { display: block; }
.inline { display: inline; }
.inline-block { display: inline-block; }
.inline-flex { display: inline-flex; }
.hidden { display: none; }

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

/* Navbar Layout */
.navbar {
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.navbar-content {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    display: flex;
    align-items: center;
}

.nav-links {
    display: flex;
    list-style: none;
    align-items: center;
}

/* Hero Layout */
.hero-content {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
    position: relative;
    z-index: 1;
}

.hero-image {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.hero-buttons {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
    align-items: center;
}

/* Grid Layouts for Components */

/* Services Grid */
.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8);
}

/* Products Grid */
.products-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-8);
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

/* Pillars Grid */
.pillars-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
}

/* Testimonial Grid */
.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8);
}

/* Client Logos Grid */
.client-logos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-6);
    align-items: center;
}

/* Team Grid */
.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-10);
}

/* Features Grid */
.features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-12);
}

/* Solutions Grid */
.solutions-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-12);
}

/* Footer Layout */
.footer-content {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
}

/* Section Headers */
.section-header {
    text-align: center;
}

/* Mobile Menu */
.mobile-menu-wrapper {
    display: none;
    position: fixed;
    top: 69px;
    left: 0;
    right: 0;
    z-index: 999;
    max-height: calc(100vh - 69px);
    overflow-y: auto;
}

.mobile-menu-wrapper.active {
    display: block;
}

/* Hamburger Menu */
.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
    z-index: 1002;
    padding: var(--space-2);
}

/* Dropdown */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    min-width: 220px;
    z-index: 1001;
    top: 100%;
    padding-top: 8px;
}

/* Create invisible bridge for smooth mouse transition */
.dropdown-content::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 0;
    right: 0;
    height: 8px;
    background: transparent;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.mobile-menu-wrapper .dropdown {
    width: 100%;
}

.mobile-menu-wrapper .dropdown-content {
    position: static;
    display: none;
}

.mobile-menu-wrapper .dropdown.active .dropdown-content {
    display: block;
}

/* About Content Layout */
.about-content {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: var(--space-16);
    align-items: center;
}

/* Responsive Layout */
@media (max-width: 1024px) {
    .hero-content {
        grid-template-columns: 1fr;
        gap: var(--space-12);
    }

    .services-grid,
    .products-grid {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }

    .pillars-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-6);
    }

    .testimonial-grid,
    .features-grid,
    .solutions-grid {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }

    .footer-content {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-12);
    }

    .about-content {
        grid-template-columns: 1fr;
        gap: var(--space-10);
    }
    
    .about-content .about-image {
        order: 2;
    }
    
    .about-content .about-text {
        order: 1;
    }

    .team-grid {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: var(--space-8);
    }
}

@media (max-width: 768px) {
    .hamburger {
        display: flex;
    }

    .nav-links {
        display: none;
    }

    .navbar-content > .cta-button {
        display: none;
    }

    .mobile-menu-wrapper .nav-links {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .mobile-menu-wrapper .nav-links li {
        width: 100%;
    }

    .mobile-menu-wrapper .nav-links a {
        display: block;
        width: 100%;
        box-sizing: border-box;
        white-space: nowrap;
    }

    .mobile-menu-wrapper .dropdown > a {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .mobile-menu-wrapper .cta-button {
        display: inline-flex !important;
        justify-content: center;
        align-items: center;
        width: calc(100% - 10%);
        margin-left: 5%;
        margin-right: 5%;
    }

    .pillars-grid,
    .team-grid {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }

    .footer-content {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }
    
    .hero-buttons {
        gap: var(--space-3);
    }
    
    .services-grid,
    .testimonial-grid {
        gap: var(--space-6);
    }
}

/* Smooth Animations */
* {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}