/**
 * Grid & Layout Utilities
 *
 * Flexbox en CSS Grid utility classes voor het Tabweb thema.
 * Gebruik deze classes voor snelle layout opbouw.
 *
 * @package Tabweb
 * @since   1.0.0
 */

/* ==========================================================================
   Container
   ========================================================================== */

.container {
	width: 100%;
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--20, 1rem);
}

.container--narrow {
	max-width: var(--wp--style--global--content-size, 720px);
}

.container--full {
	max-width: 100%;
	padding-inline: 0;
}

/* ==========================================================================
   Flexbox Utilities
   ========================================================================== */

.flex {
	display: flex;
}

.flex--inline {
	display: inline-flex;
}

.flex--wrap {
	flex-wrap: wrap;
}

.flex--col {
	flex-direction: column;
}

.flex--row-reverse {
	flex-direction: row-reverse;
}

.flex--center {
	justify-content: center;
	align-items: center;
}

.flex--between {
	justify-content: space-between;
}

.flex--around {
	justify-content: space-around;
}

.flex--evenly {
	justify-content: space-evenly;
}

.flex--start {
	justify-content: flex-start;
}

.flex--end {
	justify-content: flex-end;
}

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

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

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

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

.flex--gap-xs {
	gap: var(--wp--preset--spacing--10, 0.5rem);
}

.flex--gap-sm {
	gap: var(--wp--preset--spacing--20, 1rem);
}

.flex--gap-md {
	gap: var(--wp--preset--spacing--30, 1.5rem);
}

.flex--gap-lg {
	gap: var(--wp--preset--spacing--40, 2rem);
}

.flex--gap-xl {
	gap: var(--wp--preset--spacing--50, 3rem);
}

/* ==========================================================================
   CSS Grid Utilities
   ========================================================================== */

.grid {
	display: grid;
	gap: var(--wp--preset--spacing--30, 1.5rem);
}

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

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

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

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

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

.grid--gap-xs {
	gap: var(--wp--preset--spacing--10, 0.5rem);
}

.grid--gap-sm {
	gap: var(--wp--preset--spacing--20, 1rem);
}

.grid--gap-md {
	gap: var(--wp--preset--spacing--30, 1.5rem);
}

.grid--gap-lg {
	gap: var(--wp--preset--spacing--40, 2rem);
}

.grid--gap-xl {
	gap: var(--wp--preset--spacing--50, 3rem);
}

/* Spanning */
.col-span-2 {
	grid-column: span 2;
}

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

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

.row-span-2 {
	grid-row: span 2;
}

/* ==========================================================================
   Spacing Utilities
   ========================================================================== */

.m-0 { margin: 0; }
.mt-auto { margin-top: auto; }
.mb-auto { margin-bottom: auto; }
.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }
.mx-auto { margin-inline: auto; }

.p-0 { padding: 0; }

/* ==========================================================================
   Display Utilities
   ========================================================================== */

.hidden {
	display: none;
}

.block {
	display: block;
}

.inline-block {
	display: inline-block;
}

/* ==========================================================================
   Text Utilities
   ========================================================================== */

.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

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

@media (max-width: 781px) {
	.grid--2,
	.grid--3,
	.grid--4 {
		grid-template-columns: 1fr;
	}

	.col-span-2,
	.col-span-3,
	.col-span-full {
		grid-column: auto;
	}

	.flex--col-mobile {
		flex-direction: column;
	}

	.hidden-mobile {
		display: none;
	}
}

@media (min-width: 782px) and (max-width: 1024px) {
	.grid--3,
	.grid--4 {
		grid-template-columns: repeat(2, 1fr);
	}

	.hidden-tablet {
		display: none;
	}
}

@media (min-width: 1025px) {
	.hidden-desktop {
		display: none;
	}
}