/* ==========================================================================
   Service pages, mobile only (< 768px): compact, minimal layout.
   Loaded from includes/head.php on service pages only. Desktop is untouched.
   Goal: less scrolling between the hero and the "Submit Inquiry" CTAs.
   ========================================================================== */
@media (max-width: 767px) {

    /* 1. Section spacing: desktop uses 120-150px top/bottom */
    main .dgm-about-area,
    main .dgm-project-area,
    main .pp-skill-area,
    main .app-faq-area {
        padding-top: 48px !important;
        padding-bottom: 40px !important;
    }
    main .app-faq-heading { margin-bottom: 28px !important; }

    /* FAQ: question rows had ~32px padding above and below (111px per row) */
    main .app-faq-area .accordion-buttons {
        padding-top: 16px !important;
        padding-bottom: 16px !important;
    }

    /* 2. Hero stats: 3 compact tiles in one row */
    .pp-service-details-bottom .row {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        margin: 0 !important;
    }
    .pp-service-details-bottom .row > [class*="col-"] {
        width: auto !important;
        max-width: none !important;
        padding: 0 !important;
    }
    .pp-service-details-bottom .pp-service-details-about-item {
        height: 100%;
        margin: 0 !important;
        padding: 14px 8px 12px !important;
        border-radius: 14px !important;
        text-align: center;
    }
    .pp-service-details-bottom .pp-service-details-about-item span {
        font-size: 24px !important;
        line-height: 1.1 !important;
        margin-bottom: 4px !important;
    }
    .pp-service-details-bottom .pp-service-details-about-item p {
        font-size: 11.5px !important;
        line-height: 1.3 !important;
        margin: 0 !important;
    }

    /* 3. Card grids (service cards + info cards): one swipeable row instead of a tall stack */
    main .row:has(> [class*="col-"] > .tp-work-item),
    main .row:has(> [class*="col-"] > .pp-service-details-about-item):not(.pp-service-details-bottom .row) {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 12px;
        margin-left: 0 !important;
        margin-right: -16px !important;
        padding: 2px 16px 10px 0;
        scrollbar-width: none;
    }
    main .row:has(> [class*="col-"] > .tp-work-item)::-webkit-scrollbar,
    main .row:has(> [class*="col-"] > .pp-service-details-about-item)::-webkit-scrollbar { display: none; }
    main .row:has(> [class*="col-"] > .tp-work-item) > [class*="col-"],
    main .row:has(> [class*="col-"] > .pp-service-details-about-item):not(.pp-service-details-bottom .row) > [class*="col-"] {
        flex: 0 0 82% !important;
        max-width: 82% !important;
        width: 82% !important;
        padding: 0 !important;
        scroll-snap-align: start;
    }

    /* Service cards: size to content (were fixed at 550px) */
    main .tp-work-item {
        height: 100% !important;
        min-height: 0 !important;
        margin-bottom: 0 !important;
        padding: 20px 18px !important;
        border-radius: 18px !important;
    }
    main .tp-work-item .tp-work-number {
        height: 48px !important;
        width: auto !important;
        margin-bottom: 10px !important;
        transform: scale(.72);
        transform-origin: left top;
    }
    main .tp-work-item .tp-work-title {
        font-size: 18px !important;
        line-height: 1.25 !important;
        margin-bottom: 8px !important;
    }
    main .tp-work-item p {
        font-size: 14px !important;
        line-height: 1.5 !important;
        margin-bottom: 0 !important;
    }

    /* Info cards (industries, features...) */
    main .pp-service-details-about-item {
        height: 100%;
        margin-bottom: 0 !important;
        padding: 18px 16px !important;
        border-radius: 18px !important;
    }
    main .pp-service-details-about-item h3,
    main .pp-service-details-about-item h4 {
        font-size: 17px !important;
        line-height: 1.3 !important;
        margin-bottom: 6px !important;
    }
    main .pp-service-details-about-item p {
        font-size: 14px !important;
        line-height: 1.5 !important;
        margin-bottom: 0 !important;
    }

    /* Package cards: badge above the title (was overlapping it), smaller titles and list */
    main .pp-service-details-about-item > span[style*="position:absolute"] {
        position: static !important;
        display: inline-block !important;
        align-self: flex-start;
        font-size: 11px !important;
        letter-spacing: 1px !important;
        padding: 5px 10px !important;
        margin: 0 0 10px !important;
        width: auto !important;
    }
    main .pp-service-details-about-item > span[style*="font-weight:800"] {
        font-size: 22px !important;
        line-height: 1.2 !important;
        margin-right: 0 !important;
        width: auto !important;
    }
    main .pp-service-details-about-item li {
        font-size: 15px !important;
        line-height: 1.35 !important;
        align-items: flex-start !important;
    }
    main .pp-service-details-about-item > ul { margin-bottom: 18px !important; gap: 8px !important; }

    /* Section headings: 50px on phones wrapped to 4-6 lines */
    main .tp-section-title-grotesk,
    main .tp-section-title-grotesk span {
        font-size: 30px !important;
        line-height: 1.12 !important;
    }
    main .tp-section-title {
        font-size: 30px !important;
        line-height: 1.15 !important;
    }
    main .tp-section-title-mango {
        font-size: 32px !important;
        line-height: 1.1 !important;
    }

    /* Case study slider: the slide box was fixed at 560px around a ~210px screenshot.
       Let it fit the image and show the full screenshot (no crop). */
    main .dgm-project-active .swiper-slide,
    main .dgm-project-active .dgm-project-item,
    main .dgm-project-active .dgm-project-thumb,
    main .dgm-project-active .dgm-project-thumb > * {
        height: auto !important;
        min-height: 0 !important;
    }
    main .dgm-project-active img {
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        object-fit: contain !important;
        border-radius: 18px;
    }
    main .dgm-project-arrow { margin-bottom: 16px !important; }

    /* 4. Large side images: cap the height */
    main .dgm-about-thumb-wrap img,
    main .dgm-project-item img {
        max-height: 260px;
        width: 100%;
        object-fit: cover;
        border-radius: 18px;
    }
}