/* ============================================
   5-UTILITIES.CSS
   
   Functional Utility Classes
   - Typography utilities
   - Spacing (margin/padding)
   - Visibility & display
   - Measure (line length)
   - Legacy compatibility layer
   ============================================ */

/* ============================================
   1. VISIBILITY & ACCESSIBILITY
   ============================================ */

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

.sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  padding: inherit;
  margin: inherit;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

.hidden { display: none !important; }
.invisible { visibility: hidden; }

.opacity-0 { opacity: 0; }
.opacity-25 { opacity: 0.25; }
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }
.opacity-100 { opacity: 1; }

/* ============================================
   2. DISPLAY UTILITIES
   ============================================ */

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

/* ============================================
   3. TEXT UTILITIES
   ============================================ */

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

/* Transformation */
.text-uppercase { text-transform: uppercase; }
.text-lowercase { text-transform: lowercase; }
.text-capitalize { text-transform: capitalize; }
.text-normal-case { text-transform: none; }

/* Font Size */
.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
.text-xxl { font-size: var(--text-xxl); }

/* Font Weight */
.font-light { font-weight: 300; }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }

/* Font Style */
.italic { font-style: italic; }
.not-italic { font-style: normal; }

/* Font Family */
.font-body { font-family: var(--font-body); }
.font-heading { font-family: var(--font-heading); }
.font-mono { font-family: var(--font-mono); }

/* Text Decoration */
.underline { text-decoration: underline; }
.line-through { text-decoration: line-through; }
.no-underline { text-decoration: none; }

/* Text Color */
.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-secondary); }
.text-muted { color: var(--color-text-muted); }
.text-body { color: var(--color-text); }

/* --- Editorial Text Utilities --- */
/* .lead class consolidated in 7-typography.css */

.text-faded { color: var(--color-text-muted); }

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* ============================================
   4. SPACING UTILITIES (Margin)
   Using semantic naming (xs, sm, md, lg, xl)
   ============================================ */

/* Margin - 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); }

/* Margin 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); }

/* Legacy numbered aliases for compatibility */
.mt-1 { margin-top: var(--space-xs); }
.mt-2 { margin-top: var(--space-sm); }
.mt-3 { margin-top: var(--space-md); }
.mt-4 { margin-top: var(--space-lg); }
.mt-5 { margin-top: var(--space-xl); }
.mt-6 { margin-top: var(--space-xl); }
.mt-8 { margin-top: var(--space-xl); }

/* Margin 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); }

/* Legacy numbered aliases */
.mb-1 { margin-bottom: var(--space-xs); }
.mb-2 { margin-bottom: var(--space-sm); }
.mb-3 { margin-bottom: var(--space-md); }
.mb-4 { margin-bottom: var(--space-lg); }
.mb-5 { margin-bottom: var(--space-xl); }
.mb-6 { margin-bottom: var(--space-xl); }
.mb-8 { margin-bottom: var(--space-xl); }

/* Margin 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-auto { margin-left: auto; }

/* Margin 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-auto { margin-right: auto; }

/* Margin X (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-auto { margin-left: auto; margin-right: auto; }

/* Margin Y (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); }

/* ============================================
   5. SPACING UTILITIES (Padding)
   ============================================ */

/* Padding - 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); }

/* Legacy numbered aliases */
.p-1 { padding: var(--space-xs); }
.p-2 { padding: var(--space-sm); }
.p-3 { padding: var(--space-md); }
.p-4 { padding: var(--space-lg); }
.p-5 { padding: var(--space-xl); }
.p-6 { padding: var(--space-xl); }
.p-8 { padding: var(--space-xl); }

/* Padding 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); }

/* Padding 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); }

/* Padding 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); }

/* Padding 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); }

/* Padding X */
.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); }

/* Padding Y */
.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); }

/* ============================================
   6. MEASURE (Line Length Control)
   ============================================ */

.measure { max-width: var(--content-max-width); }
.measure-narrow { max-width: 45ch; }
.measure-wide { max-width: 80ch; }

/* Legacy aliases */
.max-w-content { max-width: var(--content-max-width); }
.max-w-narrow { max-width: 45ch; }
.max-w-wide { max-width: 80ch; }

/* ============================================
   7. WIDTH & HEIGHT
   ============================================ */

.w-full { width: 100%; }
.w-screen { width: 100vw; }
.w-auto { width: auto; }
.w-1\/2 { width: 50%; }
.w-1\/3 { width: 33.333333%; }
.w-2\/3 { width: 66.666667%; }

.h-full { height: 100%; }
.h-screen { height: 100vh; }
.h-auto { height: auto; }

/* ============================================
   8. POSITION
   ============================================ */

.static { position: static; }
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }

/* ============================================
   9. OVERFLOW
   ============================================ */

.overflow-auto { overflow: auto; }
.overflow-hidden { overflow: hidden; }
.overflow-visible { overflow: visible; }

/* ============================================
   10. BORDER RADIUS
   ============================================ */

.rounded-none { border-radius: 0; }
.rounded-sm { border-radius: calc(var(--radius-md) / 2); }
.rounded { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-full { border-radius: 9999px; }

/* ============================================
   11. BACKGROUND & COLOR
   ============================================ */

.bg-primary { background-color: var(--color-primary); }
.bg-secondary { background-color: var(--color-secondary); }
.bg-bg { background-color: var(--color-bg); }
.bg-bg-secondary { background-color: var(--color-bg-secondary); }

/* ============================================
   12. ASPECT RATIOS (Layout Stability)
   ============================================ */

.aspect-video { aspect-ratio: 16 / 9; }
.aspect-square { aspect-ratio: 1 / 1; }
.aspect-portrait { aspect-ratio: 3 / 4; }

/* Object-fit helper for images */
.object-cover { 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
}

/* ============================================
   13. LAZY LOAD SHIMMER (Performance UI)
   ============================================ */

.img-loading {
  background: linear-gradient(
    110deg, 
    var(--color-bg-secondary) 8%, 
    var(--color-bg-tertiary) 18%, 
    var(--color-bg-secondary) 33%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s linear infinite;
}

@keyframes shimmer {
  to { background-position: -200% 0; }
}

/* Remove animation once loaded */
.img-loading.loaded,
img:not([loading="lazy"]) {
  animation: none;
  background: transparent;
}

/* ============================================
   14. CLEARFIX
   ============================================ */

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}