/**
 * Services page — mobile responsive (section by section)
 * Scoped to .page-services (services.blade.php body class)
 */

/* ─── 1. Hero (section_1) ─── */
@media (max-width: 991.98px) {
    .page-services .section_1 {
        height: auto;
        min-height: 100svh;
        grid-template-rows: 1fr auto;
        padding-top: 76px;
        overflow-x: clip;
    }

    .page-services .section_1 .shapes {
        height: min(58vh, 460px);
        width: 100%;
    }

    .page-services .section_1 .content {
        height: min(58vh, 460px);
        width: 100%;
        padding: 0 20px;
        box-sizing: border-box;
    }

    .page-services .section_1 h1 {
        font-size: clamp(1.75rem, 7.5vw, 2.85rem) !important;
        line-height: 1.18 !important;
        padding: 0 8px;
    }

    .page-services .section_1 .orb {
        width: 160px;
        height: 160px;
        box-shadow: 0 0 28px 28px #1087df;
    }

    .page-services .section_1 .shape.shape-1 {
        width: min(340px, 78vw);
        height: min(340px, 78vw);
        margin: calc(min(340px, 78vw) / -2) 0 0 calc(min(340px, 78vw) / -2);
    }

    .page-services .section_1 .shape.shape-2 {
        width: min(220px, 52vw);
        height: min(220px, 52vw);
        margin: calc(min(220px, 52vw) / -2) 0 0 calc(min(220px, 52vw) / -2);
    }

    .page-services .section_1 .shape.shape-3 {
        width: min(140px, 34vw);
        height: min(140px, 34vw);
        margin: calc(min(140px, 34vw) / -2) 0 0 calc(min(140px, 34vw) / -2);
    }

    .page-services .section_1 h2 {
        flex-direction: column;
        gap: 6px;
        padding: 12px 16px 0;
        font-size: clamp(1.1rem, 4.5vw, 1.5rem);
    }

    .page-services .section_1 .anim-text-banner {
        white-space: normal;
    }

    .page-services .section_1 .anim-text-banner > span {
        position: relative;
        left: auto;
        transform: none;
    }

    .page-services .section_1 .anim-text-parent {
        position: relative;
        display: block;
        width: 100%;
        min-height: 1.35em;
    }

    .page-services .section_1 .anim-text-parent > .anim-text {
        left: 50%;
        transform: translateX(-50%);
        font-size: clamp(1rem, 4.2vw, 1.35rem);
    }

    .page-services .section_1 h3 {
        padding-bottom: 20px;
    }

    .page-services .section_1 .hero-content {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        margin: 0 auto;
    }
}

@media (max-width: 575.98px) {
    .page-services .section_1 {
        min-height: auto;
        padding-top: 72px;
    }

    .page-services .section_1 .shapes,
    .page-services .section_1 .content {
        height: min(52vh, 380px);
    }

    .page-services .section_1 h1 {
        font-size: clamp(1.55rem, 8vw, 2.2rem) !important;
    }

    .page-services .section_1 h3 .text {
        letter-spacing: 4px;
    }
}

/* ─── 2. Services accordion (section_2) ─── */
@media (max-width: 991.98px) {
    .page-services .tmi-svc-accordion-section.container {
        max-width: 100%;
        padding-left: 16px;
        padding-right: 16px;
    }

    .page-services .tmi-svc-accordion-section .card_custom {
        padding: 0 4px;
    }

    .page-services .tmi-svc-accordion-section .card_custom h2 {
        font-size: clamp(1.65rem, 6.5vw, 2.25rem);
        line-height: 1.2;
        text-align: center;
    }

    .page-services .tmi-svc-accordion-section .card_custom p {
        font-size: clamp(0.9rem, 3.5vw, 1rem);
        padding: 0 8px;
    }

    .page-services .tmi-svc-accordion-nav {
        justify-content: center;
    }
}

