/* ==========================================================
   GARSOLVE RESPONSIVE SYSTEM
   File: responsive.css
   ========================================================== */


/* ==========================================================
   1200px
   ========================================================== */

   @media (max-width: 1200px) {

    :root {
        --container-padding: 1.25rem;
    }

    .hero__grid {
        gap:
            var(--space-10);
    }

    .navigation__links {
        gap:
            var(--space-5);
    }

    .brand__logo--desktop {
        width:
            195px;
    }

}


/* ==========================================================
   1024px
   ========================================================== */

@media (max-width: 1024px) {

    :root {
        --section-padding-y:
            5.5rem;
    }


    /* ======================================================
       HERO
       ====================================================== */

    .hero {
        min-height:
            auto;

        padding-top:
            calc(
                var(--header-height) +
                var(--space-16)
            );

        padding-bottom:
            var(--space-16);
    }

    .hero__grid {
        grid-template-columns:
            1fr;
    }

    .hero__visual {
        width:
            100%;

        justify-content:
            flex-start;
    }

    .dashboard-card {
        width:
            100%;

        max-width:
            700px;
    }


    /* ======================================================
       CHALLENGES / SERVICES
       ====================================================== */

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

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


    /* ======================================================
       WHY GARSOLVE
       ====================================================== */

    .why-garsolve__grid {
        grid-template-columns:
            1fr;
    }


    /* ======================================================
       CASE STUDY
       ====================================================== */

    .case-study-feature {
        grid-template-columns:
            1fr;
    }

    .case-study-window {
        width:
            100%;
    }


    /* ======================================================
       ABOUT
       ====================================================== */

    .founder__grid {
        grid-template-columns:
            0.7fr 1.3fr;
    }


    /* ======================================================
       FOOTER
       ====================================================== */

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

}


/* ==========================================================
   DESKTOP CONTACT LAYOUT
   769px+
   ========================================================== */

@media (min-width: 769px) {

    .contact-card {
        display:
            grid;

        grid-template-columns:
            minmax(0, 1fr)
            auto;

        grid-template-rows:
            auto;

        column-gap:
            clamp(
                var(--space-8),
                6vw,
                var(--space-14)
            );

        align-items:
            center;

        width:
            100%;

        box-sizing:
            border-box;
    }


    .contact-card__content {
        min-width:
            0;
    }


    .contact-card__actions {
        display:
            flex;

        align-items:
            center;

        justify-content:
            center;

        width:
            auto;

        min-width:
            0;
    }


    .contact-card__actions .button {
        width:
            auto;

        min-width:
            190px;

        white-space:
            nowrap;
    }

}


/* ==========================================================
   900px — MOBILE NAVIGATION
   ========================================================== */

@media (max-width: 900px) {

    .navigation__links {
        position:
            fixed;

        top:
            calc(
                var(--header-height) +
                var(--space-2)
            );

        left:
            var(--container-padding);

        right:
            var(--container-padding);

        display:
            flex;

        flex-direction:
            column;

        gap:
            var(--space-1);

        margin:
            0;

        padding:
            var(--space-3);

        border:
            1px solid var(--color-border);

        border-radius:
            var(--radius-xl);

        background:
            rgba(
                5,
                14,
                25,
                0.97
            );

        box-shadow:
            var(--shadow-lg);

        backdrop-filter:
            blur(22px);

        -webkit-backdrop-filter:
            blur(22px);

        opacity:
            0;

        visibility:
            hidden;

        transform:
            translateY(-10px);

        transition:
            opacity var(--transition-base),
            visibility var(--transition-base),
            transform var(--transition-base);
    }


    .navigation__links.is-open {
        opacity:
            1;

        visibility:
            visible;

        transform:
            translateY(0);
    }


    .navigation__link {
        display:
            flex;

        align-items:
            center;

        min-height:
            48px;

        padding:
            var(--space-3)
            var(--space-4);

        border-radius:
            var(--radius-md);

        font-size:
            var(--text-sm);
    }


    .navigation__link:hover {
        background:
            rgba(
                0,
                214,
                214,
                0.05
            );
    }


    .navigation__link::after {
        display:
            none;
    }


    .navigation__cta {
        display:
            none;
    }


    .navigation__toggle {
        display:
            flex;
    }


    .navigation__toggle.is-open
    span:nth-child(1) {
        transform:
            translateY(7px)
            rotate(45deg);
    }


    .navigation__toggle.is-open
    span:nth-child(2) {
        opacity:
            0;
    }


    .navigation__toggle.is-open
    span:nth-child(3) {
        transform:
            translateY(-7px)
            rotate(-45deg);
    }


    .brand__logo--desktop {
        display:
            none;
    }


    .brand__logo--mobile {
        display:
            block;

        width:
            42px;

        height:
            42px;
    }


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


    .footer-brand {
        grid-column:
            span 2;
    }

}


