/**
 * FluidScale Utility Classes
 * 
 * Gebruik deze classes op elk Elementor element via het "CSS Classes" veld
 * onder Advanced > CSS Classes.
 *
 * Voorbeelden:
 *   .fs-1   = font-size step 1
 *   .fs-2   = font-size step 2
 *   .fs--1  = font-size step -1 (kleiner dan basis)
 *   .space-m = padding (alle kanten) maat medium
 *   .mt-l   = margin-top maat large
 *   .px-s   = padding links en rechts maat small
 *   .gap-m  = gap voor flex/grid containers
 */

/* === FONT SIZES === */
.fs--2 { font-size: var(--step--2); }
.fs--1 { font-size: var(--step--1); }
.fs-0  { font-size: var(--step-0); }
.fs-1  { font-size: var(--step-1); }
.fs-2  { font-size: var(--step-2); }
.fs-3  { font-size: var(--step-3); }
.fs-4  { font-size: var(--step-4); }
.fs-5  { font-size: var(--step-5); }

/* === PADDING (alle kanten) === */
.space-3xs { padding: var(--space-3xs); }
.space-2xs { padding: var(--space-2xs); }
.space-xs  { padding: var(--space-xs); }
.space-s   { padding: var(--space-s); }
.space-m   { padding: var(--space-m); }
.space-l   { padding: var(--space-l); }
.space-xl  { padding: var(--space-xl); }
.space-2xl { padding: var(--space-2xl); }
.space-3xl { padding: var(--space-3xl); }

/* === MARGIN TOP === */
.mt-3xs { margin-top: var(--space-3xs); }
.mt-2xs { margin-top: var(--space-2xs); }
.mt-xs  { margin-top: var(--space-xs); }
.mt-s   { margin-top: var(--space-s); }
.mt-m   { margin-top: var(--space-m); }
.mt-l   { margin-top: var(--space-l); }
.mt-xl  { margin-top: var(--space-xl); }
.mt-2xl { margin-top: var(--space-2xl); }
.mt-3xl { margin-top: var(--space-3xl); }

/* === MARGIN BOTTOM === */
.mb-3xs { margin-bottom: var(--space-3xs); }
.mb-2xs { margin-bottom: var(--space-2xs); }
.mb-xs  { margin-bottom: var(--space-xs); }
.mb-s   { margin-bottom: var(--space-s); }
.mb-m   { margin-bottom: var(--space-m); }
.mb-l   { margin-bottom: var(--space-l); }
.mb-xl  { margin-bottom: var(--space-xl); }
.mb-2xl { margin-bottom: var(--space-2xl); }
.mb-3xl { margin-bottom: var(--space-3xl); }

/* === PADDING VERTICAAL (top + bottom) === */
.py-3xs { padding-top: var(--space-3xs); padding-bottom: var(--space-3xs); }
.py-2xs { padding-top: var(--space-2xs); padding-bottom: var(--space-2xs); }
.py-xs  { padding-top: var(--space-xs);  padding-bottom: var(--space-xs); }
.py-s   { padding-top: var(--space-s);   padding-bottom: var(--space-s); }
.py-m   { padding-top: var(--space-m);   padding-bottom: var(--space-m); }
.py-l   { padding-top: var(--space-l);   padding-bottom: var(--space-l); }
.py-xl  { padding-top: var(--space-xl);  padding-bottom: var(--space-xl); }
.py-2xl { padding-top: var(--space-2xl); padding-bottom: var(--space-2xl); }
.py-3xl { padding-top: var(--space-3xl); padding-bottom: var(--space-3xl); }

/* === PADDING HORIZONTAAL (left + right) === */
.px-3xs { padding-left: var(--space-3xs); padding-right: var(--space-3xs); }
.px-2xs { padding-left: var(--space-2xs); padding-right: var(--space-2xs); }
.px-xs  { padding-left: var(--space-xs);  padding-right: var(--space-xs); }
.px-s   { padding-left: var(--space-s);   padding-right: var(--space-s); }
.px-m   { padding-left: var(--space-m);   padding-right: var(--space-m); }
.px-l   { padding-left: var(--space-l);   padding-right: var(--space-l); }
.px-xl  { padding-left: var(--space-xl);  padding-right: var(--space-xl); }
.px-2xl { padding-left: var(--space-2xl); padding-right: var(--space-2xl); }
.px-3xl { padding-left: var(--space-3xl); padding-right: var(--space-3xl); }

/* === GAP (voor flex/grid containers) === */
.gap-3xs { gap: var(--space-3xs); }
.gap-2xs { gap: var(--space-2xs); }
.gap-xs  { gap: var(--space-xs); }
.gap-s   { gap: var(--space-s); }
.gap-m   { gap: var(--space-m); }
.gap-l   { gap: var(--space-l); }
.gap-xl  { gap: var(--space-xl); }
.gap-2xl { gap: var(--space-2xl); }
.gap-3xl { gap: var(--space-3xl); }

/* === GRID CONTAINER === */
.fluid-grid {
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), 1fr);
    gap: var(--grid-gutter);
    max-width: var(--grid-max-width);
    margin-inline: auto;
    padding-inline: var(--space-s);
}

/* === FLUID SIZES (voor breedtes van afbeeldingen, iconen, logos) === */
.size-xs  { width: var(--size-xs);  max-width: 100%; }
.size-s   { width: var(--size-s);   max-width: 100%; }
.size-m   { width: var(--size-m);   max-width: 100%; }
.size-l   { width: var(--size-l);   max-width: 100%; }
.size-xl  { width: var(--size-xl);  max-width: 100%; }
.size-2xl { width: var(--size-2xl); max-width: 100%; }
.size-3xl { width: var(--size-3xl); max-width: 100%; }

/* Voor afbeeldingen specifiek: ook max-width sturen */
.img-size-xs  img { max-width: var(--size-xs); }
.img-size-s   img { max-width: var(--size-s); }
.img-size-m   img { max-width: var(--size-m); }
.img-size-l   img { max-width: var(--size-l); }
.img-size-xl  img { max-width: var(--size-xl); }
.img-size-2xl img { max-width: var(--size-2xl); }
.img-size-3xl img { max-width: var(--size-3xl); }

/* === FLUID HEIGHTS (voor hero secties, banner containers) === */
.height-s  { min-height: var(--height-s); }
.height-m  { min-height: var(--height-m); }
.height-l  { min-height: var(--height-l); }
.height-xl { min-height: var(--height-xl); }

/* === BORDER RADIUS === */
.radius-xs  { border-radius: var(--radius-xs); }
.radius-s   { border-radius: var(--radius-s); }
.radius-m   { border-radius: var(--radius-m); }
.radius-l   { border-radius: var(--radius-l); }
.radius-xl  { border-radius: var(--radius-xl); }
.radius-2xl { border-radius: var(--radius-2xl); }
.radius-full { border-radius: 9999px; }

/* Border radius op afbeeldingen binnen widget */
.img-radius-xs  img { border-radius: var(--radius-xs); }
.img-radius-s   img { border-radius: var(--radius-s); }
.img-radius-m   img { border-radius: var(--radius-m); }
.img-radius-l   img { border-radius: var(--radius-l); }
.img-radius-xl  img { border-radius: var(--radius-xl); }
.img-radius-2xl img { border-radius: var(--radius-2xl); }
.img-radius-full img { border-radius: 9999px; }