/* ============================================
   UTILITY CLASSES — Neovation Custom Learning
   ============================================
   Single-purpose helper classes for rapid
   layout and styling. Every value references
   a CSS custom property from variables.css.

   Sections:
   1. Text Alignment
   2. Font Weights
   3. Text Colors
   4. Font Sizes
   5. Margin Shortcuts
   6. Padding Shortcuts
   7. Display Helpers
   8. Flexbox Helpers
   9. Gap Utilities
   10. Width Utilities
   11. Responsive Visibility
   ============================================ */


/* ============================================
   1. TEXT ALIGNMENT
   ============================================ */

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


/* ============================================
   2. FONT WEIGHTS
   ============================================ */

.font-light   { font-weight: var(--weight-light); }
.font-regular { font-weight: var(--weight-regular); }
.font-medium  { font-weight: var(--weight-medium); }
.font-bold    { font-weight: var(--weight-bold); }
.font-black   { font-weight: var(--weight-black); }


/* ============================================
   3. TEXT COLORS
   ============================================ */

.text-primary   { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-muted     { color: var(--color-text-muted); }
.text-accent    { color: var(--color-accent-primary); }
.text-white     { color: #ffffff; }
.text-success   { color: var(--color-success); }
.text-warning   { color: var(--color-warning); }


/* ============================================
   4. FONT SIZES
   ============================================ */

.text-caption-size { font-size: var(--text-caption); }
.text-small-size   { font-size: var(--text-small); }
.text-body-size    { font-size: var(--text-body); }
.text-lg-size      { font-size: var(--text-lg); }
.text-xl-size      { font-size: var(--text-xl); }


/* ============================================
   5. MARGIN SHORTCUTS
   ============================================
   Naming: .m-{size}   → all sides
           .mt-{size}  → top
           .mb-{size}  → bottom
           .ml-{size}  → left
           .mr-{size}  → right
           .mx-{size}  → left + right
           .my-{size}  → top + bottom
           .m-auto     → auto centering
   ============================================ */

/* --- All sides --- */
.m-0    { margin: 0; }
.m-xs   { margin: var(--space-xs); }
.m-sm   { margin: var(--space-sm); }
.m-md   { margin: var(--space-md); }
.m-lg   { margin: var(--space-lg); }
.m-xl   { margin: var(--space-xl); }
.m-2xl  { margin: var(--space-2xl); }
.m-3xl  { margin: var(--space-3xl); }
.m-auto { margin: auto; }

/* --- Top --- */
.mt-0    { margin-top: 0; }
.mt-xs   { margin-top: var(--space-xs); }
.mt-sm   { margin-top: var(--space-sm); }
.mt-md   { margin-top: var(--space-md); }
.mt-lg   { margin-top: var(--space-lg); }
.mt-xl   { margin-top: var(--space-xl); }
.mt-2xl  { margin-top: var(--space-2xl); }
.mt-3xl  { margin-top: var(--space-3xl); }

/* --- Bottom --- */
.mb-0    { margin-bottom: 0; }
.mb-xs   { margin-bottom: var(--space-xs); }
.mb-sm   { margin-bottom: var(--space-sm); }
.mb-md   { margin-bottom: var(--space-md); }
.mb-lg   { margin-bottom: var(--space-lg); }
.mb-xl   { margin-bottom: var(--space-xl); }
.mb-2xl  { margin-bottom: var(--space-2xl); }
.mb-3xl  { margin-bottom: var(--space-3xl); }

/* --- Left --- */
.ml-0    { margin-left: 0; }
.ml-xs   { margin-left: var(--space-xs); }
.ml-sm   { margin-left: var(--space-sm); }
.ml-md   { margin-left: var(--space-md); }
.ml-lg   { margin-left: var(--space-lg); }
.ml-xl   { margin-left: var(--space-xl); }
.ml-2xl  { margin-left: var(--space-2xl); }
.ml-3xl  { margin-left: var(--space-3xl); }
.ml-auto { margin-left: auto; }

/* --- Right --- */
.mr-0    { margin-right: 0; }
.mr-xs   { margin-right: var(--space-xs); }
.mr-sm   { margin-right: var(--space-sm); }
.mr-md   { margin-right: var(--space-md); }
.mr-lg   { margin-right: var(--space-lg); }
.mr-xl   { margin-right: var(--space-xl); }
.mr-2xl  { margin-right: var(--space-2xl); }
.mr-3xl  { margin-right: var(--space-3xl); }
.mr-auto { margin-right: auto; }

/* --- Horizontal (left + right) --- */
.mx-0    { margin-left: 0;    margin-right: 0; }
.mx-xs   { margin-left: var(--space-xs);  margin-right: var(--space-xs); }
.mx-sm   { margin-left: var(--space-sm);  margin-right: var(--space-sm); }
.mx-md   { margin-left: var(--space-md);  margin-right: var(--space-md); }
.mx-lg   { margin-left: var(--space-lg);  margin-right: var(--space-lg); }
.mx-xl   { margin-left: var(--space-xl);  margin-right: var(--space-xl); }
.mx-2xl  { margin-left: var(--space-2xl); margin-right: var(--space-2xl); }
.mx-3xl  { margin-left: var(--space-3xl); margin-right: var(--space-3xl); }
.mx-auto { margin-left: auto; margin-right: auto; }

/* --- Vertical (top + bottom) --- */
.my-0    { margin-top: 0;    margin-bottom: 0; }
.my-xs   { margin-top: var(--space-xs);  margin-bottom: var(--space-xs); }
.my-sm   { margin-top: var(--space-sm);  margin-bottom: var(--space-sm); }
.my-md   { margin-top: var(--space-md);  margin-bottom: var(--space-md); }
.my-lg   { margin-top: var(--space-lg);  margin-bottom: var(--space-lg); }
.my-xl   { margin-top: var(--space-xl);  margin-bottom: var(--space-xl); }
.my-2xl  { margin-top: var(--space-2xl); margin-bottom: var(--space-2xl); }
.my-3xl  { margin-top: var(--space-3xl); margin-bottom: var(--space-3xl); }


/* ============================================
   6. PADDING SHORTCUTS
   ============================================
   Same naming convention as margins:
   .p-{size}, .pt-*, .pb-*, .pl-*, .pr-*, .px-*, .py-*
   ============================================ */

/* --- All sides --- */
.p-0    { padding: 0; }
.p-xs   { padding: var(--space-xs); }
.p-sm   { padding: var(--space-sm); }
.p-md   { padding: var(--space-md); }
.p-lg   { padding: var(--space-lg); }
.p-xl   { padding: var(--space-xl); }
.p-2xl  { padding: var(--space-2xl); }
.p-3xl  { padding: var(--space-3xl); }

/* --- Top --- */
.pt-0    { padding-top: 0; }
.pt-xs   { padding-top: var(--space-xs); }
.pt-sm   { padding-top: var(--space-sm); }
.pt-md   { padding-top: var(--space-md); }
.pt-lg   { padding-top: var(--space-lg); }
.pt-xl   { padding-top: var(--space-xl); }
.pt-2xl  { padding-top: var(--space-2xl); }
.pt-3xl  { padding-top: var(--space-3xl); }

/* --- Bottom --- */
.pb-0    { padding-bottom: 0; }
.pb-xs   { padding-bottom: var(--space-xs); }
.pb-sm   { padding-bottom: var(--space-sm); }
.pb-md   { padding-bottom: var(--space-md); }
.pb-lg   { padding-bottom: var(--space-lg); }
.pb-xl   { padding-bottom: var(--space-xl); }
.pb-2xl  { padding-bottom: var(--space-2xl); }
.pb-3xl  { padding-bottom: var(--space-3xl); }

/* --- Left --- */
.pl-0    { padding-left: 0; }
.pl-xs   { padding-left: var(--space-xs); }
.pl-sm   { padding-left: var(--space-sm); }
.pl-md   { padding-left: var(--space-md); }
.pl-lg   { padding-left: var(--space-lg); }
.pl-xl   { padding-left: var(--space-xl); }
.pl-2xl  { padding-left: var(--space-2xl); }
.pl-3xl  { padding-left: var(--space-3xl); }

/* --- Right --- */
.pr-0    { padding-right: 0; }
.pr-xs   { padding-right: var(--space-xs); }
.pr-sm   { padding-right: var(--space-sm); }
.pr-md   { padding-right: var(--space-md); }
.pr-lg   { padding-right: var(--space-lg); }
.pr-xl   { padding-right: var(--space-xl); }
.pr-2xl  { padding-right: var(--space-2xl); }
.pr-3xl  { padding-right: var(--space-3xl); }

/* --- Horizontal (left + right) --- */
.px-0    { padding-left: 0;    padding-right: 0; }
.px-xs   { padding-left: var(--space-xs);  padding-right: var(--space-xs); }
.px-sm   { padding-left: var(--space-sm);  padding-right: var(--space-sm); }
.px-md   { padding-left: var(--space-md);  padding-right: var(--space-md); }
.px-lg   { padding-left: var(--space-lg);  padding-right: var(--space-lg); }
.px-xl   { padding-left: var(--space-xl);  padding-right: var(--space-xl); }
.px-2xl  { padding-left: var(--space-2xl); padding-right: var(--space-2xl); }
.px-3xl  { padding-left: var(--space-3xl); padding-right: var(--space-3xl); }

/* --- Vertical (top + bottom) --- */
.py-0    { padding-top: 0;    padding-bottom: 0; }
.py-xs   { padding-top: var(--space-xs);  padding-bottom: var(--space-xs); }
.py-sm   { padding-top: var(--space-sm);  padding-bottom: var(--space-sm); }
.py-md   { padding-top: var(--space-md);  padding-bottom: var(--space-md); }
.py-lg   { padding-top: var(--space-lg);  padding-bottom: var(--space-lg); }
.py-xl   { padding-top: var(--space-xl);  padding-bottom: var(--space-xl); }
.py-2xl  { padding-top: var(--space-2xl); padding-bottom: var(--space-2xl); }
.py-3xl  { padding-top: var(--space-3xl); padding-bottom: var(--space-3xl); }


/* ============================================
   7. DISPLAY HELPERS
   ============================================ */

.d-none        { display: none; }
.d-block       { display: block; }
.d-inline      { display: inline; }
.d-inline-block { display: inline-block; }
.d-flex        { display: flex; }
.d-inline-flex { display: inline-flex; }
.d-grid        { display: grid; }


/* ============================================
   8. FLEXBOX HELPERS
   ============================================
   Direction, wrapping, alignment, and
   justification utilities for flex containers.
   ============================================ */

/* Direction */
.flex-row     { flex-direction: row; }
.flex-col     { flex-direction: column; }
.flex-row-rev { flex-direction: row-reverse; }
.flex-col-rev { flex-direction: column-reverse; }

/* Wrapping */
.flex-wrap   { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }

/* Align items (cross axis) */
.items-start    { align-items: flex-start; }
.items-center   { align-items: center; }
.items-end      { align-items: flex-end; }
.items-stretch  { align-items: stretch; }
.items-baseline { align-items: baseline; }

/* Justify content (main axis) */
.justify-start   { justify-content: flex-start; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around  { justify-content: space-around; }
.justify-evenly  { justify-content: space-evenly; }

/* Flex children */
.flex-1    { flex: 1 1 0%; }
.flex-auto { flex: 1 1 auto; }
.flex-none { flex: none; }
.self-start  { align-self: flex-start; }
.self-center { align-self: center; }
.self-end    { align-self: flex-end; }


/* ============================================
   9. GAP UTILITIES
   ============================================
   Works on flex and grid containers.
   ============================================ */

.gap-0    { gap: 0; }
.gap-xs   { gap: var(--space-xs); }
.gap-sm   { gap: var(--space-sm); }
.gap-md   { gap: var(--space-md); }
.gap-lg   { gap: var(--space-lg); }
.gap-xl   { gap: var(--space-xl); }
.gap-2xl  { gap: var(--space-2xl); }
.gap-3xl  { gap: var(--space-3xl); }


/* ============================================
   10. WIDTH UTILITIES
   ============================================ */

.w-full       { width: 100%; }
.w-auto       { width: auto; }
.max-w-narrow { max-width: var(--max-width-narrow); }
.max-w-medium { max-width: var(--max-width-medium); }
.max-w-full   { max-width: var(--max-width-content); }


/* ============================================
   11. RESPONSIVE VISIBILITY
   ============================================
   Show / hide elements at specific breakpoints.

   Breakpoints (from variables.css reference):
   • Mobile:  ≤ 767px
   • Tablet:  ≤ 991px
   • Desktop: ≥ 992px
   ============================================ */

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

/* Hide on tablet and below (≤ 991px) */
@media (max-width: 991px) {
    .hide-tablet { display: none !important; }
}

/* Show ONLY on mobile (hidden ≥ 768px) */
@media (min-width: 768px) {
    .show-mobile-only { display: none !important; }
}

/* Show ONLY on tablet (hidden below 768px and above 991px) */
@media (max-width: 767px) {
    .show-tablet-only { display: none !important; }
}
@media (min-width: 992px) {
    .show-tablet-only { display: none !important; }
}

/* Hide on desktop (≥ 992px) */
@media (min-width: 992px) {
    .hide-desktop { display: none !important; }
}