/* ==========================================================
   768px — MOBILE
   ========================================================== */

@media (max-width: 768px) {

    :root {
        --container-padding:
            1.1rem;

        --section-padding-y:
            4.5rem;

        --header-height:
            72px;
    }


    /* ======================================================
       HERO
       ====================================================== */

    .hero {
        padding-top:
            calc(
                var(--header-height) +
                var(--space-12)
            );

        padding-bottom:
            var(--space-12);
    }


    .hero__title {
        font-size:
            clamp(
                2.5rem,
                9vw,
                4rem
            );
    }


    .hero__description {
        font-size:
            var(--text-base);
    }


    .hero__actions {
        flex-direction:
            column;

        align-items:
            stretch;
    }


    .hero__actions .button {
        width:
            100%;
    }


    /* ======================================================
       HERO TRUST PILLS
       2 COLUMNS / 3 ROWS
       ====================================================== */

    .hero__trust {
        display:
            grid;

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap:
            0.5rem;

        width:
            100%;

        max-width:
            430px;

        margin-top:
            var(--space-7);
    }


    .hero__trust-pill {
        width:
            100%;

        min-height:
            36px;

        padding:
            0 10px;

        font-size:
            0.68rem;
    }


    /*
       Center Power BI on the third row.
    */

    .hero__trust-pill:nth-child(5) {
        grid-column:
            1 / -1;

        width:
            50%;

        justify-self:
            center;
    }


    /* ======================================================
       DASHBOARD
       ====================================================== */

    .dashboard-card {
        width:
            100%;

        padding:
            var(--space-4);

        transform:
            none !important;

        animation:
            none;
    }


    .dashboard-card:hover {
        transform:
            translateY(-4px) !important;
    }


    .dashboard-card__header {
        flex-direction:
            column;
    }


    .dashboard-status {
        align-self:
            flex-start;
    }


    .dashboard-card__identity {
        align-items:
            flex-start;
    }


    .dashboard-card__logo {
        width:
            36px;

        height:
            36px;
    }


    .dashboard-overview__grid {
        grid-template-columns:
            1fr;
    }


    .dashboard-stat {
        min-height:
            58px;
    }


    .dashboard-system-row,
    .workflow-item {
        min-height:
            44px;
    }


    /* ======================================================
       SECTION HEADINGS
       ====================================================== */

    .section-heading {
        margin-bottom:
            var(--space-10);
    }


    .section-heading p {
        font-size:
            var(--text-base);
    }


    /* ======================================================
       CHALLENGES / SERVICES
       ====================================================== */

    .challenge-grid,
    .services-grid {
        grid-template-columns:
            1fr;
    }


    .service-card {
        min-height:
            auto;
    }


    /* ======================================================
       WHY GARSOLVE
       ====================================================== */

    .principles-grid {
        grid-template-columns:
            1fr;
    }


    /* ======================================================
       PROCESS
       ====================================================== */

    .process-timeline {
        grid-template-columns:
            1fr;

        gap:
            var(--space-8);
    }


    .process-timeline::before {
        display:
            none;
    }


    .process-step {
        display:
            grid;

        grid-template-columns:
            56px 1fr;

        column-gap:
            var(--space-5);

        text-align:
            left;
    }


    .process-step__number {
        grid-row:
            span 2;

        margin:
            0;
    }


    .process-step p {
        grid-column:
            2;
    }


    /* ======================================================
       CASE STUDY
       ====================================================== */

    .case-study-feature {
        grid-template-columns:
            1fr;

        padding:
            var(--space-6);

        border-radius:
            var(--radius-xl);
    }


    .case-study-window {
        animation:
            none;
    }


    .case-study-window__body {
        grid-template-columns:
            58px minmax(0, 1fr);

        min-height:
            280px;
    }


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


    /* ======================================================
       CASE STUDY ARCHITECTURE
       ====================================================== */

    .architecture-capabilities {
        grid-template-columns:
            1fr;
    }


    .case-study-architecture {
        width:
            100%;

        min-width:
            0;

        padding:
            var(--space-4);
    }


    .architecture-capability {
        width:
            100%;
    }


    .architecture-capability
    .architecture-node {
        width:
            100%;

        max-width:
            none;
    }


    /* ======================================================
       ABOUT
       ====================================================== */

    .founder__grid {
        grid-template-columns:
            1fr;
    }


    .founder__visual {
        order:
            2;
    }


    .founder__content {
        order:
            1;
    }


    .founder-card {
        width:
            min(
                100%,
                320px
            );
    }


    .founder-card__logo {
        width:
            115px;

        height:
            115px;
    }


    /* ======================================================
       FOUNDER PRINCIPLES
       Keep cards content-sized instead of full width.
       ====================================================== */

    .founder__principles {
        display:
            flex;

        flex-direction:
            column;

        align-items:
            flex-start;

        gap:
            var(--space-3);

        width:
            100%;
    }


    .founder__principles > div {
        width:
            min(
                100%,
                320px
            );

        min-height:
            0;

        height:
            auto;

        padding:
            var(--space-4);

        box-sizing:
            border-box;
    }


    .founder__principles strong {
        white-space:
            normal;

        overflow-wrap:
            break-word;

        line-height:
            1.45;
    }


    /* ======================================================
       CONTACT
       ====================================================== */

    .contact-card {
        display:
            grid;

        grid-template-columns:
            1fr;

        grid-template-rows:
            auto auto;

        gap:
            var(--space-6);

        padding:
            1.75rem;

        width:
            100%;

        box-sizing:
            border-box;
    }


    .contact-card__content {
        grid-column:
            1;

        grid-row:
            1;

        min-width:
            0;
    }


    .contact-card__content h2 {
        font-size:
            clamp(
                2rem,
                8vw,
                2.6rem
            );

        line-height:
            1.08;
    }


    .contact-card__content p {
        font-size:
            0.95rem;

        line-height:
            1.65;
    }


    .contact-card__actions {
        grid-column:
            1;

        grid-row:
            2;

        display:
            flex;

        align-items:
            center;

        justify-content:
            flex-start;

        width:
            100%;

        min-width:
            0;
    }


    .contact-card__actions .button {
        width:
            auto;

        min-width:
            0;

        max-width:
            240px;

        padding-inline:
            1.5rem;

        white-space:
            nowrap;
    }


    /* ======================================================
       FOOTER
       ====================================================== */

    .footer-bottom {
        flex-direction:
            column;

        align-items:
            flex-start;
    }

}


