/* ==========================================================================
   Jupiter AI — Responsive System (mobile-first)
   Load last. Breakpoints: 576 768 992 1024 1200 1440
   ========================================================================== */

/* ---- Breakpoint tokens ---- */
:root {
    --bp-sm: 576px;
    --bp-md: 768px;
    --bp-lg: 992px;
    --bp-xl: 1024px;
    --bp-2xl: 1200px;
    --bp-3xl: 1440px;

    --touch-min: 48px;
    --container-pad: clamp(1rem, 4vw, 2rem);
    --section-gap-mobile: 1.5rem;
    --section-gap-tablet: 2rem;
    --section-gap-desktop: 2.5rem;

    /* Mobile typography (default) */
    --ds-h1: clamp(2.625rem, 8vw + 1rem, 3rem);
    --ds-h2: clamp(1.875rem, 5vw + 0.5rem, 2.25rem);
    --ds-h3: clamp(1.375rem, 3vw + 0.5rem, 1.5rem);
    --ds-h4: 1.125rem;
    --ds-body: 1rem;
    --ds-body-lg: 1.0625rem;
    --ds-btn: 1rem;
    --ds-reveal-y: 24px;

    --header-h: 72px;
    --header-h-scrolled: 64px;
    --header-float-y: 0.75rem;
    --header-float-y-scrolled: 0.5rem;
    --header-width: calc(100% - 1.5rem);

    --ds-section-py: clamp(3.5rem, 10vw, 5rem);
    --ds-section-py-sm: clamp(2.5rem, 8vw, 3.5rem);
    --ds-container: min(1400px, 100% - var(--container-pad) * 2);
}

@media (min-width: 768px) {
    :root {
        --header-h: 80px;
        --header-h-scrolled: 72px;
        --header-width: min(96%, 1200px);
        --ds-h1: clamp(3rem, 5vw + 1rem, 4.5rem);
        --ds-h2: clamp(2rem, 3vw + 0.75rem, 2.75rem);
        --ds-h3: clamp(1.375rem, 2vw + 0.5rem, 1.75rem);
        --ds-reveal-y: 32px;
    }
}

@media (min-width: 1024px) {
    :root {
        --header-h: 88px;
        --header-h-scrolled: 72px;
        --header-float-y: 1.25rem;
        --header-width: 92%;
        --ds-h1: clamp(4.5rem, 4vw + 1rem, 5rem);
        --ds-h2: clamp(3rem, 2.5vw + 0.75rem, 3.5rem);
        --ds-h3: clamp(1.75rem, 1.5vw + 0.5rem, 2rem);
        --ds-body: clamp(1rem, 0.25vw + 0.9375rem, 1.125rem);
        --ds-body-lg: clamp(1.0625rem, 0.5vw + 1rem, 1.25rem);
        --ds-reveal-y: 40px;
        --ds-section-py: clamp(3rem, 5.5vh, 4.5rem);
    }
}

@media (min-width: 1440px) {
    :root {
        --ds-h1: clamp(4.5rem, 3vw + 2rem, 5rem);
        --ds-h2: clamp(3rem, 2vw + 1rem, 3.5rem);
    }
}

/* ---- Global overflow & containers ---- */
html {
    overflow-x: clip;
    scroll-padding-top: calc(var(--header-h) + var(--header-float-y) + 1rem);
}

body {
    overflow-x: clip;
    min-width: 320px;
}

main,
.site-footer,
.jai-footer,
section {
    max-width: 100%;
}

img,
video,
picture,
svg {
    max-width: 100%;
    height: auto;
}

.photo-crop,
.photo-crop img,
.photo-crop picture {
    width: 100%;
    object-fit: cover;
}

/* Prevent fixed-width overflow */
[class*="__shell"],
[class*="__grid"],
[class*="__layout"],
.container {
    max-width: 100%;
}

/* ---- Touch: disable hover lifts ---- */
@media (hover: none), (pointer: coarse) {
    .btn-premium:hover,
    .jai-footer__social:hover,
    .svc-card:hover,
    .car-role-card:hover,
    .ct-why-card:hover,
    .ct-office-card:hover,
    [class*="__card"]:hover {
        transform: none !important;
    }
}

