/* ==========================================================================
   JEED INNOVATIONS — responsive.css
   Layout adaptation across all breakpoints.
   Load AFTER style.css and animations.css.
   Mobile-first: base styles in style.css, breakpoints here refine upward.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. BREAKPOINT REFERENCE (for maintainers)
   --------------------------------------------------------------------------
   xs  : <= 374px   very small phones
   sm  : 375 – 575  phones
   md  : 576 – 767  large phones / small tablets (portrait)
   lg  : 768 – 991  tablets (portrait) / small laptops
   xl  : 992 – 1199 tablets (landscape) / laptops
   xxl : 1200 – 1439 standard desktop
   3xl : >= 1440    large desktop
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. GLOBAL SAFETY — prevent horizontal overflow at every width
   -------------------------------------------------------------------------- */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

img,
svg,
video,
canvas {
    max-width: 100%;
    height: auto;
    display: block;
}

iframe {
    max-width: 100%;
}

table {
    width: 100%;
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Long words / URLs in contact details should not break layout */
a,
p,
li,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Ensure sticky header offset for anchors at all sizes */
[id],
:target {
    scroll-margin-top: calc(var(--header-h, 76px) + 20px);
}


/* ==========================================================================
   2. VERY SMALL PHONES — up to 374px
   ========================================================================== */
@media (max-width: 374px) {

    :root {
        --header-h: 62px;
        --radius: 12px;
    }

    .container {
        padding-inline: 14px;
    }

    h1 {
        font-size: 1.65rem;
    }

    h2 {
        font-size: 1.35rem;
    }

    h3 {
        font-size: 1.1rem;
    }

    h4 {
        font-size: 1rem;
    }

    p,
    li {
        font-size: 0.92rem;
    }

    .section {
        padding: 40px 0;
    }

    .btn {
        padding: 11px 18px;
        font-size: 0.85rem;
        width: 100%;
        justify-content: center;
    }

    .hero-actions .btn,
    .cta-actions .btn {
        width: 100%;
    }

    .brand img {
        height: 32px;
    }

    .card {
        padding: 18px;
    }

    /* Hero collapses further */
    .hero-swiper {
        min-height: 460px;
    }

    .hero-content {
        padding: 60px 0 70px;
    }

    /* Process, cards, forms all single column */
    .process-track,
    .card-grid,
    .industry-grid,
    .project-grid,
    .solution-grid,
    .value-blocks,
    .stats-grid {
        grid-template-columns: 1fr !important;
        gap: 14px;
    }

    .contact-list li {
        font-size: 0.88rem;
        gap: 8px;
    }

    .scroll-cue {
        display: none;
        /* too tight on very small phones */
    }
}


/* ==========================================================================
   3. PHONES — up to 575px
   ========================================================================== */
@media (max-width: 575px) {

    :root {
        --header-h: 66px;
    }

    .container {
        padding-inline: 16px;
    }

    h1 {
        font-size: clamp(1.75rem, 7vw, 2.2rem);
    }

    h2 {
        font-size: clamp(1.35rem, 5.5vw, 1.75rem);
    }

    h3 {
        font-size: clamp(1.1rem, 4.2vw, 1.3rem);
    }

    h4 {
        font-size: clamp(1rem, 3.6vw, 1.15rem);
    }

    .section {
        padding: clamp(40px, 8vw, 64px) 0;
    }

    /* ---------- HEADER ---------- */
    .header-topbar {
        display: none !important;
    }

    .site-header {
        height: var(--header-h);
    }

    .site-header--has-topbar {
        height: var(--header-h) !important;
    }

    .header-inner {
        gap: 12px;
    }

    .brand img {
        height: 40px;
    }

    /* ---------- HERO ---------- */
    .hero-swiper {
        height: auto;
        min-height: 540px;
    }

    .hero-slide {
        background-position: center;
        animation: none;
        /* disable Ken Burns on phones for perf */
    }

    .hero-content {
        padding: 24px 0 50px;
        max-width: 100%;
    }

    .hero-content h1 {
        font-size: clamp(1.9rem, 8vw, 2.5rem);
        line-height: 1.15;
    }

    .hero-content h2 {
        font-size: clamp(1.6rem, 7vw, 2.1rem);
        line-height: 1.18;
    }

    .hero-content p {
        font-size: 0.98rem;
        line-height: 1.55;
    }

    .hero-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        margin-top: 20px;
    }

    .hero-actions .btn {
        width: 100%;
        justify-content: center;
    }

    .hero-features-strip {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-top: 24px;
    }

    .hero-feature-card {
        padding: 12px 14px;
    }

    /* Swiper pagination / arrows repositioned */
    .swiper-button-prev,
    .swiper-button-next {
        width: 34px !important;
        height: 34px !important;
        --swiper-navigation-size: 14px;
    }

    .swiper-pagination {
        bottom: 12px !important;
    }

    /* ---------- CARDS & GRIDS ---------- */
    .card {
        padding: 20px;
        border-radius: var(--radius);
    }

    .card-grid,
    .solution-grid,
    .industry-grid,
    .project-grid,
    .value-blocks,
    .stats-grid,
    .blog-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 16px;
    }

    /* ---------- PROCESS TIMELINE ---------- */
    .process-track {
        display: grid;
        grid-template-columns: 1fr;
        gap: 16px;
        margin-top: 28px;
    }

    .process-step {
        padding: 18px;
    }

    .process-step::after {
        display: none;
        /* horizontal connector removed on mobile */
    }

    /* Vertical connector between stacked steps */
    .process-step:not(:last-child)::before {
        content: "";
        position: absolute;
        left: 26px;
        bottom: -16px;
        width: 2px;
        height: 16px;
        background: var(--green);
        opacity: 0.4;
    }

    /* ---------- SECTION NAV (Solutions) ---------- */
    .section-nav {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 10px 0;
    }

    .section-nav::-webkit-scrollbar {
        display: none;
    }

    .section-nav ul {
        display: flex;
        flex-wrap: nowrap;
        gap: 18px;
        padding-inline: 16px;
        white-space: nowrap;
    }

    /* ---------- DIAGRAMS ---------- */
    .diagram,
    .process-diagram,
    .svg-diagram {
        width: 100%;
        overflow-x: auto;
    }

    .diagram svg,
    .process-diagram svg,
    .svg-diagram svg {
        min-width: 480px;
        /* allow horizontal scroll rather than squeeze */
        height: auto;
    }

    /* ---------- FORMS ---------- */
    .contact-form .form-control,
    .contact-form .form-select {
        font-size: 16px;
        /* prevents iOS zoom on focus */
        padding: 12px 14px;
    }

    .contact-form .btn {
        width: 100%;
        justify-content: center;
    }

    /* ---------- FOOTER ---------- */
    .site-footer {
        padding: 40px 0 20px;
    }

    .footer-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 26px;
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }

    /* ---------- CONTACT LIST ---------- */
    .contact-list {
        padding: 0;
        list-style: none;
    }

    .contact-list li {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        font-size: 0.95rem;
        margin-bottom: 12px;
    }

    /* ---------- MISC ---------- */
    .eyebrow {
        font-size: 0.72rem;
        letter-spacing: 0.12em;
    }

    blockquote {
        padding: 16px 18px;
        font-size: 0.98rem;
    }

    .modal-dialog {
        margin: 12px;
    }
}


