/* ==========================================================================
   EDU LINKED — UTILITIES.CSS
   Atomic utility classes for spacing, text, display, alignment, grids
   ========================================================================== */

/* -------------------------------------------------------
   SPACING UTILITIES
   Extracted from theme(1).css
   ------------------------------------------------------- */

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

.u-mt-1 { margin-top: 1rem; }         /*  */
.u-mt-2 { margin-top: 2rem; }
.u-mt-3 { margin-top: 3rem; }

.u-pt-1 { padding-top: 1rem; }        /*  */
.u-pt-2 { padding-top: 2rem; }

/* -------------------------------------------------------
   WIDTH UTILITIES
   ------------------------------------------------------- */

.u-maxw-600  { max-width: 600px; }     /*  */
.u-maxw-650  { max-width: 650px; }
.u-maxw-700  { max-width: 700px; }
.u-maxw-750  { max-width: 750px; }
.u-maxw-800  { max-width: 800px; }
.u-maxw-850  { max-width: 850px; }
.u-maxw-900  { max-width: 900px; }
.u-maxw-1050 { max-width: 1050px; }

/* Centre content */
.u-mx-auto { margin-left: auto; margin-right: auto; }   /*  */

/* -------------------------------------------------------
   TEXT & COLOUR UTILITIES
   ------------------------------------------------------- */

.u-text-center { text-align: center; }                   /*  */
.u-text-left   { text-align: left; }
.u-text-right  { text-align: right; }

.u-color-white { color: #f9fafb; }                       /*  */
.color-muted   { color: #9ca3af; }                       /*  */

/* Accessibility safe muted variant */
.u-text-muted  { color: var(--color-text-muted); }

/* Contrast-safe text utilities */
.u-text-primary   { color: var(--color-text); }
.u-text-accent    { color: var(--edulinked-accent-text); }
.u-text-secondary { color: var(--edulinked-secondary-text); }

/* Background helpers */
.u-bg-light    { background: var(--color-bg-soft); }
.u-bg-white    { background: var(--color-bg); }
.u-bg-surface  { background: var(--color-surface); }

/* -------------------------------------------------------
   DISPLAY UTILITIES
   ------------------------------------------------------- */

.u-flex       { display: flex; }
.u-inline-flex { display: inline-flex; }
.u-grid       { display: grid; }
.u-block      { display: block; }
.u-inline     { display: inline; }

.u-flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Flex alignment */
.u-flex-start  { justify-content: flex-start; }
.u-flex-end    { justify-content: flex-end; }
.u-flex-between { justify-content: space-between; }
.u-flex-around  { justify-content: space-around; }
.u-flex-evenly  { justify-content: space-evenly; }

/* -------------------------------------------------------
   GRID UTILITIES
   Extracted from theme(1).css
   ------------------------------------------------------- */

.u-grid-auto-320 {                                    /*  */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.5rem;
}

.u-grid-auto-240 {                                    /*  */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
}

/* Standardised responsive grid helpers */
.u-grid-gap-sm { gap: var(--spacing-sm); }
.u-grid-gap-md { gap: var(--spacing-md); }
.u-grid-gap-lg { gap: var(--spacing-lg); }

/* -------------------------------------------------------
   VISIBILITY UTILITIES
   ------------------------------------------------------- */

.u-hidden        { display: none !important; }
.u-visible       { display: block !important; }

@media (max-width: 768px) {
    .u-hidden-mobile { display: none !important; }
    .u-visible-mobile { display: block !important; }
}

@media (min-width: 769px) {
    .u-hidden-desktop { display: none !important; }
    .u-visible-desktop { display: block !important; }
}

/* -------------------------------------------------------
   BORDER & RADIUS UTILITIES
   ------------------------------------------------------- */

.u-rounded-sm { border-radius: 4px; }
.u-rounded-md { border-radius: 8px; }
.u-rounded-lg { border-radius: 16px; }
.u-rounded-xl { border-radius: 24px; }

/* -------------------------------------------------------
   SHADOW UTILITIES
   ------------------------------------------------------- */

.u-shadow-sm { box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.u-shadow-md { box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
.u-shadow-lg { box-shadow: 0 10px 15px rgba(0,0,0,0.15); }