/* ==========================================================
   600px
   ========================================================== */

@media (max-width: 600px) {

    /* ======================================================
       TECHNOLOGY
       ====================================================== */

    .technology-section__content {
        grid-template-columns:
            1fr;
    }


    .technology-section__logo {
        width:
            110px;

        min-height:
            110px;
    }


    /* ======================================================
       SERVICE TECHNOLOGY PILLS
       ====================================================== */

    .service-card__technologies {
        margin-top:
            var(--space-6);
    }


    /* ======================================================
       CASE STUDY
       ====================================================== */

    .case-study-architecture {
        padding:
            var(--space-4);
    }


    .case-study-outcomes {
        grid-template-columns:
            1fr;
    }


    .case-study-outcome {
        min-height:
            auto;
    }


    .case-study-impact {
        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            var(--space-4);
    }


    .service-detail__list {
        grid-template-columns:
            1fr;
    }

}


/* ==========================================================
   480px
   ========================================================== */

@media (max-width: 480px) {

    :root {
        --container-padding:
            1rem;

        --section-padding-y:
            4rem;
    }


    /* ======================================================
       HERO
       ====================================================== */

    .hero__title {
        font-size:
            clamp(
                2.2rem,
                12vw,
                3.15rem
            );
    }


    .hero__description {
        font-size:
            0.95rem;
    }


    .hero__trust {
        max-width:
            360px;

        gap:
            0.45rem;
    }


    .hero__trust-pill {
        min-height:
            34px;

        padding-inline:
            8px;

        font-size:
            0.64rem;
    }


    .hero__trust-pill:nth-child(5) {
        width:
            52%;
    }


    /* ======================================================
       DASHBOARD
       ====================================================== */

    .dashboard-card__header h2 {
        font-size:
            var(--text-lg);
    }


    .dashboard-overview__grid {
        gap:
            var(--space-2);
    }


    .dashboard-stat__content strong {
        font-size:
            0.72rem;
    }


    .dashboard-system strong,
    .workflow-item__content strong {
        font-size:
            0.64rem;
    }


    .activity-row {
        gap:
            var(--space-2);
    }


    .activity-row__name {
        font-size:
            0.7rem;
    }


    .activity-row__time {
        font-size:
            0.58rem;
    }


    /* ======================================================
       CASE STUDY
       ====================================================== */

    .case-study-feature {
        padding:
            var(--space-5);
    }


    .case-study-window__body {
        grid-template-columns:
            46px minmax(0, 1fr);

        min-height:
            230px;
    }


    .case-study-window .mock-sidebar {
        padding-inline:
            var(--space-2);
    }


    .mock-content {
        padding:
            var(--space-4);
    }


    .mock-grid {
        grid-template-columns:
            1fr 1fr;
    }


    .mock-grid > div {
        height:
            55px;
    }


    .mock-chart {
        min-height:
            90px;

        padding:
            var(--space-3);
    }


    /* ======================================================
       CONTACT
       ====================================================== */

    .contact-card {
        padding:
            1.5rem;
    }


    .contact-card__content h2 {
        font-size:
            2rem;
    }


    .contact-card__actions .button {
        max-width:
            230px;

        padding-inline:
            1.35rem;
    }


    /* ======================================================
       FOOTER
       ====================================================== */

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


    .footer-brand {
        grid-column:
            span 1;
    }

}


/* ==========================================================
   700px — ARCHITECTURE CAPABILITIES
   ========================================================== */

@media (max-width: 700px) {

    .architecture-capabilities {
        grid-template-columns:
            1fr;
    }

}


/* ==========================================================
   TOUCH DEVICES
   ========================================================== */

@media (hover: none) {

    .service-card:hover,
    .challenge-card:hover,
    .principle-card:hover,
    .dashboard-card:hover,
    .technology-section__stack span:hover,
    .hero__trust-pill:hover {
        transform:
            none;
    }


    .button:hover {
        transform:
            none;
    }

}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    .dashboard-card,
    .background-orb--one,
    .background-orb--two,
    .process-timeline::before,
    .process-step__number,
    .case-study-window,
    .founder-card__glow,
    .contact-card__glow {
        animation:
            none !important;
    }

}