/* ========================================
   Starter Grid System

   A responsive CSS Grid framework for product cards,
   post archives, and generic content layouts.

   Usage:
     <div class="starter-grid starter-grid--4">
       <div class="starter-grid__item">...</div>
     </div>

   Modifiers:
     starter-grid--2   2 columns (desktop)
     starter-grid--3   3 columns (desktop) ← default
     starter-grid--4   4 columns (desktop)
     starter-grid--5   5 columns (desktop)
     starter-grid--6   6 columns (desktop)

   Density:
     starter-grid--dense   Smaller gaps, tighter layout
     starter-grid--loose   Larger gaps, more breathing room

   Alignment:
     starter-grid--center  Center items in row

   Responsive overrides:
     .starter-grid--mobile-1    Force 1 col on mobile
     .starter-grid--tablet-2    Force 2 cols on tablet
     .starter-grid--desktop-3   Force 3 cols on desktop

   Breakpoints:
     Mobile:   < 640px
     Tablet:   640px – 1023px
     Desktop:  ≥ 1024px
   ======================================== */


/* -------------------------------------------------------
   BASE
   ------------------------------------------------------- */

.starter-grid {
	--grid-gap:    1.5rem;
	--grid-min:    260px;
	--grid-max:    1fr;
	--grid-cols:   3;  /* default desktop columns */

	display: grid;
	gap: var(--grid-gap);
	grid-template-columns:
		repeat(auto-fill, minmax(min(var(--grid-min), 100%), var(--grid-max)));
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Grid items should fill their cell */
.starter-grid > * {
	min-width: 0;  /* prevent overflow in grid cells */
}


/* -------------------------------------------------------
   COLUMN PRESETS (desktop)
   Each preset sets auto-fill minmax thresholds
   that naturally resolve to N columns at desktop widths.
   ------------------------------------------------------- */

.starter-grid--2 {
	--grid-min: min(380px, 100%);
}

.starter-grid--3 {
	--grid-min: min(260px, 100%);
}

.starter-grid--4 {
	--grid-min: min(220px, 100%);
}

.starter-grid--5 {
	--grid-min: min(180px, 100%);
}

.starter-grid--6 {
	--grid-min: min(150px, 100%);
}


/* -------------------------------------------------------
   EXPLICIT COLUMNS (override auto-fill)
   Use when you need exact column counts, not fluid.
   ------------------------------------------------------- */

.starter-grid--exact {
	grid-template-columns: repeat(var(--grid-cols), 1fr);
}

.starter-grid--exact.starter-grid--2 { --grid-cols: 2; }
.starter-grid--exact.starter-grid--3 { --grid-cols: 3; }
.starter-grid--exact.starter-grid--4 { --grid-cols: 4; }
.starter-grid--exact.starter-grid--5 { --grid-cols: 5; }
.starter-grid--exact.starter-grid--6 { --grid-cols: 6; }


/* -------------------------------------------------------
   DENSITY
   ------------------------------------------------------- */

.starter-grid--dense {
	--grid-gap: 1rem;
}

.starter-grid--loose {
	--grid-gap: 2.5rem;
}


/* -------------------------------------------------------
   ALIGNMENT
   ------------------------------------------------------- */

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

.starter-grid--stretch > * {
	height: 100%;
}


/* -------------------------------------------------------
   ASPECT RATIO CONTROL
   ------------------------------------------------------- */

.starter-grid__item--ratio {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 10px;
}

.starter-grid__item--ratio-1-1  { aspect-ratio: 1 / 1; }
.starter-grid__item--ratio-3-2  { aspect-ratio: 3 / 2; }
.starter-grid__item--ratio-16-9 { aspect-ratio: 16 / 9; }


/* -------------------------------------------------------
   RESPONSIVE — TABLET (640px – 1023px)
   Default: 2 columns, fluid
   Override with .starter-grid--tablet-*
   ------------------------------------------------------- */

@media (max-width: 1023px) and (min-width: 640px) {

	/* Fluid presets collapse to 2 cols by default */
	.starter-grid {
		--grid-min: min(280px, 100%);
	}

	/* Explicit overrides */
	.starter-grid--tablet-1 {
		grid-template-columns: 1fr !important;
	}

	.starter-grid--tablet-2 {
		--grid-min: min(260px, 100%);
	}

	.starter-grid--tablet-3 {
		--grid-min: min(200px, 100%);
	}

	/* Exact column overrides */
	.starter-grid--exact.starter-grid--tablet-1 { --grid-cols: 1; }
	.starter-grid--exact.starter-grid--tablet-2 { --grid-cols: 2; }
	.starter-grid--exact.starter-grid--tablet-3 { --grid-cols: 3; }
}


/* -------------------------------------------------------
   RESPONSIVE — MOBILE (< 640px)
   Default: 2 columns, smaller gaps
   Override with .starter-grid--mobile-*
   ------------------------------------------------------- */

@media (max-width: 639px) {

	.starter-grid {
		--grid-gap: 1rem;
		--grid-min: min(160px, 100%);
	}

	/* Single column */
	.starter-grid--mobile-1 {
		grid-template-columns: 1fr !important;
	}

	/* Keep 2 columns */
	.starter-grid--mobile-2 {
		--grid-min: min(160px, 100%);
	}

	/* Exact column overrides */
	.starter-grid--exact.starter-grid--mobile-1 { --grid-cols: 1; }
	.starter-grid--exact.starter-grid--mobile-2 { --grid-cols: 2; }
}


/* -------------------------------------------------------
   RESPONSIVE — SMALL MOBILE (< 400px)
   Force single column on very small screens
   unless explicitly overridden
   ------------------------------------------------------- */

@media (max-width: 399px) {

	.starter-grid:not(.starter-grid--mobile-2) {
		grid-template-columns: 1fr !important;
	}
}


/* -------------------------------------------------------
   SPAN (for featured / wide items)
   ------------------------------------------------------- */

.starter-grid__item--span-2 {
	grid-column: span 2;
}

.starter-grid__item--span-full {
	grid-column: 1 / -1;
}

/* Hide span on mobile — they don't fit */
@media (max-width: 639px) {
	.starter-grid__item--span-2 {
		grid-column: span 1;
	}
}


/* -------------------------------------------------------
   STAGGER (animated entrance)
   Paired with .reveal from animations.css
   ------------------------------------------------------- */

.starter-grid .reveal:nth-child(1)  { --stagger: 0ms; }
.starter-grid .reveal:nth-child(2)  { --stagger: 60ms; }
.starter-grid .reveal:nth-child(3)  { --stagger: 120ms; }
.starter-grid .reveal:nth-child(4)  { --stagger: 180ms; }
.starter-grid .reveal:nth-child(5)  { --stagger: 240ms; }
.starter-grid .reveal:nth-child(6)  { --stagger: 300ms; }
.starter-grid .reveal:nth-child(7)  { --stagger: 360ms; }
.starter-grid .reveal:nth-child(8)  { --stagger: 420ms; }
.starter-grid .reveal:nth-child(9)  { --stagger: 480ms; }
.starter-grid .reveal:nth-child(10) { --stagger: 540ms; }
.starter-grid .reveal:nth-child(11) { --stagger: 600ms; }
.starter-grid .reveal:nth-child(12) { --stagger: 660ms; }

.starter-grid .reveal {
	transition-delay: var(--stagger, 0ms);
}

/* Disable stagger on reduced motion */
@media (prefers-reduced-motion: reduce) {
	.starter-grid .reveal {
		transition-delay: 0ms;
	}
}