/* ========================================
   RESPONSIVE DESIGN
   Mobile-first breakpoints
   ======================================== */

/* ========== GLOBAL ADJUSTMENTS ========== */
/* Reduce hero bottom padding for consistent section spacing */
.hero {
    padding-bottom: var(--space-4xl) !important;
}

/* ========== INTERMEDIATE BREAKPOINT - Adjust Nav for Narrower Screens ========== */
/* Between 1100px and 1300px, reduce nav link spacing to prevent wrapping */
@media (min-width: 1101px) and (max-width: 1300px) {
    .nav-links {
        gap: var(--space-md); /* Reduce gap between links from 48px to 16px */
        flex-wrap: nowrap; /* Ensure links stay on one line */
    }
    
    .nav-link {
        font-size: 0.8rem; /* Slightly smaller font */
        white-space: nowrap; /* Prevent individual links from wrapping */
    }
}

/* ========== DESKTOP NAV TO MOBILE (1100px and below) ========== */
@media (max-width: 1100px) {
    /* Navigation */
    .nav-links {
        display: none;
    }
    
    .nav-actions .btn-contact {
        display: none;
    }
    
    .mobile-menu-toggle {
        display: flex;
    }
}

/* ========== TABLET (768px and below) ========== */
@media (max-width: 768px) {
    /* Improved mobile readability - larger base font */
    body {
        font-size: 17px;
    }
    
    p {
        font-size: 1rem; /* 17px instead of 0.95rem */
        line-height: 1.7;
    }
    
    /* Larger hero logo on mobile */
    .hero .hero-circle-logo,
    img.hero-circle-logo,
    #hero-logo {
        height: 220px !important;
        width: 220px !important;
        max-width: 220px !important;
        max-height: 220px !important;
    }
    
    .hero-logo {
        margin-bottom: var(--space-3xl) !important;
    }
    
    /* Container */
    .container {
        padding: 0 var(--space-lg);
    }
    
    /* Navigation */
    .nav-container {
        padding: 1rem var(--space-lg);
    }
    
    .logo-text {
        font-size: 1.1rem;
    }
    
    /* Hero */
    .hero {
        min-height: 80vh;
        padding: var(--space-4xl) var(--space-lg);
    }
    
    .hero-circle-logo {
        width: 250px;
        height: 250px;
    }
    
    .hero-value-props {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }
    
    .hero-cta {
        flex-direction: column;
        align-items: stretch;
    }
    
    .hero-cta .btn {
        width: 100%;
    }
    
    /* Sections */
    .section {
        padding: var(--space-3xl) 0;
    }
    
    /* Problem Grid */
    .problem-grid {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }
    
    /* Solution */
    .solution-content {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }
    
    .solution-diagram {
        min-height: 300px;
        padding: var(--space-2xl);
    }
    
    /* Features */
    .features-grid {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }
    
    /* What We Do */
    .what-we-do-grid {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }
    
    /* Value Props */
    .value-props-grid {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }
    
    /* Use Cases */
    .use-cases-grid {
        grid-template-columns: 1fr;
    }
    
    /* Technical */
    .technical-content {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }
    
    .code-block {
        font-size: 0.75rem;
        padding: var(--space-md);
    }
    
    /* CTA Form */
    .form-row {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }
    
    .cta-form {
        padding: var(--space-2xl) var(--space-lg);
    }
    
    /* Footer */
    .footer-container {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-xl);
    }
    
    .footer-nav {
        gap: var(--space-xl);
    }
    
    .footer-legal {
        text-align: left;
        width: 100%;
    }
    
    /* New Sections */
    .capabilities-grid {
        grid-template-columns: 1fr;
    }
    
    .events-list {
        grid-template-columns: 1fr;
    }
    
    .event-types {
        flex-direction: column;
        gap: var(--space-xl);
    }
    
    .contact-methods {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }
    
    /* Team Section */
    .team-grid {
        grid-template-columns: 1fr;
    }
    
    /* Flow Diagram */
    .flow-diagram {
        flex-direction: column;
        gap: var(--space-xl);
        padding: var(--space-2xl) var(--space-lg);
    }
    
    .flow-box {
        padding: var(--space-xl) var(--space-md);
    }
    
    .flow-arrow {
        transform: rotate(90deg);
        font-size: 1.25rem;
    }
    
    .flow-caption {
        padding: 0 var(--space-md);
    }
    
    /* Pilot/Design Partner */
    .pilot-benefits-grid {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }
    
    .pilot-audience-tags {
        flex-direction: column;
        align-items: stretch;
    }
    
    .audience-tag {
        text-align: center;
    }
    
    .pilot-feature-box {
        padding: var(--space-3xl) var(--space-2xl);
    }
}

