/*
 * Miarto Studio – Utility-Klassen
 *
 * Wiederverwendbare Helfer für Layout, Typografie und Spacing.
 * Alle Werte referenzieren Design Tokens aus variables.css.
 */

/* ---- Container-Varianten ---- */

.ms-container--wide {
    max-width: var(--ms-container-wide);
}

.ms-container--narrow {
    max-width:     760px;
    margin-inline: auto;
}

/* ---- Abschnitt-Abstände ---- */

.ms-section    { padding-block: var(--ms-space-20); }
.ms-section--sm { padding-block: var(--ms-space-12); }
.ms-section--lg { padding-block: var(--ms-space-24); }

/* ---- Grid-Utilities ---- */

.ms-grid {
    display: grid;
    gap:     var(--ms-space-8);
}

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

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

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

@media ( max-width: 600px ) {
    .ms-grid--4 { grid-template-columns: 1fr; }
}

/* ---- Flex-Utilities ---- */

.ms-flex          { display: flex; }
.ms-flex--center  { display: flex; align-items: center; justify-content: center; }
.ms-flex--between { display: flex; align-items: center; justify-content: space-between; }
.ms-flex--wrap    { flex-wrap: wrap; }
.ms-flex--col     { flex-direction: column; }

.ms-gap-4  { gap: var(--ms-space-4); }
.ms-gap-6  { gap: var(--ms-space-6); }
.ms-gap-8  { gap: var(--ms-space-8); }
.ms-gap-12 { gap: var(--ms-space-12); }

/* ---- Text-Utilities ---- */

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

.ms-text-xs { font-size: var(--ms-font-size-xs); }
.ms-text-sm { font-size: var(--ms-font-size-sm); }
.ms-text-lg { font-size: var(--ms-font-size-lg); }
.ms-text-xl { font-size: var(--ms-font-size-xl); }

.ms-text-muted    { color: var(--ms-text-subtle); }
.ms-text-accent   { color: var(--ms-accent); }
.ms-text-bold     { font-weight: var(--ms-font-weight-bold); }
.ms-text-semibold { font-weight: var(--ms-font-weight-semibold); }

/* ---- Breakpoint-Helfer ---- */

@media ( max-width: 768px ) {
    .ms-hide-mobile { display: none !important; }
}

@media ( min-width: 769px ) {
    .ms-hide-desktop { display: none !important; }
}

/* ---- Sonstiges ---- */

.ms-w-full    { width: 100%; }
.ms-no-margin { margin: 0; }