@media (max-width: 767.98px) {
    .page-services .tmi-svc-accordion-section {
        padding-left: 12px;
        padding-right: 12px;
    }

    .page-services .tmi-svc-accordion {
        min-height: 360px;
        height: min(58vh, 480px);
    }

    .page-services .tmi-svc-panel.is-active {
        flex: 0 0 min(92vw, 300px);
        min-width: min(92vw, 300px);
    }

    .page-services .tmi-svc-panel__content {
        justify-content: flex-end;
        padding: 1rem 0.85rem 1.25rem;
    }

    .page-services .tmi-svc-panel__tag {
        position: static;
        margin-bottom: 0.65rem;
        justify-content: center;
    }

    .page-services .tmi-svc-panel__title {
        font-size: clamp(1.2rem, 5vw, 1.55rem);
        max-width: 100%;
    }

    .page-services .tmi-svc-panel__desc {
        font-size: 0.88rem;
        line-height: 1.55;
        max-width: 100%;
    }

    .page-services .tmi-svc-panel__strip-btn {
        width: 40px;
        height: 40px;
        font-size: 1.25rem;
    }
}

@media (max-width: 575.98px) {
    .page-services .tmi-svc-accordion {
        min-height: 320px;
        height: min(52vh, 420px);
    }

    .page-services .tmi-svc-panel {
        flex: 0 0 52px;
        min-width: 52px;
    }

    .page-services .tmi-svc-panel.is-active {
        flex: 0 0 min(94vw, 280px);
        min-width: min(94vw, 280px);
    }

    .page-services .tmi-svc-panel__cta {
        width: 100%;
        max-width: 220px;
        justify-content: center;
        padding: 0.65rem 1rem;
        font-size: 0.82rem;
    }
}

/* ─── 3. Our Approach (section_3) ─── */
@media (max-width: 991.98px) {
    .page-services .section_3 {
        padding: 48px 16px !important;
        overflow-x: clip;
    }

    .page-services .section_3:before {
        width: 280px;
        height: 280px;
        top: -60px;
        left: -100px;
    }

    .page-services .section_3 h2 {
        font-size: clamp(1.85rem, 7vw, 2.75rem) !important;
        line-height: 1.15 !important;
        padding-bottom: 12px !important;
    }

    .page-services .section_3 .approach-body {
        flex-direction: column !important;
        align-items: center !important;
        gap: 24px !important;
        margin-top: 0 !important;
    }

    .page-services .section_3 .approach-copy {
        width: 100% !important;
        text-align: center !important;
        padding-top: 0 !important;
    }

    .page-services .section_3 .approach-copy p {
        max-width: 100% !important;
        font-size: clamp(1rem, 3.8vw, 1.2rem) !important;
        line-height: 1.65 !important;
        text-align: center !important;
    }

    .page-services .section_3 .approach-animation {
        width: 100% !important;
        justify-content: center !important;
    }

    .page-services .section_3 .team-work-animation {
        width: 100% !important;
        height: min(320px, 52vw) !important;
        max-height: 360px;
    }
}

@media (max-width: 575.98px) {
    .page-services .section_3 {
        padding: 40px 12px !important;
    }

    .page-services .section_3 .team-work-animation {
        height: min(260px, 62vw) !important;
    }
}

/* ─── 4. FAQ (section_faq) ─── */
@media (max-width: 991.98px) {
    .page-services .section_faq {
        padding: 72px 0;
        overflow-x: clip;
    }

    .page-services .faq-shell {
        padding: 0 16px;
    }

    .page-services .faq-heading h2 {
        font-size: clamp(1.75rem, 6.5vw, 2.5rem);
    }

    .page-services .faq-heading p {
        font-size: clamp(0.92rem, 3.5vw, 1.02rem);
    }
}

@media (max-width: 575.98px) {
    .page-services .section_faq {
        padding: 56px 0;
    }

    .page-services .faq-shell {
        padding: 0 12px;
    }

    .page-services .faq-list {
        gap: 12px;
    }

    .page-services .faq-item {
        border-radius: 18px;
    }

    .page-services .faq-toggle {
        padding: 16px 14px;
    }

    .page-services .faq-question {
        font-size: 0.9rem;
    }

    .page-services .faq-answer p {
        padding: 0 14px 18px;
        font-size: 0.9rem;
    }

    .page-services .faq-cta {
        padding: 22px 14px;
        border-radius: 20px;
    }

    .page-services .faq-cta .btn_custom {
        display: inline-flex;
        justify-content: center;
        width: 100%;
        max-width: 260px;
    }
}

@media (hover: none) and (pointer: coarse) {
    .page-services .faq-item:hover {
        transform: none;
    }

    .page-services .section_2 .card:hover {
        transform: none !important;
    }
}