/* ==========================================================================
   4. LARGE PHONES / SMALL TABLETS PORTRAIT — 576 to 767px
   ========================================================================== */
@media (min-width: 576px) and (max-width: 767px) {

    .container {
        padding-inline: 22px;
    }

    .section {
        padding: clamp(48px, 8vw, 72px) 0;
    }

    /* Header stays mobile-style until 992px (see style.css) */
    .brand img {
        height: 36px;
    }

    /* Hero */
    .hero-swiper {
        height: auto;
        min-height: 580px;
    }

    .hero-content {
        padding: 90px 0 100px;
        max-width: 92%;
    }

    .hero-actions {
        flex-wrap: wrap;
        gap: 12px;
    }

    .hero-actions .btn {
        flex: 1 1 auto;
        min-width: 180px;
        justify-content: center;
    }

    /* Two-column grids */
    .card-grid,
    .solution-grid,
    .industry-grid,
    .project-grid,
    .value-blocks,
    .stats-grid,
    .blog-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }

    /* Process — 2 columns */
    .process-track {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }

    .process-step::after {
        display: none;
    }

    /* Section nav horizontal scroll */
    .section-nav ul {
        display: flex;
        flex-wrap: nowrap;
        gap: 22px;
        overflow-x: auto;
        padding-inline: 22px;
        scrollbar-width: none;
    }

    .section-nav ul::-webkit-scrollbar {
        display: none;
    }

    /* Footer two-column */
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 28px;
    }

    /* Forms */
    .contact-form .form-control,
    .contact-form .form-select {
        font-size: 16px;
    }

    /* Diagram min-width relaxes */
    .diagram svg,
    .process-diagram svg,
    .svg-diagram svg {
        min-width: 560px;
    }
}


