/*
===========================================
VRiba Solutions - Equal Row Distribution System
===========================================
This CSS file provides a system for ensuring equal distribution
of components across horizontal rows in responsive layouts.

Version: 1.0
Date: 2024
Author: AI Assistant
===========================================
*/

/* ==========================================
   EQUAL ROW DISTRIBUTION SYSTEM
   ========================================== */

/* Base container for equal distribution */
.equal-rows-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    align-items: stretch;
}

/* Equal distribution for different component counts */
.equal-rows-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.equal-rows-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.equal-rows-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.equal-rows-5 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}

.equal-rows-6 {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
}

/* Auto-distribution system that calculates optimal rows */
.equal-rows-auto {
    display: grid;
    gap: 20px;
    justify-items: center;
}

/* ==========================================
   RESPONSIVE BREAKPOINTS
   ========================================== */

/* Large Desktop (1200px+) */
@media (min-width: 1200px) {
    .equal-rows-2 { grid-template-columns: repeat(2, 1fr); }
    .equal-rows-3 { grid-template-columns: repeat(3, 1fr); }
    .equal-rows-4 { grid-template-columns: repeat(4, 1fr); }
    .equal-rows-5 { grid-template-columns: repeat(5, 1fr); }
    .equal-rows-6 { grid-template-columns: repeat(6, 1fr); }
    
    /* Auto distribution for large screens */
    .equal-rows-auto.items-2 { grid-template-columns: repeat(2, 1fr); }
    .equal-rows-auto.items-3 { grid-template-columns: repeat(3, 1fr); }
    .equal-rows-auto.items-4 { grid-template-columns: repeat(4, 1fr); }
    .equal-rows-auto.items-5 { grid-template-columns: repeat(5, 1fr); }
    .equal-rows-auto.items-6 { grid-template-columns: repeat(3, 1fr); }
    .equal-rows-auto.items-7 { grid-template-columns: repeat(4, 1fr); }
    .equal-rows-auto.items-8 { grid-template-columns: repeat(4, 1fr); }
    .equal-rows-auto.items-9 { grid-template-columns: repeat(3, 1fr); }
    .equal-rows-auto.items-10 { grid-template-columns: repeat(5, 1fr); }
    .equal-rows-auto.items-11 { grid-template-columns: repeat(4, 1fr); }
    .equal-rows-auto.items-12 { grid-template-columns: repeat(4, 1fr); }
}

/* Desktop (992px - 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
    .equal-rows-2 { grid-template-columns: repeat(2, 1fr); }
    .equal-rows-3 { grid-template-columns: repeat(3, 1fr); }
    .equal-rows-4 { grid-template-columns: repeat(4, 1fr); }
    .equal-rows-5 { grid-template-columns: repeat(3, 1fr); }
    .equal-rows-6 { grid-template-columns: repeat(3, 1fr); }
    
    /* Auto distribution for desktop */
    .equal-rows-auto.items-2 { grid-template-columns: repeat(2, 1fr); }
    .equal-rows-auto.items-3 { grid-template-columns: repeat(3, 1fr); }
    .equal-rows-auto.items-4 { grid-template-columns: repeat(4, 1fr); }
    .equal-rows-auto.items-5 { grid-template-columns: repeat(3, 1fr); }
    .equal-rows-auto.items-6 { grid-template-columns: repeat(3, 1fr); }
    .equal-rows-auto.items-7 { grid-template-columns: repeat(4, 1fr); }
    .equal-rows-auto.items-8 { grid-template-columns: repeat(4, 1fr); }
    .equal-rows-auto.items-9 { grid-template-columns: repeat(3, 1fr); }
    .equal-rows-auto.items-10 { grid-template-columns: repeat(4, 1fr); }
    .equal-rows-auto.items-11 { grid-template-columns: repeat(4, 1fr); }
    .equal-rows-auto.items-12 { grid-template-columns: repeat(4, 1fr); }
}

