/* ========================================
   Zack AI — Mobile Polish
   Comprehensive mobile improvements for
   375px, 390px, 414px (iPhone widths)
   ======================================== */

/* ===== Global Touch Target Enforcement ===== */
/* WCAG 2.1 requires 44×44px min touch targets */
/* Scoped to interactive elements, NOT inline links in paragraphs */

@media (max-width: 768px) {
    button, [role="button"], input[type="submit"],
    input[type="button"], .btn, select,
    nav a, .drawer-link, .drawer-sublink, .footer-col a {
        min-height: 44px;
    }
}

/* Ensure tap-highlight is subtle and branded */
* {
    -webkit-tap-highlight-color: rgba(0, 212, 255, 0.15);
}

/* ===== Prevent Horizontal Scroll ===== */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

/* ===== Mobile Nav Drawer Enhancements ===== */
@media (max-width: 768px) {

    /* Smoother drawer slide + spring bounce */
    .mobile-drawer {
        will-change: transform;
        transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
        -webkit-overflow-scrolling: touch;
        padding-bottom: env(safe-area-inset-bottom, 16px);
    }
    .mobile-drawer.open {
        transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
    }

    /* Ensure drawer links have proper touch targets */
    .drawer-link {
        min-height: 48px;
        padding: 14px 20px;
    }
    .drawer-sublink {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
    .drawer-cta {
        min-height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Mobile navbar padding for safe area */
    .navbar {
        padding-left: env(safe-area-inset-left, 0);
        padding-right: env(safe-area-inset-right, 0);
    }
}

/* ===== Hero Sections — Mobile Optimisations ===== */
@media (max-width: 768px) {

    /* Homepage hero: show Zack character as smaller element */
    .hero-visual {
        max-width: 300px;
        margin: 0 auto;
    }
    .hero-video-wrapper {
        max-width: 100%;
        border-radius: 16px;
    }
    .hero-play-btn {
        width: 56px;
        height: 56px;
    }
    .hero-play-btn svg {
        width: 22px;
        height: 22px;
    }

    /* Hero badges — prevent overflow */
    .hero-badge, .demo-hero-badge {
        font-size: 12px;
        padding: 6px 14px;
        max-width: 100%;
        text-align: center;
    }

    /* Hero CTA buttons — stack full width */
    .hero-cta {
        flex-direction: column;
        width: 100%;
    }
    .hero-cta .btn,
    .hero-cta .btn-primary,
    .hero-cta .btn-secondary {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    /* Hero stats — wrap tighter */
    .hero-stats {
        gap: 20px;
    }

    /* Ensure no text overflow on hero titles */
    .hero-title {
        word-break: break-word;
        hyphens: auto;
        -webkit-hyphens: auto;
    }
}

@media (max-width: 414px) {
    /* iPhone Pro Max / Plus */
    .hero-title {
        font-size: clamp(28px, 8vw, 40px);
    }
    .hero-subtitle {
        font-size: 15px;
        line-height: 1.6;
    }
    .hero-tagline {
        font-size: 12px;
        letter-spacing: 2px;
    }
}

@media (max-width: 375px) {
    /* iPhone SE / mini */
    .hero-title {
        font-size: clamp(24px, 7.5vw, 36px);
    }
    .hero-subtitle {
        font-size: 14px;
    }
    .hero-badge {
        font-size: 11px;
        padding: 6px 12px;
    }
    .stat-number {
        font-size: 26px !important;
    }
    .stat-label {
        font-size: 10px;
    }
}

/* ===== Services Page — Mobile ===== */
@media (max-width: 768px) {
    .service-section {
        padding: 48px 16px;
    }
    .service-features {
        grid-template-columns: 1fr;
    }
    .service-feature {
        padding: 14px 16px;
        min-height: 44px;
    }
    .service-cta-row {
        flex-direction: column;
        width: 100%;
    }
    .service-cta-row .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ===== Portfolio — Mobile Grid & Lightbox ===== */
@media (max-width: 768px) {
    /* Filter tabs — horizontal scroll */
    .filter-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -ms-overflow-style: none;
        gap: 8px;
        padding-bottom: 8px;
    }
    .filter-tabs::-webkit-scrollbar {
        display: none;
    }
    .filter-tab {
        scroll-snap-align: start;
        flex-shrink: 0;
        white-space: nowrap;
    }

    /* Portfolio cards — full width on mobile */
    .portfolio-grid {
        grid-template-columns: 1fr;
    }

    /* Lightbox — full screen on mobile */
    .lightbox-inner {
        max-width: 100%;
        max-height: 100vh;
        margin: 0;
        border-radius: 0;
    }
    .lightbox-close {
        top: 12px;
        right: 12px;
        width: 44px;
        height: 44px;
        z-index: 10;
    }
}

/* ===== Demo Page — Mobile Chat ===== */
@media (max-width: 768px) {
    .scenario-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .scenario-card {
        padding: 16px 12px;
        min-height: 44px;
    }
    /* Chat window fits viewport */
    .chat-window {
        border-radius: 12px;
        margin: 0 -8px;
    }
}

@media (max-width: 390px) {
    .scenario-grid {
        grid-template-columns: 1fr;
    }
    .scenario-card {
        flex-direction: row;
        text-align: left;
        gap: 12px;
    }
}

/* ===== Pricing — Mobile Cards ===== */
@media (max-width: 768px) {
    .pricing-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin: 0 auto;
    }
    .pricing-card {
        padding: 32px 24px;
    }
    .pricing-card.featured {
        transform: none;
    }
    /* Comparison table scroll hint */
    .comparison-wrapper {
        position: relative;
    }
    .comparison-wrapper::after {
        content: 'Scroll →';
        position: absolute;
        top: -24px;
        right: 0;
        font-size: 12px;
        color: #6b7f8e;
        animation: fadeHint 4s ease forwards;
    }
    @keyframes fadeHint {
        0%, 60% { opacity: 1; }
        100% { opacity: 0; display: none; }
    }
}

/* ===== About — Mobile ===== */
@media (max-width: 768px) {
    .team-card {
        padding: 24px;
    }
    .team-card img {
        width: 80px;
        height: 80px;
    }
}

/* ===== Contact — Mobile Form ===== */
@media (max-width: 768px) {
    .form-card {
        padding: 24px 16px;
    }
    .form-card input,
    .form-card select,
    .form-card textarea {
        font-size: 16px; /* Prevents iOS zoom on focus */
    }
}

/* ===== Security — Mobile ===== */
@media (max-width: 768px) {
    .terminal-body {
        font-size: 12px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ===== Video Embeds — Responsive ===== */
video, iframe[src*="youtube"], iframe[src*="vimeo"] {
    max-width: 100%;
    height: auto;
}
.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    overflow: hidden;
}
.video-container iframe,
.video-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* ===== Buttons — Mobile Touch Targets ===== */
@media (max-width: 768px) {
    .btn {
        min-height: 48px;
        padding: 14px 24px;
        font-size: 15px;
    }
    .btn-large {
        padding: 16px 28px;
    }

    /* Full-width CTAs on small screens */
    .services-cta-buttons,
    .cta-buttons {
        flex-direction: column;
        align-items: stretch;
    }
    .services-cta-buttons .btn,
    .cta-buttons .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ===== Cookie Banner — Mobile ===== */
@media (max-width: 480px) {
    .cookie-banner {
        padding-bottom: calc(16px + env(safe-area-inset-bottom, 0));
    }
    .cookie-btn {
        min-height: 44px;
        flex: 1;
    }
}

/* ===== Floating Elements — Mobile Safe Area ===== */
@media (max-width: 768px) {
    .floating-cta {
        bottom: calc(16px + env(safe-area-inset-bottom, 0));
    }
    .back-to-top {
        bottom: calc(16px + env(safe-area-inset-bottom, 0));
    }
    .floating-cta.visible ~ .back-to-top.visible {
        bottom: calc(72px + env(safe-area-inset-bottom, 0));
    }
}

/* ===== Lazy Load — Below Fold Images ===== */
img[loading="lazy"] {
    content-visibility: auto;
}

/* Placeholder shimmer for lazy images */
img[data-src]:not([src]) {
    background: linear-gradient(
        90deg,
        rgba(17, 24, 39, 0.8) 0%,
        rgba(0, 212, 255, 0.05) 50%,
        rgba(17, 24, 39, 0.8) 100%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
    min-height: 200px;
}
@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ===== Text Selection — Brand Colours ===== */
::selection {
    background: rgba(0, 212, 255, 0.3);
    color: #fff;
}

/* ===== Print Styles — Basic ===== */
@media print {
    .navbar, .mobile-drawer, .mobile-drawer-backdrop,
    .floating-cta, .back-to-top, .cookie-banner,
    .scroll-progress, .exit-overlay, .floating-orbs,
    .bg-grid, .bg-gradient {
        display: none !important;
    }
    body {
        background: #fff;
        color: #000;
    }
}

/* ===== Accessibility — Focus Visible ===== */
@media (max-width: 768px) {
    :focus-visible {
        outline: 2px solid #00d4ff;
        outline-offset: 2px;
    }
}

/* Remove hover effects on touch devices */
@media (hover: none) and (pointer: coarse) {
    .btn:hover,
    .btn-primary:hover,
    .btn-secondary:hover,
    .service-icon-card:hover,
    .dropdown-item:hover,
    .service-feature:hover,
    .pricing-card:hover {
        transform: none !important;
        box-shadow: none;
    }
}

/* ===== Container edge-to-edge on very small screens ===== */
@media (max-width: 375px) {
    .container {
        padding: 0 12px;
    }
    section {
        padding-left: 12px;
        padding-right: 12px;
    }
}

/* ===== Swipe Indicator for Carousels ===== */
.swipe-indicator {
    display: none;
    text-align: center;
    padding: 8px 0;
    color: #6b7f8e;
    font-size: 12px;
    gap: 6px;
    align-items: center;
    justify-content: center;
}
.swipe-indicator svg {
    width: 16px;
    height: 16px;
    stroke: #6b7f8e;
    animation: swipeHint 2s ease-in-out infinite;
}
@keyframes swipeHint {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(8px); }
}
@media (max-width: 768px) {
    .swipe-indicator {
        display: flex;
    }
}

/* ===== Social Proof — Mobile ===== */
@media (max-width: 768px) {
    .proof-logos {
        flex-wrap: wrap;
        gap: 12px;
        justify-content: center;
    }
    .logo-item {
        font-size: 12px;
        padding: 6px 12px;
    }
}

/* ===== Search Overlay — Mobile ===== */
@media (max-width: 768px) {
    .search-overlay .search-modal {
        max-width: 100%;
        margin: 12px;
        border-radius: 16px;
        max-height: calc(100vh - 24px);
    }
    .search-overlay .search-input {
        font-size: 16px; /* Prevent iOS zoom */
    }
}

/* ===== Lead Capture — Extra Small ===== */
@media (max-width: 375px) {
    .lead-capture--full {
        padding: 40px 12px;
    }
    .lead-capture__badge {
        font-size: 11px;
        padding: 6px 12px;
    }
    .lead-capture__consent {
        gap: 8px;
    }
}

/* ===== FAQ Accordion — Touch Targets ===== */
@media (max-width: 768px) {
    .faq-question {
        min-height: 48px;
        padding: 16px;
    }
}

/* ===== iOS Safe Areas ===== */
/* Additive: preserve base padding (18/14px) + safe-area inset for notched devices */
@supports (padding: env(safe-area-inset-top)) {
    .navbar {
        padding-top: calc(18px + env(safe-area-inset-top, 0px));
    }
    .navbar.nav-scrolled {
        padding-top: calc(12px + env(safe-area-inset-top, 0px));
    }
    @media (max-width: 768px) {
        .navbar {
            padding-top: calc(14px + env(safe-area-inset-top, 0px));
        }
        .navbar.nav-scrolled {
            padding-top: calc(10px + env(safe-area-inset-top, 0px));
        }
    }
    .footer {
        padding-bottom: calc(32px + env(safe-area-inset-bottom, 0));
    }
}