/**
 * Bucksalc Grid Layout Component
 *
 * Responsive grid system for card layouts
 * Based on common 3→2→1 column pattern from audit
 *
 * @version 1.0.0
 */

/* ==============================================
   CSS CUSTOM PROPERTIES
   ============================================== */

:root {
    --grid-gap: 1.5rem;
    --grid-gap-sm: 1rem;
    --grid-gap-lg: 2rem;
}

/* ==============================================
   BASE GRID
   ============================================== */

.bucksalc-grid {
    display: grid;
    gap: var(--grid-gap);
    margin-bottom: 2rem;
}

/* ==============================================
   COLUMN VARIANTS
   ============================================== */

.bucksalc-grid--1 {
    grid-template-columns: 1fr;
}

.bucksalc-grid--2 {
    grid-template-columns: repeat(2, 1fr);
}

.bucksalc-grid--3 {
    grid-template-columns: repeat(3, 1fr);
}

.bucksalc-grid--4 {
    grid-template-columns: repeat(4, 1fr);
}

/* ==============================================
   MAX-WIDTH CONSTRAINTS
   Document Library pattern - prevents stretching
   ============================================== */

.bucksalc-grid--max-width-sm > * {
    max-width: 280px;
}

.bucksalc-grid--max-width > * {
    max-width: 350px;
}

.bucksalc-grid--max-width-lg > * {
    max-width: 420px;
}

/* ==============================================
   GAP VARIANTS
   ============================================== */

.bucksalc-grid--gap-sm {
    gap: var(--grid-gap-sm);
}

.bucksalc-grid--gap-lg {
    gap: var(--grid-gap-lg);
}

.bucksalc-grid--gap-none {
    gap: 0;
}

/* ==============================================
   RESPONSIVE BEHAVIOR
   ============================================== */

/* Tablet: 3/4 columns → 2 columns */
@media (max-width: 1024px) {
    .bucksalc-grid--3,
    .bucksalc-grid--4 {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Remove max-width constraints on smaller screens */
    .bucksalc-grid--max-width > *,
    .bucksalc-grid--max-width-sm > *,
    .bucksalc-grid--max-width-lg > * {
        max-width: 100%;
    }
}

/* Mobile: All grids → 1 column */
@media (max-width: 768px) {
    .bucksalc-grid--2,
    .bucksalc-grid--3,
    .bucksalc-grid--4 {
        grid-template-columns: 1fr;
    }
}

/* ==============================================
   ALTERNATIVE RESPONSIVE PATTERN
   Keep 2 columns on tablets for certain use cases
   ============================================== */

.bucksalc-grid--tablet-2.bucksalc-grid--3,
.bucksalc-grid--tablet-2.bucksalc-grid--4 {
    grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 576px) {
    .bucksalc-grid--tablet-2.bucksalc-grid--3,
    .bucksalc-grid--tablet-2.bucksalc-grid--4 {
        grid-template-columns: 1fr;
    }
}