/**
 * GenerateBlocks Global Styles - Grid Systems
 * ============================================================================
 *
 * This file contains responsive grid utilities designed for GenerateBlocks
 * Global Styles. These classes create responsive column layouts.
 *
 * BEM Structure:
 * - Block: .gbp-grid
 * - Modifiers: -3 (3 columns), -4 (4 columns)
 *
 * Global Classes Available:
 * - gbp-grid-3 → 3-column grid (→ 2 on tablet → 1 on mobile)
 * - gbp-grid-4 → 4-column grid (→ 2 on tablet → 1 on mobile)
 *
 * Breakpoints:
 * - Desktop: 3 or 4 columns
 * - Tablet (≤1024px): 2 columns
 * - Mobile (≤767px): 1 column
 *
 * @package Medici
 * @version 3.0.0
 * @since 2.0.0 Original in layout.css
 * @since 3.0.0 Extracted to global-styles for GenerateBlocks integration
 */

/* ========================================
   1. GRID 3 COLUMNS
   Global Style: gbp-grid-3
   Use for: Services, Testimonials, Feature cards
   ======================================== */

.gbp-grid-3 {
	display: grid;
	gap: 2rem;
	grid-template-columns: repeat(3, 1fr);
}

/* Tablet: 2 columns */
@media (width <= 1024px) {
	.gbp-grid-3 {
		gap: 1.5rem;
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Mobile: 1 column */
@media (width <= 767px) {
	.gbp-grid-3 {
		gap: 1.5rem;
		grid-template-columns: 1fr;
	}
}

/* ========================================
   2. GRID 4 COLUMNS
   Global Style: gbp-grid-4
   Use for: Team members, Value propositions
   ======================================== */

.gbp-grid-4 {
	display: grid;
	gap: 2rem;
	grid-template-columns: repeat(4, 1fr);
}

/* Tablet: 2 columns */
@media (width <= 1024px) {
	.gbp-grid-4 {
		gap: 1.5rem;
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Mobile: 1 column */
@media (width <= 767px) {
	.gbp-grid-4 {
		gap: 1.5rem;
		grid-template-columns: 1fr;
	}
}