/************************************************************
 * MARKSMAN DIGITAL MEDIA – UTILITY CLASSES
 * 
 * Reusable utility classes for common patterns across the site.
 * Add new utilities here as your site grows.
 * 
 * Last Updated: 2025-01-09
 ************************************************************/

/* ==========================================
   SPACING UTILITIES
   ========================================== */

.mdm-section {
  padding: 60px 20px;
}

.mdm-section--large {
  padding: 100px 20px;
}

.mdm-section--small {
  padding: 40px 20px;
}

.mdm-container {
  max-width: 1200px;
  margin-inline: auto;
}

.mdm-container--narrow {
  max-width: 800px;
  margin-inline: auto;
}


/* ==========================================
   TEXT UTILITIES
   ========================================== */

.mdm-text-center {
  text-align: center;
}

.mdm-text-balance {
  text-wrap: balance;
}

.mdm-text-pretty {
  text-wrap: pretty;
}


/* ==========================================
   VISIBILITY UTILITIES
   ========================================== */

/* Hide on mobile */
@media (max-width: 767.98px) {
  .mdm-hide-mobile {
    display: none;
  }
}

/* Hide on tablet */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .mdm-hide-tablet {
    display: none;
  }
}

/* Hide on desktop */
@media (min-width: 1024px) {
  .mdm-hide-desktop {
    display: none;
  }
}

/* Show only on mobile */
.mdm-show-mobile {
  display: none;
}

@media (max-width: 767.98px) {
  .mdm-show-mobile {
    display: block;
  }
}


/* ==========================================
   ICON CHIPS (Additional Sizes)
   ========================================== */

.mdm-chip-sm {
  width: var(--mdm-chip-sm);
  height: var(--mdm-chip-sm);
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in oklab, var(--mdm-accent) 12%, transparent);
  color: var(--mdm-accent);
}


/* ==========================================
   BACKGROUND UTILITIES
   ========================================== */

.mdm-bg-accent {
  background-color: var(--mdm-accent);
}

.mdm-bg-text {
  background-color: var(--mdm-text);
}

.mdm-bg-light {
  background-color: var(--mdm-surface-back);
}

.mdm-bg-dark {
  background: var(--mdm-grad-navy);
  color: #fff;
}


/* ==========================================
   FOCUS UTILITIES
   ========================================== */

.mdm-focus-ring:focus-visible {
  outline: 3px solid var(--mdm-focus);
  outline-offset: 2px;
  border-radius: 4px;
}


/* ==========================================
   ANIMATION UTILITIES
   ========================================== */

.mdm-fade-in {
  animation: mdmFadeIn 0.6s ease-out;
}

@keyframes mdmFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.mdm-slide-in {
  animation: mdmSlideIn 0.5s ease-out;
}

@keyframes mdmSlideIn {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
  .mdm-fade-in,
  .mdm-slide-in {
    animation: none;
  }
}


/* ==========================================
   GRID UTILITIES
   ========================================== */

.mdm-grid {
  display: grid;
  gap: 2rem;
}

.mdm-grid--2 {
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .mdm-grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

.mdm-grid--3 {
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .mdm-grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .mdm-grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
}


/* ==========================================
   BUTTON VARIANTS (Additional)
   ========================================== */

.mdm-btn-text {
  background: transparent;
  border: none;
  color: var(--mdm-accent);
  padding: 0.5rem 0.75rem;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.mdm-btn-text:hover {
  text-decoration-thickness: 2px;
  color: var(--mdm-accent-hover);
}


/* ==========================================
   ASPECT RATIO UTILITIES
   ========================================== */

.mdm-aspect-square {
  aspect-ratio: 1 / 1;
}

.mdm-aspect-video {
  aspect-ratio: 16 / 9;
}

.mdm-aspect-portrait {
  aspect-ratio: 3 / 4;
}


/* ==========================================
   SHADOW UTILITIES
   ========================================== */

.mdm-shadow-sm {
  box-shadow: var(--mdm-shadow-sm);
}

.mdm-shadow-md {
  box-shadow: var(--mdm-shadow-md);
}

.mdm-shadow-lg {
  box-shadow: var(--mdm-shadow-lg);
}


/* ==========================================
   BORDER UTILITIES
   ========================================== */

.mdm-border {
  border: var(--mdm-border-thin) solid var(--mdm-border);
}

.mdm-border-accent {
  border: var(--mdm-border-thin) solid var(--mdm-accent);
}

.mdm-border-top-accent {
  border-top: var(--mdm-border-thick) solid var(--mdm-accent);
}

.mdm-rounded {
  border-radius: 12px;
}

.mdm-rounded-lg {
  border-radius: var(--mdm-card-border-radius);
}

.mdm-rounded-full {
  border-radius: 999px;
}


/* ==========================================
   NOTES & CHANGELOG
   ========================================== */

/*
PURPOSE:
This file contains reusable utility classes that can be applied
throughout the site. As you build more pages, add utilities here
instead of creating one-off styles.

NAMING CONVENTION:
- All classes prefixed with "mdm-" to avoid conflicts
- Use double dashes for variants: .mdm-btn--large
- Use single dashes for modifiers: .mdm-text-center

CHANGELOG:
- 2025-01-09: Initial utility system created
- 2025-01-09: Added common spacing, text, and visibility utilities

TODO:
- Add responsive spacing utilities (mdm-mt-4, mdm-mb-8, etc.)
- Consider adding color utilities for text
- Add loading state utilities
- Add disabled state utilities
*/