/*
 * SaintsLink – Mobile Optimisation Stylesheet (Stages 2-4)
 * -----------------------------------------------------------
 * Stage 2: Scroll-lock safety & interaction stability
 * Stage 3: Mobile performance & animation reduction
 * Stage 4: Horizontal overflow elimination & responsive polish
 *
 * All rules are scoped to mobile/touch breakpoints only.
 * Desktop behaviour is intentionally unchanged.
 */

/* ============================================================
   STAGE 2 – SCROLL-LOCK & INTERACTION STABILITY
   ============================================================ */

/*
 * iOS Safari scroll-lock: overflow:hidden on body doesn't work on iOS.
 * The only reliable method is position:fixed on body.
 * JS sets body.style.top = -scrollY before fixing, then restores on unlock.
 * The .sl-scroll-locked class is used as a CSS hook only.
 */
html.sl-scroll-locked {
    overflow: hidden !important;
    overscroll-behavior: none;
}

html.sl-scroll-locked body {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
    overflow: hidden !important; /* completely prevent scroll */
    overscroll-behavior: none;
}

/*
 * Ensure overlays don't leave a residual click-blocking layer.
 * Any overlay that is NOT active must pass through pointer events.
 */
.modal:not(.active),
.ep-modal-overlay:not(.active),
#wws-modal:not(.active) {
    pointer-events: none;
}

/* Mobile menu overlay – ensure it never blocks body scroll when closed */
#mobile-menu:not(.active) {
    pointer-events: none;
    visibility: hidden;
}

#mobile-menu.active {
    pointer-events: auto;
    visibility: visible;
}

/* Touch targets – all interactive elements must meet 44×44 px minimum */
@media (pointer: coarse) {
    .nav-cta,
    .btn-primary,
    .btn-secondary,
    .btn-outline,
    .mobile-link,
    .mobile-dropdown-trigger,
    .mobile-menu-btn {
        min-height: 44px;
        min-width: 44px;
        touch-action: manipulation;
    }

    /* Theme toggle button */
    .theme-toggle-btn {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Service accordion toggle */
    .service-toggle {
        min-height: 52px;
    }
}


/* ============================================================
   STAGE 3 – MOBILE PERFORMANCE & ANIMATION REDUCTION
   ============================================================ */

/*
 * On coarse-pointer (touch) devices, disable expensive desktop-only
 * animations that serve no functional purpose on mobile and cause
 * layout work / monopolise the main thread.
 *
 * We target @media (pointer: coarse) so desktop trackpads & mice
 * (fine pointer) are completely unaffected.
 */
@media (pointer: coarse) {

    /* ---- Logo letter collapse animation ---- */
    /* Simplify – keep the visual result, remove the springy per-letter delays */
    .logo-letter {
        transition: opacity 0.25s ease, max-width 0.25s ease;
        will-change: auto; /* remove will-change on mobile */
    }

    /* ---- Hover transforms that cause repaints on touch ---- */
    .package-card:hover,
    .service-category:hover,
    .btn-primary:hover,
    .btn-secondary:hover,
    .nav-cta:hover,
    .btn-outline:hover {
        transform: none;
    }

    /* ---- Hero visual parallax CSS vars (set by JS, but no transform applied) ---- */
    .hero-visual {
        transform: none !important;
    }

    .hero-visual .hv-panel--main,
    .hero-visual .hv-panel--side {
        transform: none !important;
        transition: none !important;
    }

    /* ---- Background ambient gradient follow (set by pointermove in JS) ---- */
    /* Still works visually but JS no longer fires on mobile after Stage 3 JS fix */

    /* ---- Reduce map-system animation cost ---- */
    .satellite-node {
        animation-duration: 120s; /* halve orbital speed = halve rAF cost */
    }

    /* ---- Heavy backdrop filters on mobile (expensive on Safari) ---- */
    /* Keep blur on nav (important for readability) but remove on decorative panels */
    .hv-panel {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    /* ---- Eco-network hover transitions ---- */
    .eco-node:hover,
    .eco-node:focus-visible {
        transform: none;
    }

    /* ---- Card hover lifts ---- */
    .cap-card:hover,
    .industry-card:hover,
    .why-tile:hover {
        transform: none;
    }

    /* ---- Reduce intersection-observer-triggered reveal transition time ---- */
    .reveal {
        transition-duration: 0.3s !important;
    }

    /* ---- Timeline track fill animation (less work) ---- */
    .hp-timeline-track::after {
        transition-duration: 0.8s;
    }

    /* ---- Homepage btn-inside ambient animation ---- */
    body.home .btn-inside::before,
    body.home #inside-btn::before {
        animation: none;
        opacity: 0.2;
    }

    /* ---- Homepage hero btn sheen ---- */
    body.home .btn-primary::after {
        display: none; /* remove the translateX sheen on touch */
    }

    /* ---- Disable map-node orbital reveal on mobile (too many compositing layers) ---- */
    .map-node {
        transition-duration: 0.25s;
    }

    /* ---- Node-label white-space wraps better on small screens ---- */
    .node-label {
        white-space: normal;
        text-align: center;
    }
}

/* prefers-reduced-motion – always respected */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }

    .satellite-node {
        animation: none;
    }

    .hp-timeline-track::after {
        transition: none;
    }
}