/* ==========================================================================
   5. TABLETS PORTRAIT / SMALL LAPTOPS — 768 to 991px
   ========================================================================== */
@media (min-width: 768px) and (max-width: 991px) {

    :root {
        --header-h: 74px;
    }

    .container {
        padding-inline: 26px;
    }

    /* Header — mobile nav still active */
    .brand img {
        height: 38px;
    }

    /* Hero */
    .hero-swiper {
        height: min(80vh, 660px);
    }

    .hero-content {
        max-width: 78%;
    }

    .hero-content h1 {
        font-size: clamp(2.1rem, 4.4vw, 2.9rem);
    }

    .hero-actions {
        gap: 14px;
    }

    /* Grids — 2 or 3 columns */
    .card-grid,
    .solution-grid,
    .industry-grid,
    .value-blocks {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

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

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

    /* Process — 3 columns */
    .process-track {
        grid-template-columns: repeat(3, 1fr);
        gap: 18px;
    }

    .process-step::after {
        display: none;
    }

    /* Section nav */
    .section-nav ul {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
    }

    /* Footer */
    .footer-grid {
        grid-template-columns: 1.4fr 1fr 1fr;
        gap: 30px;
    }

    /* Diagrams fit comfortably */
    .diagram svg,
    .process-diagram svg,
    .svg-diagram svg {
        min-width: 0;
    }
}


/* ==========================================================================
   6. TABLETS LANDSCAPE / LAPTOPS — 992 to 1199px
   ========================================================================== */
@media (min-width: 992px) and (max-width: 1199px) {

    .container {
        padding-inline: 30px;
    }

    /* Full desktop navigation from here on */
    .primary-nav ul {
        gap: 22px;
    }

    .nav-cta {
        padding: 11px 20px;
        font-size: 0.9rem;
    }

    /* Grids — 3 columns typical */
    .card-grid,
    .solution-grid,
    .industry-grid,
    .project-grid,
    .value-blocks {
        grid-template-columns: repeat(3, 1fr);
        gap: 22px;
    }

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

    /* Process — 3 x 2 */
    .process-track {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }

    .process-step::after {
        display: none;
    }

    /* Footer */
    .footer-grid {
        grid-template-columns: 1.6fr 1fr 1fr 1fr;
        gap: 28px;
    }

    /* Hero */
    .hero-swiper {
        height: min(82vh, 720px);
    }
}


/* Topbar on Laptop / Standard Screens (<= 1536px): remove timing, preserve full location */
@media (max-width: 1536px) {
    .topbar-hours,
    .header-topbar__left .topbar-divider {
        display: none !important;
    }

    .topbar-location {
        display: inline-flex !important;
    }

    .topbar-location .topbar-value {
        display: inline !important;
        white-space: nowrap;
    }
}

/* ==========================================================================
   7. STANDARD DESKTOP — 1200 to 1439px
   ========================================================================== */
@media (min-width: 1200px) and (max-width: 1439px) {

    .container {
        max-width: 1180px;
    }

    /* Full 4-column grids */
    .card-grid,
    .solution-grid,
    .industry-grid,
    .project-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;
    }

    .value-blocks {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Process — 6 across with connectors */
    .process-track {
        grid-template-columns: repeat(6, 1fr);
        gap: 18px;
    }

    .process-step::after {
        display: block;
    }

    .footer-grid {
        grid-template-columns: 1.6fr 1fr 1fr 1fr;
    }
}


/* ==========================================================================
   8. LARGE DESKTOP — 1440px and above
   ========================================================================== */
@media (min-width: 1440px) {

    :root {
        --maxw: 1320px;
    }

    .container {
        max-width: var(--maxw);
        padding-inline: 32px;
    }

    h1 {
        font-size: clamp(2.6rem, 3.4vw, 3.6rem);
    }

    h2 {
        font-size: clamp(1.9rem, 2.4vw, 2.6rem);
    }


    .section {
        padding: clamp(72px, 6vw, 120px) 0;
    }

    .hero-swiper {
        height: min(95vh, 900px);
    }

    .card-grid,
    .solution-grid,
    .industry-grid,
    .project-grid {
        gap: 28px;
    }

    .process-track {
        gap: 22px;
    }
}


/* ==========================================================================
   9. VERY LARGE SCREENS — 1920px and above
   ========================================================================== */
@media (min-width: 1920px) {

    :root {
        --maxw: 1480px;
    }

    body {
        font-size: 17px;
    }

    .hero-content {
        max-width: 820px;
    }
}


/* ==========================================================================
   10. HEIGHT-BASED ADJUSTMENTS
   Short viewports (landscape phones, small laptops) — reduce hero height.
   ========================================================================== */
@media (max-height: 620px) and (orientation: landscape) {

    .hero-swiper {
        height: auto;
        min-height: 420px;
    }

    .hero-content {
        padding: 60px 0;
    }

    .hero-content h1 {
        font-size: 1.9rem;
    }

    .hero-content p {
        font-size: 0.95rem;
    }

    .scroll-cue {
        display: none;
    }
}


/* ==========================================================================
   11. ORIENTATION — PORTRAIT PHONES & TABLETS
   ========================================================================== */
@media (orientation: portrait) and (max-width: 991px) {
    .hero-slide {
        background-position: center top;
    }

    .img-mask img,
    .card .card-media img {
        object-position: center;
    }
}


/* ==========================================================================
   12. TOUCH DEVICES — larger tap targets, no hover-dependent reveals
   ========================================================================== */
@media (hover: none) and (pointer: coarse) {

    .btn {
        min-height: 46px;
        padding-block: 13px;
    }

    .nav-toggle {
        min-width: 44px;
        min-height: 44px;
    }

    .primary-nav ul li a {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    .card:hover {
        transform: none;
        /* prevents sticky hover states */
    }

    .card:active {
        transform: translateY(-2px);
    }

    /* Hover-only underline becomes always-visible on touch */
    .link-underline::after {
        transform: scaleX(1);
        opacity: 0.35;
    }
}


/* ==========================================================================
   13. HIGH-DPI / RETINA — crisper borders
   ========================================================================== */
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
    .site-header {
        border-bottom-width: 0.5px;
    }
}


/* ==========================================================================
   14. PRINT — clean output
   ========================================================================== */
@media print {

    *,
    *::before,
    *::after {
        background: #fff !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    .site-header,
    .site-footer,
    .section-nav,
    .hero-swiper,
    .scroll-cue,
    .btn,
    .nav-toggle,
    .swiper-pagination,
    .swiper-button-prev,
    .swiper-button-next,
    iframe,
    video {
        display: none !important;
    }

    .container {
        max-width: 100%;
        padding: 0;
    }

    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #555;
    }

    h1,
    h2,
    h3 {
        page-break-after: avoid;
    }

    img {
        page-break-inside: avoid;
        max-width: 100% !important;
    }
}


/* ==========================================================================
   15. SAFE-AREA INSETS — notched phones (iPhone X+)
   ========================================================================== */
@supports (padding: env(safe-area-inset-left)) {

    .container {
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
    }

    .site-footer {
        padding-bottom: max(20px, env(safe-area-inset-bottom));
    }

    .hero-content {
        padding-bottom: max(150px, calc(60px + env(safe-area-inset-bottom)));
    }
}


/* ==========================================================================
   16. FOLDABLE / DUAL-SCREEN DEVICES
   ========================================================================== */
@media (horizontal-viewport-segments: 2) {
    .container {
        max-width: 90%;
    }

    .hero-content {
        max-width: 60%;
    }
}


/* ==========================================================================
   17. RESPONSIVE TYPOGRAPHY UTILITIES
   (used where inline font-size would otherwise be hard-coded)
   ========================================================================== */
.fs-hero {
    font-size: clamp(1.9rem, 6.5vw, 3.4rem);
    line-height: 1.15;
}

.fs-h2 {
    font-size: clamp(1.35rem, 4vw, 2.4rem);
    line-height: 1.2;
}

.fs-h3 {
    font-size: clamp(1.1rem, 2.6vw, 1.5rem);
    line-height: 1.25;
}

.fs-body {
    font-size: clamp(0.95rem, 1.4vw, 1.05rem);
    line-height: 1.65;
}

.fs-small {
    font-size: clamp(0.82rem, 1.1vw, 0.92rem);
}


/* ==========================================================================
   18. RESPONSIVE SPACING UTILITIES
   ========================================================================== */
.px-safe {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
}

.mt-section {
    margin-top: clamp(40px, 6vw, 96px);
}

.mb-section {
    margin-bottom: clamp(40px, 6vw, 96px);
}

.gap-responsive {
    gap: clamp(14px, 2vw, 28px);
}


/* ==========================================================================
   19. ASPECT RATIO HELPERS — prevents layout shift across breakpoints
   ========================================================================== */
.ratio-16x9 {
    aspect-ratio: 16 / 9;
}

.ratio-4x3 {
    aspect-ratio: 4 / 3;
}

.ratio-1x1 {
    aspect-ratio: 1 / 1;
}

.ratio-3x2 {
    aspect-ratio: 3 / 2;
}

.ratio-16x9 img,
.ratio-4x3 img,
.ratio-1x1 img,
.ratio-3x2 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* ==========================================================================
   20. VISIBILITY HELPERS BY BREAKPOINT
   (Bootstrap provides most of these, but we keep our own to avoid
   dependency on grid classes for pure visibility toggles.)
   ========================================================================== */
.only-xs,
.only-sm,
.only-md,
.only-lg,
.only-xl {
    display: none;
}

@media (max-width: 374px) {
    .only-xs {
        display: block;
    }
}

@media (min-width: 375px) and (max-width: 575px) {
    .only-sm {
        display: block;
    }
}

@media (min-width: 576px) and (max-width: 991px) {
    .only-md {
        display: block;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .only-lg {
        display: block;
    }
}

@media (min-width: 1200px) {
    .only-xl {
        display: block;
    }
}

.hide-xs {
    display: block;
}

@media (max-width: 374px) {
    .hide-xs {
        display: none !important;
    }
}

.hide-sm {
    display: block;
}

@media (max-width: 575px) {
    .hide-sm {
        display: none !important;
    }
}

.hide-mobile {
    display: block;
}

@media (max-width: 767px) {
    .hide-mobile {
        display: none !important;
    }
}

.hide-tablet {
    display: block;
}

@media (min-width: 768px) and (max-width: 991px) {
    .hide-tablet {
        display: none !important;
    }
}

.hide-desktop {
    display: none;
}

@media (min-width: 992px) {
    .hide-desktop {
        display: none !important;
    }
}


/* ==========================================================================
   21. RESPONSIVE IMAGE BEHAVIOUR
   ========================================================================== */
.img-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.img-contain {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.img-rounded {
    border-radius: var(--radius);
}

.img-circle {
    border-radius: 50%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

@media (max-width: 767px) {

    /* Center-tilt on portrait phones for wide banner images */
    .hero-slide,
    .banner-image {
        background-position: center 30%;
    }
}


/* ==========================================================================
   22. STICKY / FIXED ELEMENT ADJUSTMENTS
   ========================================================================== */
@media (max-width: 991px) {

    /* Section nav becomes non-sticky on mobile to save vertical space */
    .section-nav.is-sticky-mobile {
        position: static;
    }

    /* Reduce sticky sidebar behaviour */
    .sticky-sidebar {
        position: static !important;
        top: auto !important;
    }
}


/* ==========================================================================
   23. MODAL / DIALOG RESPONSIVENESS
   ========================================================================== */
@media (max-width: 575px) {
    .modal-dialog {
        margin: 10px;
        max-width: calc(100% - 20px);
    }

    .modal-content {
        border-radius: var(--radius);
    }

    .modal-body {
        padding: 18px;
    }
}


/* ==========================================================================
   24. ACCORDION (FAQ) RESPONSIVENESS
   ========================================================================== */
@media (max-width: 575px) {
    .accordion-button {
        font-size: 0.95rem;
        padding: 14px 16px;
        line-height: 1.4;
    }

    .accordion-body {
        padding: 14px 16px;
        font-size: 0.92rem;
    }
}


/* ==========================================================================
   25. WORDPRESS-STYLE CONTENT (if any rich text is added later)
   ========================================================================== */
@media (max-width: 767px) {
    .rich-text img {
        width: 100%;
        height: auto;
    }

    .rich-text iframe {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
    }

    .rich-text table {
        font-size: 0.88rem;
    }
}


/* ==========================================================================
   END OF responsive.css
   ========================================================================== */