/* Responsive refinements for AxioraLab service pages. */

.service-page {
    padding-top: clamp(7rem, 14vw, 10rem) !important;
    padding-bottom: clamp(4rem, 8vw, 6rem) !important;
}

.service-hero {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.9fr) !important;
    gap: clamp(2rem, 5vw, 4rem) !important;
}

.service-title {
    font-size: clamp(2.35rem, 7vw, 3.5rem) !important;
    overflow-wrap: anywhere;
}

.service-lead {
    font-size: clamp(1rem, 2.4vw, 1.2rem) !important;
}

.deliverables,
.process-section,
.cta-box,
.highlight-card,
.use-case {
    border-radius: 16px !important;
}

.deliverables {
    padding: clamp(1.35rem, 4vw, 2.5rem) !important;
}

.deliverables li {
    line-height: 1.55;
}

.highlights,
.use-cases,
.process-steps {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)) !important;
}

.process-section,
.cta-box {
    padding: clamp(1.5rem, 5vw, 3rem) !important;
}

.cta-box .btn {
    max-width: 100%;
}

@media (max-width: 860px) {
    .service-hero {
        grid-template-columns: 1fr !important;
        margin-bottom: 3rem !important;
    }

    .service-icon-big {
        width: 68px !important;
        height: 68px !important;
        border-radius: 16px !important;
        font-size: 2rem !important;
    }

    .back-link {
        margin-bottom: 2rem !important;
    }
}

@media (max-width: 768px) {
    .service-page .main-nav {
        max-height: calc(100vh - 88px);
        overflow-y: auto;
    }

    .process-steps .step {
        text-align: left !important;
        padding: 1.1rem !important;
        background: rgba(255, 255, 255, 0.02);
        border: var(--border-subtle);
        border-radius: 14px;
    }

    .step-num {
        margin: 0 0 1rem 0 !important;
    }
}

@media (max-width: 520px) {
    .service-page {
        padding-top: 6.5rem !important;
    }

    .service-title {
        font-size: clamp(2.05rem, 11vw, 2.75rem) !important;
    }

    .deliverables li {
        gap: 0.65rem !important;
    }

    .highlight-card,
    .use-case {
        padding: 1.35rem !important;
        text-align: left !important;
    }

    .highlight-card i,
    .use-case i {
        margin-bottom: 0.75rem !important;
    }

    .cta-box {
        text-align: left !important;
    }

    .cta-box .btn {
        width: 100%;
    }
}