/* ============================================================
   STAGE 4 – HORIZONTAL OVERFLOW & RESPONSIVE POLISH
   ============================================================ */

body {
    overflow-x: hidden;
    max-width: 100vw;
}

/*
 * Map system section – .map-system-container has a fixed height of 900px
 * which overflows horizontally on narrow viewports. Clip it tightly.
 */
@media (max-width: 900px) {
    .map-system-section {
        overflow: hidden;
        min-height: unset;
    }

    .map-system-container {
        height: auto;
        min-height: 500px;
        overflow: hidden;
    }

    /* The inner universe / node map is too wide for mobile – hide it,
       the mobile fallback grid (set in style.css @900px) already exists */
}

/* Deep-dive panel – right: -450px overflows at mobile widths */
@media (max-width: 768px) {
    .deep-dive-panel {
        right: -100%;
        width: min(100%, 420px);
    }
}

/* ---- Satellite orbit animation uses translateX(400px) which overflows ---- */
@media (max-width: 900px) {
    .satellite-node {
        animation: none;
        display: none; /* orbit not meaningful on small screens */
    }
}

/* ---- Products / Packages grid – minmax(320px) can overflow at 360px viewport ---- */
@media (max-width: 420px) {
    .packages-grid {
        grid-template-columns: 1fr;
    }

    .package-card {
        padding: 2rem 1.25rem;
    }
}

/* ---- Solutions mega-menu – fixed width 520px can overflow ---- */
@media (max-width: 560px) {
    .nav-dropdown--solutions .solutions-mega {
        width: calc(100vw - 2rem);
        left: 1rem;
        right: 1rem;
        transform: none !important;
    }
}

/* ---- Resources dropdown – 560px can overflow on small phones ---- */
@media (max-width: 600px) {
    .dropdown-content.resources-dropdown {
        width: min(560px, calc(100vw - 2rem));
        grid-template-columns: 1fr;
    }
}

/* ---- Products dropdown – 320px hard-coded width ---- */
@media (max-width: 360px) {
    .products-dropdown {
        width: calc(100vw - 2rem);
    }
}

/* ---- Hero section padding ---- */
@media (max-width: 480px) {
    .hero {
        padding: 7rem 1.25rem 4rem;
    }

    .hero h1 {
        font-size: clamp(2rem, 8vw, 3rem);
    }

    .hero p {
        font-size: 1rem;
    }
}

