/*
 * Fi1m — Utilities
 * ================
 * Single-purpose helpers. Keep this list short; prefer components.
 */

/* Accessibility */
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Spacing */
.mt-0 { margin-top: 0; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 1rem; }
.mt-4 { margin-top: 1.5rem; }
.mt-5 { margin-top: 3rem; }

.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 1.5rem; }
.mb-5 { margin-bottom: 3rem; }

/* Flex */
.d-flex { display: flex; }
.flex-column { display: flex; flex-direction: column; }
.align-center { align-items: center; }
.justify-center { justify-content: center; }
.space-between { justify-content: space-between; }
.flex-wrap { flex-wrap: wrap; }

/* Grid */
.grid {
    display: grid;
    gap: var(--grid-gap, 1.5rem);
}

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

/* Text */
.text-center { text-align: center; }
.text-muted { color: var(--text-color-muted); }
.text-primary { color: var(--primary); }
.fw-semibold { font-weight: 600; }
.fw-bold { font-weight: 700; }
.fs-small { font-size: 0.85rem; }

/* Display */
.d-none { display: none; }

@media (max-width: 768px) {
    .d-md-none { display: none; }

    .grid--people {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
        gap: 12px;
    }
}