/**
 * Simple Grid Alignment Fixes
 * Clean, straightforward grid layouts with proper alignment
 * No fancy shapes or complex positioning - just symmetric grids
 */

/* ============================================
   TESTIMONIALS GRID
   ============================================ */
.testimonials-grid {
    display: grid;
    gap: 30px;
    margin-top: 50px;
}

@media (min-width: 1200px) {
    .testimonials-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .testimonials-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .testimonials-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

/* ============================================
   FEATURES GRID
   ============================================ */
.features-grid {
    display: grid;
    gap: 2rem;
}

@media (min-width: 1024px) {
    .features-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 640px) and (max-width: 1023px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 639px) {
    .features-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   CATEGORIES GRID - Equal Sizing, Flexible Count
   ============================================ */
.categories-grid {
    display: grid;
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    justify-items: center;
}

.category-card {
    width: 100%;
    max-width: 350px;
}

@media (min-width: 1024px) {
    .categories-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }
}

@media (min-width: 640px) and (max-width: 1023px) {
    .categories-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 639px) {
    .categories-grid {
        grid-template-columns: 1fr;
    }

    .category-card {
        max-width: 100%;
    }
}

/* ============================================
   STEPS GRID
   ============================================ */
.steps-grid {
    display: grid;
    gap: 2rem;
}

@media (min-width: 1024px) {
    .steps-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 640px) and (max-width: 1023px) {
    .steps-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 639px) {
    .steps-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   PRODUCTS / PLATFORMS GRID - Larger Cards
   ============================================ */
.products-grid,
.platforms-grid {
    display: grid;
    gap: 2.5rem;
    justify-items: center;
}

.product-card,
.platform-card {
    width: 100%;
    max-width: 380px;
}

@media (min-width: 1200px) {
    .products-grid,
    .platforms-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .products-grid,
    .platforms-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .products-grid,
    .platforms-grid {
        grid-template-columns: 1fr;
    }

    .product-card,
    .platform-card {
        max-width: 100%;
    }
}

/* ============================================
   BENEFITS GRID
   ============================================ */
.benefits-grid {
    display: grid;
    gap: 20px;
}

@media (min-width: 768px) {
    .benefits-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .benefits-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   STATS GRID
   ============================================ */
.stats-grid {
    display: grid;
    gap: 1.5rem;
}

@media (min-width: 1024px) {
    .stats-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 640px) and (max-width: 1023px) {
    .stats-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 480px) and (max-width: 639px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 479px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   GUARANTEES GRID
   ============================================ */
.guarantees-grid {
    display: grid;
    gap: 2rem;
}

@media (min-width: 1024px) {
    .guarantees-grid {
        grid-template-columns: repeat(2, 1fr);
        max-width: 900px;
        margin: 0 auto;
    }
}

@media (min-width: 640px) and (max-width: 1023px) {
    .guarantees-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 639px) {
    .guarantees-grid {
        grid-template-columns: 1fr;
    }
}