/* ---- Buttons ---- */
@media (max-width: 767px) {
    .btn-premium {
        width: 100%;
        max-width: 100%;
    }

    .btn-premium__inner {
        min-height: var(--touch-min);
        width: 100%;
        padding-top: 0.875rem;
        padding-bottom: 0.875rem;
        font-size: 1rem;
    }

    .hero-actions,
    .car-detail-hero__actions,
    .svc-detail-hero__action,
    .ct-hero__actions,
    .error-page__actions,
    .site-closing-cta__actions {
        flex-direction: column;
        width: 100%;
        align-items: stretch;
    }

    .hero-actions .btn-premium,
    .car-detail-hero__actions .btn-premium,
    .ct-hero__actions .btn-premium {
        max-width: none;
    }
}

/* ---- Forms (site-wide) ---- */
@media (max-width: 767px) {
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="url"],
    input[type="file"],
    select,
    textarea {
        font-size: 16px;
        min-height: var(--touch-min);
        width: 100%;
    }

    textarea {
        min-height: 8rem;
        resize: vertical;
    }

    .car-form,
    .car-form__grid,
    .car-form__grid--2,
    .car-form__grid--3,
    .ct-form__row,
    .contact-convert__field-row,
    .svc-staff-form__row {
        grid-template-columns: 1fr !important;
        width: 100%;
    }

    .car-form__submit .btn-premium,
    .ct-form__submit .btn-premium,
    .contact-convert__submit .btn-premium,
    .svc-staff-form__submit {
        width: 100%;
    }
}

/* ---- Header (mobile / tablet) ---- */
@media (max-width: 1023px) {
    .logo {
        height: 48px;
    }

    .site-header.is-scrolled .logo {
        height: 44px;
    }

    .mobile-toggle {
        width: var(--touch-min);
        height: var(--touch-min);
        min-width: var(--touch-min);
        min-height: var(--touch-min);
    }

    .header-actions .btn-premium--nav {
        display: none;
    }
}

