/* ==========================================================================
   Sentinel Unity GRC - Utility Classes
   ========================================================================== */

/* ---- Spacing Helpers ---- */
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }

/* ---- Text Helpers ---- */
.fw-medium { font-weight: var(--font-medium); }
.fw-semibold { font-weight: var(--font-semibold); }
.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }

/* ---- Line Clamp (consistent truncation) ---- */
.text-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.5;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* ---- Background Helpers ---- */
.bg-light { background: var(--neutral-50); }

/* ---- Border Helpers ---- */
.rounded { border-radius: var(--radius-md); }
.border { border: 1px solid var(--border); }
.border-bottom { border-bottom: 1px solid var(--border); }

/* ---- Responsive Visibility ---- */
@media (max-width: 575.98px) {
    .d-xs-none { display: none; }
}

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

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

/* ==========================================================================
   Responsive Layout Utilities — Future-Proof Building Blocks
   Use these classes when building new pages/features. They automatically
   adapt to any screen size with no additional CSS needed.
   ========================================================================== */

/*
 * .auto-grid
 * Creates a responsive multi-column grid. Columns appear/disappear based on
 * available space — no media queries required.
 * Default min column width: 280px. Override: style="--col-min: 320px"
 *
 * Usage:
 *   <div class="auto-grid">
 *     <div class="card">...</div>
 *     <div class="card">...</div>
 *   </div>
 */
.auto-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--col-min, 280px), 1fr));
    gap: var(--space-4);
}

/*
 * .form-grid
 * Same auto-fit pattern tuned for form fields (220px minimum so two fields
 * sit side-by-side on tablets, single column on phones — automatically).
 *
 * Usage:
 *   <div class="form-grid">
 *     <div><label>...</label><input></div>
 *     <div><label>...</label><input></div>
 *   </div>
 */
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--col-min, 220px), 1fr));
    gap: var(--space-4);
}

/*
 * .flex-responsive
 * Flex row that wraps cleanly on narrow screens. Children share equal width
 * on desktop and expand to full width on mobile — automatically.
 * Override per-child basis: style="--flex-basis: 180px"
 *
 * Usage:
 *   <div class="flex-responsive">
 *     <div>...</div>
 *     <div>...</div>
 *   </div>
 */
.flex-responsive {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    align-items: flex-start;
}
.flex-responsive > * {
    flex: 1 1 var(--flex-basis, 240px);
    min-width: 0;
}

/*
 * .card-stack
 * Wraps a group of cards into a responsive grid. Cards reflow automatically
 * from multi-column to single column as the viewport narrows.
 *
 * Usage:
 *   <div class="card-stack">
 *     <div class="card">...</div>
 *     <div class="card">...</div>
 *   </div>
 */
.card-stack {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--col-min, 300px), 1fr));
    gap: var(--space-4);
    align-items: start;
}