/**
 * Grid System
 * 12-column responsive grid implementation
 * Implements specifications from TECHTRONIC_DESIGN_SYSTEM.md Section 5
 *
 * @package Techtronic_Learning
 * @since 1.0.0
 */

/* ==========================================================================
   12-Column Grid System
   ========================================================================== */

.grid {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: var(--grid-gutter);
	margin-left: auto;
	margin-right: auto;
}

/* Grid with custom gap */
.grid--gap-sm {
	gap: var(--spacing-md);
}

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

.grid--no-gap {
	gap: 0;
}

/* ==========================================================================
   Column Spans (1-12)
   ========================================================================== */

.col-1 {
	grid-column: span 1;
}

.col-2 {
	grid-column: span 2;
}

.col-3 {
	grid-column: span 3;
}

.col-4 {
	grid-column: span 4;
}

.col-5 {
	grid-column: span 5;
}

.col-6 {
	grid-column: span 6;
}

.col-7 {
	grid-column: span 7;
}

.col-8 {
	grid-column: span 8;
}

.col-9 {
	grid-column: span 9;
}

.col-10 {
	grid-column: span 10;
}

.col-11 {
	grid-column: span 11;
}

.col-12 {
	grid-column: span 12;
}

/* Full width column */
.col-full {
	grid-column: 1 / -1;
}

/* ==========================================================================
   Common Layout Patterns
   ========================================================================== */

/* Two equal columns (6/6) */
.grid--2-col {
	grid-template-columns: repeat(2, 1fr);
}

/* Three equal columns (4/4/4) */
.grid--3-col {
	grid-template-columns: repeat(3, 1fr);
}

/* Four equal columns (3/3/3/3) */
.grid--4-col {
	grid-template-columns: repeat(4, 1fr);
}

/* Sidebar layouts */
.grid--sidebar-right {
	grid-template-columns: 2fr 1fr; /* 66/33 split */
}

.grid--sidebar-left {
	grid-template-columns: 1fr 2fr; /* 33/66 split */
}

/* Content-sidebar layout (8/4 columns) */
.grid--content-sidebar {
	grid-template-columns: 8fr 4fr; /* 70/30 split */
}

/* Sidebar-content layout (4/8 columns) */
.grid--sidebar-content {
	grid-template-columns: 4fr 8fr; /* 30/70 split */
}

/* Three quarters / one quarter */
.grid--3-1 {
	grid-template-columns: 3fr 1fr; /* 75/25 split */
}

.grid--1-3 {
	grid-template-columns: 1fr 3fr; /* 25/75 split */
}

/* ==========================================================================
   Auto-fit and Auto-fill Grids
   ========================================================================== */