/* ---- Hero (all pages using hero-layout pattern) ---- */
@media (max-width: 767px) {
    .hero {
        min-height: auto;
        padding-top: calc(var(--header-h) + var(--header-float-y) + 2rem);
        padding-bottom: 3rem;
        text-align: center;
    }

    .hero-layout {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .hero-layout .hero-media {
        order: -1;
    }

    .hero-copy {
        max-width: none;
        margin-inline: auto;
    }

    .hero-headline {
        font-size: clamp(2.625rem, 9vw, 3rem);
        max-width: none;
        margin-inline: auto;
    }

    .hero-lede {
        margin-inline: auto;
        font-size: 1rem;
    }

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

    .hero-photo-frame,
    .hero-illustration-frame {
        aspect-ratio: 16 / 10;
        border-radius: 0.875rem;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .hero {
        min-height: auto;
        padding-top: calc(var(--header-h) + var(--header-float-y) + 2.5rem);
        padding-bottom: 4rem;
    }

    .hero-layout {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
        align-items: center;
    }
}

/* ---- Section grids (home + shared) ---- */
@media (max-width: 767px) {
    [class*="__grid"]:not(.mega-menu__grid):not(.jai-footer__grid):not(.car-form__grid) {
        grid-template-columns: 1fr !important;
    }

    .section-head,
    [class*="__section-head"],
    [class*="section-head"] {
        text-align: center;
        margin-inline: auto;
    }

    .services-grid,
    .why-grid,
    .process-journey__grid,
    .tech-ecosystem__grid,
    .industry-showcase__grid {
        gap: var(--section-gap-mobile);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .services-grid,
    .why-grid,
    .industry-showcase__grid,
    .car-benefits__grid,
    .ct-why__grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ---- Cards full-width mobile ---- */
@media (max-width: 767px) {
    .svc-card,
    .car-role-card,
    .case-showcase__panel,
    .ct-why-card,
    .ct-office-card,
    .abt-card,
    .svc-staff-card {
        width: 100%;
        max-width: none;
    }
}

/* ---- Case studies ---- */
@media (max-width: 767px) {
    .case-showcase__layout {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    .case-showcase__visual {
        order: -1;
        width: 100%;
    }

    .case-showcase__visual img,
    .case-showcase__visual picture,
    .case-showcase__visual .photo-crop {
        width: 100%;
        aspect-ratio: 16 / 10;
        object-fit: cover;
        border-radius: 1rem;
    }

    .case-showcase__content {
        text-align: left;
    }
}

/* ---- Service detail ---- */
@media (max-width: 767px) {
    .svc-detail-hero__layout,
    .svc-detail-hero__shell--split .svc-detail-hero__layout {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .svc-detail-hero__visual {
        order: -1;
        width: 100%;
    }

    .svc-detail-hero__visual img,
    .svc-detail-hero__visual picture {
        width: 100%;
        border-radius: 1rem;
        object-fit: cover;
    }

    .svc-detail-hero__action {
        justify-content: center;
    }
}

/* ---- Careers ---- */
@media (max-width: 767px) {
    .car-roles__grid {
        grid-template-columns: 1fr !important;
    }

    .car-role-card__actions .btn-premium {
        width: 100%;
    }

    .car-detail-hero__layout {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .car-detail-hero__visual {
        order: -1;
    }

    .car-detail-hero__meta {
        justify-content: center;
    }

    /* Sticky apply CTA on job detail */
    .page-careers--detail .car-detail-hero__actions {
        position: sticky;
        bottom: 0;
        z-index: 50;
        margin: 0 calc(-1 * var(--container-pad));
        padding: 0.75rem var(--container-pad);
        background: linear-gradient(to top, rgba(8, 27, 58, 0.98) 70%, transparent);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }

    .page-careers--detail .car-detail-hero__actions .btn-premium {
        width: 100%;
        box-shadow: 0 8px 32px rgba(255, 107, 26, 0.35);
    }
}

/* ---- About page ---- */
@media (max-width: 767px) {
    .abt-hero__layout,
    .abt-split,
    .abt-values__grid,
    .abt-global__grid {
        grid-template-columns: 1fr !important;
    }

    .abt-hero__visual {
        order: -1;
    }
}

/* ---- Contact page ---- */
@media (max-width: 767px) {
    .ct-hero__shell {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .ct-hero__copy {
        text-align: center;
        order: 1;
    }

    .ct-hero__form-col {
        order: 2;
        width: 100%;
    }

    .ct-offices__grid {
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
    }

    .ct-office-card {
        width: 100%;
    }

    .ct-process__track {
        flex-direction: column;
    }

    .ct-faq__shell {
        padding-inline: 0;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .ct-hero__shell {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .ct-offices__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ---- Footer enterprise ---- */
@media (max-width: 767px) {
    .jai-footer__body {
        padding: 2.5rem 0;
    }

    .jai-footer__grid {
        text-align: center;
    }

    .jai-footer__office-row {
        justify-content: flex-start;
        text-align: left;
        max-width: 20rem;
        margin-inline: auto;
    }
}

/* ---- Contact conversion (home) ---- */
@media (max-width: 767px) {
    .contact-convert {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .contact-convert__sales {
        text-align: center;
    }

    .contact-convert__checklist,
    .contact-convert__timeline {
        text-align: left;
    }

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

/* ---- Industry table → cards on mobile ---- */
@media (max-width: 767px) {
    .industry-table-wrap {
        overflow-x: visible;
    }

    .industry-table {
        min-width: 0 !important;
        display: block;
    }

    .industry-table thead {
        display: none;
    }

    .industry-table tbody,
    .industry-table tr,
    .industry-table td {
        display: block;
        width: 100%;
    }

    .industry-table tr {
        margin-bottom: 1rem;
        padding: 1rem;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.08);
    }
}

/* ---- Motion: reduce on mobile ---- */
@media (max-width: 767px) {
    :root {
        --ds-reveal-y: 20px;
    }

    [data-parallax],
    .hero-bg__particles,
    .hero-float-cards {
        transform: none !important;
        animation: none !important;
    }

    .js-motion [data-ds-reveal]:not(.is-visible),
    .js-motion [data-footer-animate]:not(.is-visible) {
        transform: translateY(16px);
    }
}

/* ---- Error pages ---- */
@media (max-width: 767px) {
    .error-page {
        padding-top: calc(var(--header-h) + 2rem);
        padding-bottom: 3rem;
    }
}

/* ---- Utility: balanced text on small screens ---- */
@media (max-width: 767px) {
    h1, h2, h3,
    [class*="__title"],
    [class*="__heading"] {
        overflow-wrap: anywhere;
        word-break: break-word;
    }
}