/* ========== MOBILE (480px and below) ========== */
@media (max-width: 480px) {
    /* Typography adjustments */
    h1 {
        font-size: 2rem;
    }
    
    h2 {
        font-size: 1.75rem;
    }
    
    h3 {
        font-size: 1.25rem;
    }
    
    /* Container */
    .container {
        padding: 0 var(--space-md);
    }
    
    /* Navigation */
    .nav-container {
        padding: 1rem var(--space-md);
    }
    
    .logo-text {
        font-size: 1rem;
    }
    
    .theme-toggle {
        width: 36px;
        height: 36px;
    }
    
    /* Hero */
    .hero {
        padding: var(--space-3xl) var(--space-md);
    }
    
    .hero-circle-logo {
        width: 200px;
        height: 200px;
    }
    
    .hero-headline {
        font-size: 1.75rem;
    }
    
    .hero-subheadline {
        font-size: 1rem;
    }
    
    /* Buttons */
    .btn {
        padding: 0.875rem 1.5rem;
        font-size: 0.8rem;
    }
    
    .btn-large {
        padding: 1rem 2rem;
        font-size: 0.875rem;
    }
    
    /* Sections */
    .section {
        padding: var(--space-3xl) 0;
    }
    
    .section-header {
        margin-bottom: var(--space-xl);
    }
    
    .section-title {
        font-size: 0.8rem;
    }
    
    /* Cards */
    .feature-card,
    .use-case-card {
        padding: var(--space-xl);
    }
    
    /* Solution Features */
    .solution-feature {
        flex-direction: column;
        gap: var(--space-sm);
    }
    
    /* Code Example */
    .code-example {
        overflow-x: auto;
    }
    
    .code-header {
        font-size: 0.75rem;
        padding: var(--space-sm) var(--space-md);
    }
    
    /* CTA */
    .cta-title {
        font-size: 1.5rem;
    }
    
    .cta-subtitle {
        font-size: 1rem;
    }
    
    .cta-form {
        padding: var(--space-xl) var(--space-md);
    }
    
    /* Footer */
    .footer {
        padding: var(--space-2xl) 0;
    }
    
    .footer-nav {
        flex-direction: column;
        gap: var(--space-md);
    }
    
    .footer-copyright {
        font-size: 0.75rem;
        line-height: 1.6;
    }
    
    /* New Sections Mobile */
    .hero-insight {
        padding: 0;
        margin: var(--space-2xl) auto;
    }
    
    .hero-insight p {
        font-size: 0.95rem;
    }
    
    .about-paragraph-large {
        font-size: 1.25rem;
    }
    
    .event-types {
        gap: var(--space-lg);
    }
    
    .icon-graphic {
        width: 28px;
        height: 28px;
    }
    
    /* Hero Value Props Mobile */
    .hero-value-item {
        padding: var(--space-lg);
    }
    
    .hero-value-label {
        font-size: 0.7rem;
    }
    
    .hero-value-text {
        font-size: 0.85rem;
    }
    
    /* What We Do Mobile */
    .what-we-do-card {
        padding: var(--space-xl);
    }
    
    /* Value Props Mobile */
    .value-prop-card {
        padding: var(--space-2xl);
    }
    
    .value-prop-card h4 {
        font-size: 1.25rem;
    }
    
    .value-prop-benefit {
        font-size: 0.9rem;
    }
    
    .value-prop-how {
        font-size: 0.8rem;
    }
    
    /* Pilot Mobile */
    .pilot-description-large {
        font-size: 1.1rem;
    }
    
    .pilot-value-text {
        font-size: 1rem;
    }
    
    .pilot-feature-box {
        padding: var(--space-2xl) var(--space-lg);
    }
    
    /* Team Cards Mobile */
    .team-card {
        padding: var(--space-xl);
    }
    
    .team-member-name {
        font-size: 1.1rem;
    }
    
    .team-member-bio {
        font-size: 0.85rem;
    }
    
    .team-linkedin {
        bottom: var(--space-md);
        right: var(--space-xl);
    }
}

/* ========== LARGE DESKTOP (1400px and above) ========== */
@media (min-width: 1400px) {
    .container {
        padding: 0 var(--space-3xl);
    }
    
    .nav-container {
        padding: 1.5rem var(--space-3xl);
    }
    
    .section {
        padding: var(--space-5xl) 0;
    }
}

/* ========== PRINT STYLES ========== */
@media print {
    .nav,
    .mobile-menu-toggle,
    .theme-toggle,
    .scroll-indicator,
    .cta-form,
    .footer {
        display: none;
    }
    
    body {
        background: white;
        color: black;
    }
    
    .section {
        page-break-inside: avoid;
    }
}

/* ========== LANDSCAPE MOBILE ========== */
@media (max-height: 600px) and (orientation: landscape) {
    .hero {
        min-height: auto;
        padding: var(--space-4xl) var(--space-2xl);
    }
    
    .scroll-indicator {
        display: none;
    }
}

/* ========== TOUCH DEVICE OPTIMIZATIONS ========== */
@media (hover: none) and (pointer: coarse) {
    /* Increase tap target sizes */
    .nav-link,
    .mobile-menu-link,
    .footer-link {
        padding: var(--space-sm) 0;
    }
    
    .btn {
        padding: 1.125rem 2.25rem;
    }
    
    /* Remove hover effects on touch devices */
    .feature-card:hover,
    .use-case-card:hover {
        transform: none;
    }
}

/* ========== HIGH RESOLUTION DISPLAYS ========== */
@media (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 192dpi) {
    /* Ensure crisp rendering on retina displays */
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

/* ========== DARK MODE PREFERENCE ========== */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        /* Apply dark theme by default if no theme set */
        --text-primary: var(--pure-white);
        --text-secondary: var(--grey-400);
        --text-muted: var(--grey-500);
        --background: var(--pure-black);
        --background-elevated: var(--grey-900);
        --background-card: var(--grey-800);
        --background-card-hover: #2a2a2a;
        --border: #2a2a2a;
        --border-subtle: var(--grey-800);
    }
}

/* ========== LIGHT MODE PREFERENCE ========== */
@media (prefers-color-scheme: light) {
    :root:not([data-theme]) {
        /* Apply light theme by default if no theme set */
        --text-primary: var(--pure-black);
        --text-secondary: var(--grey-600);
        --text-muted: var(--grey-500);
        --background: var(--pure-white);
        --background-elevated: var(--grey-50);
        --background-card: var(--grey-100);
        --background-card-hover: var(--grey-200);
        --border: var(--grey-200);
        --border-subtle: var(--grey-100);
    }
}