/**
 * Gastrade — Grid & layout system (mobile-first).
 *
 * Breakpoints (min-width):
 *   xs  0      → 1 column
 *   sm  576px  → 1–2 columns
 *   md  768px  → 2–4 columns
 *   lg  1024px → 12-column editorial grid
 *   xl  1280px → wide layouts
 *   xxl 1520px → max container
 */

:root {
	/* —— Layout (use these — never hardcode) —— */
	--gt-container-max: 1520px;
	--gt-container-padding: clamp(24px, 5vw, 120px);
	--gt-gutter: 15px;
	--bs-gutter-x: var(--gt-gutter);
	--bs-gutter-y: var(--gt-gutter);
	--gt-section-gap: clamp(48px, 8vw, 120px);
	--gt-grid-columns: 12;

	/* —— Brand —— */
	--gt-navy: #005282;
	--gt-cyan: #00aeef;

	/* —— Spacing scale (8px base only) —— */
	--gt-space-1: 8px;
	--gt-space-2: 16px;
	--gt-space-3: 24px;
	--gt-space-4: 32px;
	--gt-space-5: 48px;
	--gt-space-6: 64px;

	/* Legacy aliases */
	--grid-max-width: var(--gt-container-max);
	--container-padding: var(--gt-container-padding);
	--grid-gutter: var(--gt-gutter);
	--section-space-y: var(--gt-section-gap);
	--grid-columns: var(--gt-grid-columns);
	--gastrade-container-max: var(--gt-container-max);
}

/* —— Container (Bootstrap .container + theme) —— */
.container,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl,
.gt-container {
	width: 100%;
	max-width: var(--gt-container-max) !important;
	margin-inline: auto;
	padding-inline: var(--gt-container-padding) !important;
	box-sizing: border-box;
}

/* —— Grid: mobile = single column —— */
.gt-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	column-gap: var(--gt-gutter);
	row-gap: var(--gt-gutter);
}

.gt-grid > * {
	min-width: 0;
}

/* sm: 1–2 columns */
@media (min-width: 576px) {
	.gt-grid--sm-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* md: 2–4 column layouts */
@media (min-width: 768px) {
	.gt-grid--md-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.gt-grid--md-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.gt-grid--md-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* lg+: full 12-column editorial grid */
@media (min-width: 1024px) {
	.gt-grid,
	.gt-grid--lg {
		grid-template-columns: repeat(var(--gt-grid-columns), minmax(0, 1fr));
	}
}

/* Column spans (lg+ 12-col; md/sm use within matching --md/--sm grids) */
.gt-span-12 { grid-column: 1 / -1; }

@media (min-width: 576px) {
	.gt-span-sm-1 { grid-column: span 1; }
	.gt-span-sm-2 { grid-column: span 2; }
}

@media (min-width: 768px) {
	.gt-span-md-1 { grid-column: span 1; }
	.gt-span-md-2 { grid-column: span 2; }
	.gt-span-md-3 { grid-column: span 3; }
	.gt-span-md-4 { grid-column: span 4; }
	.gt-span-md-5 { grid-column: span 5; }
	.gt-span-md-6 { grid-column: span 6; }
	.gt-span-md-7 { grid-column: span 7; }
	.gt-span-md-8 { grid-column: span 8; }
	.gt-span-md-9 { grid-column: span 9; }
	.gt-span-md-10 { grid-column: span 10; }
	.gt-span-md-11 { grid-column: span 11; }
	.gt-span-md-12 { grid-column: span 12; }
}

@media (min-width: 1024px) {
	.gt-span-1 { grid-column: span 1; }
	.gt-span-2 { grid-column: span 2; }
	.gt-span-3 { grid-column: span 3; }
	.gt-span-4 { grid-column: span 4; }
	.gt-span-5 { grid-column: span 5; }
	.gt-span-6 { grid-column: span 6; }
	.gt-span-7 { grid-column: span 7; }
	.gt-span-8 { grid-column: span 8; }
	.gt-span-9 { grid-column: span 9; }
	.gt-span-10 { grid-column: span 10; }
	.gt-span-11 { grid-column: span 11; }
	.gt-span-12 { grid-column: span 12; }

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

@media (min-width: 1280px) {
	.gt-span-xl-1 { grid-column: span 1; }
	.gt-span-xl-2 { grid-column: span 2; }
	.gt-span-xl-3 { grid-column: span 3; }
	.gt-span-xl-4 { grid-column: span 4; }
	.gt-span-xl-5 { grid-column: span 5; }
	.gt-span-xl-6 { grid-column: span 6; }
	.gt-span-xl-7 { grid-column: span 7; }
	.gt-span-xl-8 { grid-column: span 8; }
	.gt-span-xl-9 { grid-column: span 9; }
	.gt-span-xl-10 { grid-column: span 10; }
	.gt-span-xl-11 { grid-column: span 11; }
	.gt-span-xl-12 { grid-column: span 12; }
}

/* Full-bleed (hero, video, banners) — inside .container */
.gt-bleed {
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
}

@supports (width: 100dvw) {
	.gt-bleed {
		width: 100dvw;
		max-width: 100dvw;
		margin-inline: calc(50% - 50dvw);
	}
}

/* Alternative: expand by container padding only */
.gt-bleed--padding {
	width: calc(100% + 2 * var(--gt-container-padding));
	max-width: none;
	margin-inline: calc(-1 * var(--gt-container-padding));
}

/* Section vertical rhythm */
.gt-section-space,
.gt-section-gap {
	padding-block: var(--gt-section-gap);
}

.gt-section-space-top {
	padding-top: var(--gt-section-gap);
}

.gt-section-space-bottom {
	padding-bottom: var(--gt-section-gap);
}