/* ==========================================================================
   Homepage, mobile only (< 768px): stacked card grids become swipeable rows,
   tighter section spacing. Loaded from includes/head.php on the homepage only.
   Desktop is untouched; no content is removed or rewritten.
   ========================================================================== */
@media (max-width: 767px) {

    /* 1. Swipeable rows (next card peeks in so it is obvious you can swipe) */
    main .cs-why-grid,
    main .cs-process-grid,
    main .design-choose-area .row:has(> [class*="col-"] > .dc-premium-card),
    main .design-project-item-wrap,
    main .design-testimonial-area .row.g-4 {
        display: flex !important;
        flex-wrap: nowrap !important;
        grid-template-columns: none !important;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 12px !important;
        margin-left: 0 !important;
        margin-right: -16px !important;
        padding: 2px 16px 10px 0 !important;
        scrollbar-width: none;
    }
    main .cs-why-grid::-webkit-scrollbar,
    main .cs-process-grid::-webkit-scrollbar,
    main .design-project-item-wrap::-webkit-scrollbar,
    main .design-testimonial-area .row.g-4::-webkit-scrollbar { display: none; }

    main .cs-why-grid > *,
    main .cs-process-grid > *,
    main .design-choose-area .row:has(> [class*="col-"] > .dc-premium-card) > [class*="col-"],
    main .design-project-item-wrap > *,
    main .design-testimonial-area .row.g-4 > [class*="col-"] {
        flex: 0 0 82% !important;
        width: 82% !important;
        max-width: 82% !important;
        margin: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        scroll-snap-align: start;
    }

    /* Cards inside the rows: size to content, compact padding */
    main .cs-why-grid .cs-card,
    main .cs-process-grid .cs-card {
        height: 100%;
        min-height: 0 !important;
        padding: 22px 18px !important;
    }
    main .design-choose-area .dc-premium-card {
        height: 100%;
        min-height: 0 !important;
        margin-bottom: 0 !important;
    }
    main .design-project-item-wrap .design-project-item { margin-bottom: 0 !important; }

    /* 2. Tools & Skills: 2 x 2 grid instead of 4 stacked cards */
    main .pp-skill-area .row.gx-2.justify-content-center {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin: 0 !important;
    }
    main .pp-skill-area .row.gx-2.justify-content-center > [class*="col-"] {
        width: auto !important;
        max-width: none !important;
        padding: 0 !important;
    }
    main .pp-skill-area .pp-skill-tools-item {
        margin-bottom: 0 !important;
        padding: 18px 10px !important;
    }

    /* 3. Section spacing (desktop values of 100-150px kept on phones) */
    main .design-service-area,
    main .cs-section,
    main .design-project-area,
    main .design-choose-area,
    main .pp-skill-area,
    main .design-testimonial-area,
    main .app-faq-area {
        padding-top: 48px !important;
        padding-bottom: 40px !important;
    }
    main .des-about-2-area { padding-bottom: 32px !important; }
    main .tp-contact-form-ptb { padding-bottom: 48px !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;
    }
    main .app-faq-heading { margin-bottom: 24px !important; }
}