/* ---- Section padding – reduce on small phones ---- */
@media (max-width: 480px) {
    .packages,
    .global-expansion,
    .map-system-section {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }

    section[class] {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* ---- ai-ambient-glow – fixed 800×800 px overflows ---- */
.ai-ambient-glow {
    width: min(800px, 120vw); /* clamp to viewport so no overflow */
    height: min(800px, 120vw);
}

/* ---- Timeline-track has min-width: 800px inside overflow-x: auto – fine,
         but the parent wrapper must not overflow the page itself ---- */
.timeline-wrapper {
    max-width: 100%;
    box-sizing: border-box;
}

/* ---- hp-timeline horizontal mode – prevent overflow before it switches to
         vertical grid at 1100px ---- */
@media (max-width: 1099px) and (min-width: 769px) {
    .hp-process .hp-timeline {
        overflow: hidden;
    }
}

/* ---- Nav container – must not constrain overflow to allow dropdowns ---- */
.nav-container {
    min-width: 0;
    overflow: visible;
}

/* ---- Footer columns wrap gracefully ---- */
@media (max-width: 600px) {
    .footer-columns {
        grid-template-columns: 1fr 1fr;
        gap: 2rem 1rem;
    }
}

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

/* ---- Enquiry modal (wws-modal) – ensure scrollable on small phones ---- */
@media (max-width: 600px) {
    #wws-modal .wws-modal-inner,
    .modal.active .modal-inner,
    .ep-modal-overlay.active > * {
        max-height: 90dvh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        margin: auto;
    }
}

/* ---- wws-modal form fields on mobile ---- */
@media (max-width: 600px) {
    .modal-form-row {
        flex-direction: column;
    }

    .wws-submit-btn {
        width: 100%;
    }
}

/* ---- Forms – inputs must not be narrower than their container ---- */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
select,
textarea {
    max-width: 100%;
    box-sizing: border-box;
}

/* ---- Images & SVGs – already globally set in style.css but reinforce ---- */
@media (max-width: 768px) {
    img,
    svg,
    picture,
    video,
    canvas,
    iframe {
        max-width: 100%;
        height: auto;
    }
}

/* ---- Grid cards that use minmax with large minimums ---- */
@media (max-width: 420px) {
    .ai-grid {
        grid-template-columns: 1fr;
    }

    .solutions-mega-grid {
        grid-template-columns: 1fr;
    }

    .solutions-mega-card:nth-child(n) {
        border-right: none;
    }
}

/* ---- Mobile menu itself must not create horizontal scroll ---- */
.mobile-menu {
    max-width: 100vw;
    overflow-x: hidden;
}

.mobile-menu-container {
    max-width: 100%;
    overflow-x: hidden;
}

/* ---- Cards with absolute pseudo-elements ---- */
/* Many cards use ::before/::after with inset:-40% etc which can escape.
   Ensure every card clips its children */
@media (max-width: 768px) {
    .cap-card,
    .package-card,
    .why-tile,
    .industry-card,
    .eco-node,
    .solutions-mega-card,
    .wws-modal-inner,
    .modal-inner {
        overflow: hidden;
    }
}

/* ---- Sticky nav ---- */
nav {
    max-width: 100%;
    box-sizing: border-box;
    overflow: visible; /* dropdowns must be able to escape the nav bounds */
}

/* ---- Fix nav height on small screens ---- */
@media (max-width: 380px) {
    nav {
        height: 64px;
    }

    .mobile-menu {
        inset: 64px 0 0 0;
        min-height: calc(100dvh - 64px);
    }
}

/* ---- Scalability / contact / legal page fixes ---- */
@media (max-width: 768px) {
    /* timeline section on company/about pages */
    .timeline-container {
        padding: 0 1rem;
    }

    .timeline-item {
        padding-left: 1.5rem;
    }

    /* journey timeline */
    .journey-timeline {
        padding: 0 1rem;
    }

    /* Stat items */
    .stats-row,
    .stats-grid {
        flex-wrap: wrap;
    }

    .stat-item {
        flex: 1 1 45%;
        min-width: 0;
    }
}

/* ---- Process timeline on products pages ---- */
@media (max-width: 600px) {
    .process-timeline {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        overflow: visible;
    }

    .timeline-connector {
        display: none;
    }

    .timeline-step {
        min-width: 0;
        width: 100%;
    }
}

/* ---- Contact/form page ---- */
@media (max-width: 600px) {
    .contact-form-wrapper,
    .contact-grid {
        grid-template-columns: 1fr;
    }
}

/* ---- Legal pages ---- */
@media (max-width: 600px) {
    .legal-content,
    .policy-content {
        padding: 0 1rem;
    }
}

/* ---- Archive / publication grid ---- */
@media (max-width: 600px) {
    .archive-grid,
    .publications-grid,
    .resources-grid {
        grid-template-columns: 1fr;
    }
}

/* ---- Partners page – logo grid ---- */
@media (max-width: 600px) {
    .partners-grid,
    .logo-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ---- Watermark – don't let it cause scroll ---- */
.saintslink-watermark {
    max-width: calc(100vw - 2rem);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- inline-grid inside project modal (Start Project CTA) ---- */
/* The form uses inline style="grid-template-columns: 1fr 1fr" which
   overflows at narrow viewports. Override it here. */
@media (max-width: 600px) {
    .ep-modal [style*="grid-template-columns: 1fr 1fr"],
    .ep-modal [style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    /* Reduce padding so modal fits without scrolling as much */
    .ep-modal {
        padding: 1.5rem !important;
    }

    .ep-modal-overlay {
        padding: 1rem;
        align-items: flex-start;
        padding-top: max(5rem, env(safe-area-inset-top));
    }
}

/* ---- ep-modal-close touch target ---- */
@media (pointer: coarse) {
    .ep-modal-close {
        width: 2.5rem;
        height: 2.5rem;
    }
}

/* ============================================================
   SAFARI / iOS COMPATIBILITY
   ============================================================ */

/* iOS momentum scrolling for modal interiors */
.mobile-menu,
#wws-modal .ep-modal,
.ep-modal-overlay.active .ep-modal,
.ep-modal-overlay.active {
    -webkit-overflow-scrolling: touch;
}

/* Prevent text size adjustment on orientation change (iOS Safari) */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Prevent tap highlight flash on interactive elements */
@media (pointer: coarse) {
    a,
    button,
    [role="button"] {
        -webkit-tap-highlight-color: transparent;
    }
}

/* iOS safe area support for fixed nav and watermark */
@supports (padding-top: env(safe-area-inset-top)) {
    nav {
        padding-top: env(safe-area-inset-top);
        height: calc(80px + env(safe-area-inset-top));
    }

    .mobile-menu {
        inset: calc(80px + env(safe-area-inset-top)) 0 0 0;
        padding-bottom: calc(2rem + env(safe-area-inset-bottom));
    }

    .saintslink-watermark {
        bottom: calc(1rem + env(safe-area-inset-bottom));
        right: calc(1rem + env(safe-area-inset-right));
    }
}