/* ============================================================================
   SEG Grid  ->  .seg_grid
   ----------------------------------------------------------------------------
   Responsive CSS-Grid layout primitive. The modern replacement for the legacy
   float grid (.grid / .col-1_3 / .col-1_2 / .col-1_4), which is fixed-width,
   overflows in the 769-1023px tablet band, and jumps straight from N columns
   to 1 with no intermediate step.

   Self-contained + theme-agnostic: depends on NO team CSS variables, so it
   renders identically on any site. Opt in per site by loading this
   file (e.g. a <link> in the team's header.php) and using the classes in markup
   - it never touches the legacy grid, so the two coexist during rollout.

   Fixed-count usage (exact columns on desktop, collapses N -> 2 -> 1):
       <div class="seg_grid seg_grid--3"> ...three equal children... </div>
       <div class="seg_grid seg_grid--4" style="--seg_grid_gap:24px"> ... </div>

   Auto-fit usage (fluid card list, fits as many >= min-width columns as fit):
       <div class="seg_grid seg_grid--auto" style="--seg_grid_min:240px"> ... </div>

   A child can span the full row (e.g. a lone last item on the tablet row):
       <div class="seg_grid__wide"> ... </div>

   Tokens (override inline on the element, or in team CSS):
       --seg_grid_cols       desktop column count        (set by --1.. --4)
       --seg_grid_cols_md    columns at <= 900px (tablet) (preset per modifier)
       --seg_grid_cols_sm    columns at <= 600px (phone)  (preset per modifier)
       --seg_grid_gap        gutter                       (default 32px)
       --seg_grid_min        min column width, --auto     (default 240px)
   ============================================================================ */

.seg_grid {
	display: grid;
	gap: var(--seg_grid_gap, 32px);
	grid-template-columns: repeat(var(--seg_grid_cols, 3), minmax(0, 1fr));
}

/* Desktop column-count presets, each carrying a sensible responsive curve.
   minmax(0,1fr) keeps long words / wide media from blowing a track out. */
.seg_grid--1 { --seg_grid_cols: 1; --seg_grid_cols_md: 1; --seg_grid_cols_sm: 1; }
.seg_grid--2 { --seg_grid_cols: 2; --seg_grid_cols_md: 2; --seg_grid_cols_sm: 1; }
.seg_grid--3 { --seg_grid_cols: 3; --seg_grid_cols_md: 2; --seg_grid_cols_sm: 1; }
.seg_grid--4 { --seg_grid_cols: 4; --seg_grid_cols_md: 2; --seg_grid_cols_sm: 1; }

/* Tablet: fewer columns (default 2, or the modifier's --seg_grid_cols_md) */
@media screen and (max-width: 900px) {
	.seg_grid {
		grid-template-columns: repeat(var(--seg_grid_cols_md, 2), minmax(0, 1fr));
	}
}

/* Phone: single column by default */
@media screen and (max-width: 600px) {
	.seg_grid {
		grid-template-columns: repeat(var(--seg_grid_cols_sm, 1), minmax(0, 1fr));
	}
}

/* Auto-fit mode: fluid track count driven by a minimum column width. Best for
   card lists where the exact count doesn't matter. Ignores the count presets. */
.seg_grid--auto {
	grid-template-columns: repeat(auto-fit, minmax(var(--seg_grid_min, 240px), 1fr));
}
@media screen and (max-width: 900px) {
	.seg_grid--auto {
		grid-template-columns: repeat(auto-fit, minmax(var(--seg_grid_min, 240px), 1fr));
	}
}
@media screen and (max-width: 600px) {
	.seg_grid--auto {
		grid-template-columns: repeat(auto-fit, minmax(var(--seg_grid_min, 240px), 1fr));
	}
}

/* Content + sidebar (asymmetric 2:1). Collapses to a single column on tablet.
   Use for a main content area beside a narrower rail (e.g. a contact form +
   "reach us" panel). --right = wide-then-narrow, --left = narrow-then-wide. */
.seg_grid--sidebar-right { grid-template-columns: 2fr 1fr; }
.seg_grid--sidebar-left  { grid-template-columns: 1fr 2fr; }
@media screen and (max-width: 900px) {
	.seg_grid--sidebar-right,
	.seg_grid--sidebar-left {
		grid-template-columns: 1fr;
	}
}

/* A child that should occupy the whole row on every breakpoint. */
.seg_grid > .seg_grid__wide {
	grid-column: 1 / -1;
}