/* ============================================
   Utility Classes
   ============================================ */

/* ── Spacing ── */
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mt-7 { margin-top: var(--space-7); }
.mt-8 { margin-top: var(--space-8); }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-7 { margin-bottom: var(--space-7); }

/* ── Text Alignment ── */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* ── Display ── */
.hidden { display: none !important; }
.block { display: block; }
.inline-block { display: inline-block; }

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

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

@media (max-width: 991px) {
    .hide-tablet { display: none !important; }
}

/* ── Screen Reader Only ── */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ── Misc ── */
.overflow-hidden { overflow: hidden; }
.relative { position: relative; }
.w-full { width: 100%; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* ── Horizontal Scroll Container ── */
.scroll-x {
    display: flex;
    gap: var(--space-4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: var(--space-2);
}

.scroll-x::-webkit-scrollbar {
    display: none;
}

.scroll-x > * {
    scroll-snap-align: start;
    flex-shrink: 0;
}