/* Tablet (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    .equal-rows-2 { grid-template-columns: repeat(2, 1fr); }
    .equal-rows-3 { grid-template-columns: repeat(2, 1fr); }
    .equal-rows-4 { grid-template-columns: repeat(2, 1fr); }
    .equal-rows-5 { grid-template-columns: repeat(2, 1fr); }
    .equal-rows-6 { grid-template-columns: repeat(2, 1fr); }
    
    /* Auto distribution for tablet */
    .equal-rows-auto.items-2 { grid-template-columns: repeat(2, 1fr); }
    .equal-rows-auto.items-3 { grid-template-columns: repeat(2, 1fr); }
    .equal-rows-auto.items-4 { grid-template-columns: repeat(2, 1fr); }
    .equal-rows-auto.items-5 { grid-template-columns: repeat(2, 1fr); }
    .equal-rows-auto.items-6 { grid-template-columns: repeat(2, 1fr); }
    .equal-rows-auto.items-7 { grid-template-columns: repeat(2, 1fr); }
    .equal-rows-auto.items-8 { grid-template-columns: repeat(2, 1fr); }
    .equal-rows-auto.items-9 { grid-template-columns: repeat(2, 1fr); }
    .equal-rows-auto.items-10 { grid-template-columns: repeat(2, 1fr); }
    .equal-rows-auto.items-11 { grid-template-columns: repeat(2, 1fr); }
    .equal-rows-auto.items-12 { grid-template-columns: repeat(2, 1fr); }
}

/* Mobile (576px - 767px) */
@media (min-width: 576px) and (max-width: 767px) {
    .equal-rows-2,
    .equal-rows-3,
    .equal-rows-4,
    .equal-rows-5,
    .equal-rows-6 {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    
    /* Auto distribution for mobile */
    .equal-rows-auto {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
}

/* Small Mobile (< 576px) */
@media (max-width: 575px) {
    .equal-rows-2,
    .equal-rows-3,
    .equal-rows-4,
    .equal-rows-5,
    .equal-rows-6 {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    /* Auto distribution for small mobile */
    .equal-rows-auto {
        grid-template-columns: 1fr;
        gap: 15px;
    }
}

/* ==========================================
   SMART DISTRIBUTION ALGORITHMS
   ========================================== */

/* Smart distribution for odd numbers */
.equal-rows-smart-5 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.equal-rows-smart-5 > :nth-child(3) {
    grid-column: 2;
}

.equal-rows-smart-7 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.equal-rows-smart-7 > :nth-child(4) {
    grid-column: 2;
}

.equal-rows-smart-9 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.equal-rows-smart-11 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.equal-rows-smart-11 > :nth-child(4),
.equal-rows-smart-11 > :nth-child(8) {
    grid-column: 2;
}

/* ==========================================
   COMPONENT-SPECIFIC OVERRIDES
   ========================================== */

/* Customer logos - 6 items */
.customer-logos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    justify-items: center;
}

@media (max-width: 991px) {
    .customer-logos-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
}

@media (max-width: 575px) {
    .customer-logos-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
}

/* Industry cards - 6 items */
.industry-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

@media (max-width: 991px) {
    .industry-cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
}

@media (max-width: 575px) {
    .industry-cards-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
}

/* Stats section - 4 items */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

@media (max-width: 991px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
}

@media (max-width: 575px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
}

/* Service cards - 4 items */
.service-cards-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ==========================================
   UTILITY CLASSES
   ========================================== */

/* Equal height items */
.equal-height {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.equal-height > * {
    flex: 1;
}

/* Center alignment for odd distributions */
.center-odd-item {
    grid-column: 1 / -1;
    justify-self: center;
}

/* Last row centering for uneven distributions */
.last-row-center {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    justify-items: center;
}

/* ==========================================
   FLEXBOX FALLBACK
   ========================================== */

/* Fallback for older browsers */
.equal-rows-flex {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.equal-rows-flex > * {
    flex: 1 1 calc(33.333% - 20px);
    min-width: 250px;
    max-width: 400px;
}

@media (max-width: 991px) {
    .equal-rows-flex > * {
        flex: 1 1 calc(50% - 15px);
        min-width: 200px;
    }
}

@media (max-width: 575px) {
    .equal-rows-flex > * {
        flex: 1 1 100%;
        min-width: 100%;
    }
}

/* ==========================================
   ACCESSIBILITY & PERFORMANCE
   ========================================== */

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .equal-rows-container,
    .equal-rows-2,
    .equal-rows-3,
    .equal-rows-4,
    .equal-rows-5,
    .equal-rows-6,
    .equal-rows-auto {
        transition: none;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .equal-rows-container,
    .equal-rows-2,
    .equal-rows-3,
    .equal-rows-4,
    .equal-rows-5,
    .equal-rows-6,
    .equal-rows-auto {
        border: 1px solid #000;
    }
}

/* Print styles */
@media print {
    .equal-rows-2,
    .equal-rows-3,
    .equal-rows-4,
    .equal-rows-5,
    .equal-rows-6,
    .equal-rows-auto {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        page-break-inside: avoid;
    }
}