/* ==========================================================================
   Layout — containers, grid systems, bento patterns, section wrappers.
   ========================================================================== */

/* === Containers === */
.container {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-pad-x);
}

.container-wide {
	max-width: var(--container-wide);
	margin-inline: auto;
	padding-inline: var(--container-pad-x);
}

.container-fluid {
	width: 100%;
	padding-inline: var(--container-pad-x);
}

/* === Section wrappers === */
.section {
	position: relative;
	padding-block: clamp(var(--space-16), 8vw, var(--space-32));
}

.section--tight {
	padding-block: clamp(var(--space-12), 6vw, var(--space-20));
}

.section--bg-primary {
	background: var(--color-primary);
	color: var(--color-white);
}

.section--bg-tint {
	background: var(--color-primary-tint);
}

.section--bg-muted {
	background: var(--color-primary-muted);
}

.section--bg-off {
	background: var(--color-off-white);
}

/* Diagonal section dividers */
.section--clip-top {
	clip-path: var(--clip-section-btm);
	margin-top: -3vw;
	padding-top: calc(clamp(var(--space-16), 8vw, var(--space-32)) + 3vw);
}

.section--clip-btm {
	clip-path: var(--clip-section-top);
	margin-bottom: -3vw;
	padding-bottom: calc(clamp(var(--space-16), 8vw, var(--space-32)) + 3vw);
}

/* === Section headers === */
.section-header {
	max-width: 720px;
	margin: 0 0 var(--space-12);
}

.section-header--center {
	margin-inline: auto;
	text-align: center;
}

.section-header__title {
	margin-bottom: var(--space-3);
}

.section-header__sub {
	font-family: var(--font-accent);
	font-size: var(--text-xl);
	font-style: italic;
	color: var(--color-grey-mid);
	margin: 0;
}

.section--bg-primary .section-header__title {
	color: var(--color-white);
}

.section--bg-primary .section-header__sub {
	color: var(--color-grey-light);
}

/* === Generic Grids === */
.grid {
	display: grid;
	gap: var(--space-6);
}

.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* Asymmetric splits */
.grid--asym-l { grid-template-columns: 1.6fr 1fr; }
.grid--asym-r { grid-template-columns: 1fr 1.6fr; }
.grid--asym-feature { grid-template-columns: 2fr 1fr; }

/* === Bento — Why Choose Us 2x2 === */
.bento-2x2 {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-auto-rows: 1fr;
	gap: var(--space-6);
}

/* === Blog featured grid (1 large + 2 stacked) === */
.blog-featured-grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	grid-template-rows: auto auto;
	gap: var(--space-6);
}

.blog-featured-grid > :first-child {
	grid-row: 1 / 3;
}

/* === Video grid === */
.video-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-6);
}

/* === Masonry sidebar (CSS columns) === */
.masonry-sidebar {
	column-count: 1;
	column-gap: var(--space-4);
}

.masonry-sidebar > * {
	break-inside: avoid;
	margin-bottom: var(--space-4);
	display: block;
}

/* === Flex utilities === */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-center { align-items: center; justify-content: center; }
.flex-between { justify-content: space-between; align-items: center; }
.flex-wrap { flex-wrap: wrap; }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }

/* === Spacing helpers === */
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }

/* === Text alignment === */
.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }