/* ========================================
   COMMVIO — Responsive Overrides
   Mobile-first breakpoint system
   ======================================== */

/* ── 480px — Small Phones Up ── */
@media (min-width: 480px) {
    .pillars__list {
        grid-template-columns: repeat(2, 1fr);
    }

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

/* ── 768px — Tablets ── */
@media (min-width: 768px) {
    .header__nav {
        display: flex;
    }

    .header__hamburger {
        display: none;
    }

    .header__cta {
        display: inline-flex;
    }

    .hero {
        min-height: 90vh;
    }

    .hero__content {
        max-width: 640px;
    }

    .hero__visual {
        opacity: 0.08;
    }

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

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

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

    .footer__grid {
        grid-template-columns: 1.5fr 1fr 1fr;
    }

    .footer__bottom {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .contact-layout {
        grid-template-columns: 1fr 1.5fr;
    }

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

    .contact-form__grid .form-group--full {
        grid-column: span 2;
    }

    .cta-section {
        padding: var(--space-20) var(--space-16);
        border-radius: var(--radius-xl);
    }
}

/* ── 1024px — Landscape Tablets / Small Desktops ── */
@media (min-width: 1024px) {
    :root {
        --section-gap: clamp(6rem, 10vw, 10rem);
    }

    .hero {
        min-height: 100vh;
        min-height: 100dvh;
    }

    .hero__content {
        max-width: 780px;
    }

    .hero__visual {
        opacity: 0.07;
        width: 50%;
    }

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

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

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

    .footer__grid {
        grid-template-columns: 1.5fr 1fr 1fr 1fr;
    }

}

/* ── Process page — mobile (≤ 860px): clean accordion list ── */
@media (max-width: 860px) {
    .process-qualities {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }

    /* Drop the zigzag spine entirely */
    .journey::before,
    .journey__center-col,
    .journey__spacer {
        display: none;
    }

    /* Cards stack as a plain vertical list */
    .journey__step,
    .journey__step--left,
    .journey__step--right {
        flex-direction: column;
        padding-bottom: var(--space-4);
    }

    /* Full-width cards, no side padding offset from zigzag */
    .journey__step--left .journey__card-col,
    .journey__step--right .journey__card-col {
        flex: none;
        width: 100%;
        padding: 0;
    }

    /* Card: left accent stripe so each phase still feels distinct */
    .journey__card {
        border-left-width: 3px;
        border-left-color: var(--color-accent-muted);
    }
    .journey__card.is-open {
        border-left-color: var(--color-accent);
    }

    /* Details: single column */
    .journey__details {
        grid-template-columns: 1fr;
    }

    /* Collaboration: single column */
    .collab-grid {
        grid-template-columns: 1fr;
    }

    /* Phase-map: tighter edge fades on small screens */
    .phase-map {
        -webkit-mask-image: linear-gradient(to right, transparent, #000 3%, #000 97%, transparent);
        mask-image: linear-gradient(to right, transparent, #000 3%, #000 97%, transparent);
    }
}

@media (max-width: 600px) {
    .journey__card-title {
        font-size: var(--text-lg);
    }

    .journey__card-num {
        font-size: var(--text-2xl);
    }

    .journey__card-head {
        padding: var(--space-5);
    }

    .journey__card-body-inner {
        padding: 0 var(--space-5) var(--space-5);
    }

    .collab-card {
        padding: var(--space-6);
    }

    .section--qualities {
        padding: var(--space-10) 0;
    }

    /* Phase nav: smaller dots on tiny screens */
    .phase-nav__dot {
        min-width: 32px;
        height: 28px;
        font-size: 9px;
    }
}

/* ── 1280px — Desktops ── */
@media (min-width: 1280px) {
    .pillars__list {
        grid-template-columns: repeat(6, 1fr);
    }

    .cta-section {
        padding: var(--space-24) var(--space-20);
    }

    .footer__grid {
        grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    }
}

/* ── 1440px — Wide Screens ── */
@media (min-width: 1440px) {
    :root {
        --text-hero: 5rem;
    }
}
/* ── Services page — responsive ── */
@media (max-width: 1024px) {
    .srv-overview-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 860px) {
    .srv-section__body {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }

    .srv-section__desc {
        max-width: 100%;
    }

    .srv-section__head-bg-num {
        display: none;
    }

    .srv-caps-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-4);
    }

    .srv-connect__grid {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }

    .srv-connect__item {
        text-align: left;
        display: flex;
        align-items: flex-start;
        gap: var(--space-5);
    }

    .srv-connect__icon {
        margin: 0;
        flex-shrink: 0;
    }

    .srv-connect__desc {
        max-width: 100%;
        margin: 0;
    }

    .srv-nav__btn-name {
        display: none;
    }

    .srv-nav__btn {
        padding: var(--space-2);
        min-width: 36px;
        justify-content: center;
    }

    .srv-nav__btn-num {
        opacity: 1;
        font-size: 11px;
    }
}

@media (max-width: 640px) {
    .srv-overview-grid {
        grid-template-columns: 1fr;
    }

    .srv-hero-strip {
        gap: var(--space-2) var(--space-4);
    }

    .srv-hero-strip__name {
        display: none;
    }

    .srv-section__head {
        padding: var(--space-10) 0 var(--space-8);
    }

    .srv-section__head-icon {
        width: 48px;
        height: 48px;
    }

    .srv-section__head-title {
        font-size: var(--text-2xl);
    }

    .srv-section__head-hook {
        font-size: var(--text-sm);
    }

    .srv-section__body {
        padding: var(--space-8) 0 var(--space-6);
    }

    .srv-caps-grid {
        grid-template-columns: 1fr;
        padding-bottom: var(--space-10);
    }

    .srv-cap-card:hover {
        transform: none;
    }
}