/**
 * Grid & Layout Utilities
 *
 * Container, flexbox en CSS grid utility classes.
 * Rem-eenheden (HTML base = 62.5% = 1rem = 10px).
 *
 * @package Tabweb
 * @since   1.0.0
 */

/* ==========================================================================
   Container
   ========================================================================== */
:root { --container-width--sm: 540px; --container-width--md: 720px; --container-width--lg: 960px; --container-width--xl: 1140px; --container-width--xxl: 1320px; }
.container { width: 100%; max-width: var(--container-width--xxl); margin-inline: auto; padding-inline: 2.4rem; }
.container--narrow { max-width: var(--container-width--md); }
.container--small { max-width: var(--container-width--sm); }
.container--wide { max-width: var(--wp--style--global--wide-size, 1200px); }
.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: 0.8rem; }
.flex--gap-sm { gap: 1.6rem; }
.flex--gap-md { gap: 2.4rem; }
.flex--gap-lg { gap: 3.2rem; }
.flex--gap-xl { gap: 4.8rem; }

/* ==========================================================================
   CSS Grid Utilities
   ========================================================================== */
.grid { display: grid; gap: 2.4rem; }
.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(28rem, 1fr)); }
.grid--auto-fit { grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr)); }
.grid--gap-xs { gap: 0.8rem; }
.grid--gap-sm { gap: 1.6rem; }
.grid--gap-md { gap: 2.4rem; }
.grid--gap-lg { gap: 3.2rem; }
.grid--gap-xl { gap: 4.8rem; }

/* 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: 767.98px) {
.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: 768px) and (max-width: 1199.98px) {
.grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
.hidden-tablet { display: none; }
}

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