.grid--auto-fit {
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.grid--auto-fill {
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

/* Card grids with specific min-widths */
.grid--cards-sm {
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.grid--cards-md {
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.grid--cards-lg {
	grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
}

/* ==========================================================================
   Column Alignment
   ========================================================================== */

.col--start {
	justify-self: start;
}

.col--center {
	justify-self: center;
}

.col--end {
	justify-self: end;
}

.col--stretch {
	justify-self: stretch;
}

/* Vertical alignment */
.col--top {
	align-self: start;
}

.col--middle {
	align-self: center;
}

.col--bottom {
	align-self: end;
}

/* ==========================================================================
   Grid Alignment
   ========================================================================== */

.grid--items-start {
	align-items: start;
}

.grid--items-center {
	align-items: center;
}

.grid--items-end {
	align-items: end;
}

.grid--items-stretch {
	align-items: stretch;
}

.grid--justify-start {
	justify-items: start;
}

.grid--justify-center {
	justify-items: center;
}

.grid--justify-end {
	justify-items: end;
}

/* ==========================================================================
   Responsive Breakpoints
   ========================================================================== */

/* Large desktop (1200px+) - Default grid */
@media (min-width: 1200px) {
	.col-xl-1 { grid-column: span 1; }
	.col-xl-2 { grid-column: span 2; }
	.col-xl-3 { grid-column: span 3; }
	.col-xl-4 { grid-column: span 4; }
	.col-xl-5 { grid-column: span 5; }
	.col-xl-6 { grid-column: span 6; }
	.col-xl-7 { grid-column: span 7; }
	.col-xl-8 { grid-column: span 8; }
	.col-xl-9 { grid-column: span 9; }
	.col-xl-10 { grid-column: span 10; }
	.col-xl-11 { grid-column: span 11; }
	.col-xl-12 { grid-column: span 12; }
}

/* Desktop (992px - 1199px) */
@media (max-width: 1199px) {
	.grid--4-col {
		grid-template-columns: repeat(3, 1fr);
	}

	.col-lg-1 { grid-column: span 1; }
	.col-lg-2 { grid-column: span 2; }
	.col-lg-3 { grid-column: span 3; }
	.col-lg-4 { grid-column: span 4; }
	.col-lg-5 { grid-column: span 5; }
	.col-lg-6 { grid-column: span 6; }
	.col-lg-7 { grid-column: span 7; }
	.col-lg-8 { grid-column: span 8; }
	.col-lg-9 { grid-column: span 9; }
	.col-lg-10 { grid-column: span 10; }
	.col-lg-11 { grid-column: span 11; }
	.col-lg-12 { grid-column: span 12; }
}

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

	.grid--sidebar-right,
	.grid--sidebar-left,
	.grid--content-sidebar,
	.grid--sidebar-content {
		grid-template-columns: 1fr;
	}

	.col-md-1 { grid-column: span 1; }
	.col-md-2 { grid-column: span 2; }
	.col-md-3 { grid-column: span 3; }
	.col-md-4 { grid-column: span 4; }
	.col-md-5 { grid-column: span 5; }
	.col-md-6 { grid-column: span 6; }
	.col-md-7 { grid-column: span 7; }
	.col-md-8 { grid-column: span 8; }
	.col-md-9 { grid-column: span 9; }
	.col-md-10 { grid-column: span 10; }
	.col-md-11 { grid-column: span 11; }
	.col-md-12 { grid-column: span 12; }
}

/* Mobile (up to 767px) */
@media (max-width: 767px) {
	.grid {
		grid-template-columns: 1fr;
		gap: var(--spacing-md);
	}

	.grid--2-col,
	.grid--3-col,
	.grid--4-col {
		grid-template-columns: 1fr;
	}

	/* All columns stack on mobile */
	[class*="col-"] {
		grid-column: span 12;
	}

	.col-sm-1 { grid-column: span 1; }
	.col-sm-2 { grid-column: span 2; }
	.col-sm-3 { grid-column: span 3; }
	.col-sm-4 { grid-column: span 4; }
	.col-sm-5 { grid-column: span 5; }
	.col-sm-6 { grid-column: span 6; }
	.col-sm-7 { grid-column: span 7; }
	.col-sm-8 { grid-column: span 8; }
	.col-sm-9 { grid-column: span 9; }
	.col-sm-10 { grid-column: span 10; }
	.col-sm-11 { grid-column: span 11; }
	.col-sm-12 { grid-column: span 12; }
}

/* ==========================================================================
   Grid Helpers
   ========================================================================== */

/* Hide columns at specific breakpoints */
@media (max-width: 767px) {
	.col--hide-mobile {
		display: none;
	}
}

@media (max-width: 991px) {
	.col--hide-tablet {
		display: none;
	}
}

@media (min-width: 992px) {
	.col--hide-desktop {
		display: none;
	}
}

/* Column order */
.col--order-first {
	order: -1;
}

.col--order-last {
	order: 999;
}

/* ==========================================================================
   Nested Grids
   ========================================================================== */

.grid .grid {
	margin-left: 0;
	margin-right: 0;
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
	.grid {
		display: block;
	}

	[class*="col-"] {
		display: block;
		width: 100%;
		page-break-inside: avoid;
	}

	.col--hide-print {
		display: none;
	}
}