/**
 * SCORM Player Utility Classes
 * Reusable utility classes for common patterns
 */

/* Spacing Utilities */
.scorm-m-0 { margin: 0; }
.scorm-mt-1 { margin-top: var(--scorm-spacing-sm); }
.scorm-mt-2 { margin-top: var(--scorm-spacing-md); }
.scorm-mb-1 { margin-bottom: var(--scorm-spacing-sm); }
.scorm-mb-2 { margin-bottom: var(--scorm-spacing-md); }
.scorm-p-1 { padding: var(--scorm-spacing-sm); }
.scorm-p-2 { padding: var(--scorm-spacing-md); }
.scorm-px-2 { padding-left: var(--scorm-spacing-md); padding-right: var(--scorm-spacing-md); }
.scorm-px-3 { padding-left: var(--scorm-spacing-lg); padding-right: var(--scorm-spacing-lg); }
.scorm-py-2 { padding-top: var(--scorm-spacing-md); padding-bottom: var(--scorm-spacing-md); }

/* Display Utilities */
.scorm-d-flex { display: flex; }
.scorm-d-grid { display: grid; }
.scorm-d-none { display: none; }
.scorm-d-block { display: block; }
.scorm-d-inline-block { display: inline-block; }

/* Flexbox Utilities */
.scorm-flex-center { 
  display: flex; 
  justify-content: center; 
  align-items: center; 
}
.scorm-flex-between { 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
}
.scorm-flex-column { flex-direction: column; }
.scorm-flex-wrap { flex-wrap: wrap; }
.scorm-gap-1 { gap: var(--scorm-spacing-sm); }
.scorm-gap-2 { gap: var(--scorm-spacing-md); }

/* Text Utilities */
.scorm-text-center { text-align: center; }
.scorm-text-left { text-align: left; }
.scorm-text-right { text-align: right; }
.scorm-text-bold { font-weight: 600; }
.scorm-text-normal { font-weight: 400; }
.scorm-text-muted { color: var(--scorm-text-muted); }

/* Button Base (reusable) */
.scorm-btn-base {
  padding: 12px 24px;
  border: none;
  border-radius: var(--scorm-border-radius);
  font-size: var(--scorm-font-size-base);
  font-family: var(--scorm-font-family);
  cursor: pointer;
  transition: var(--scorm-transition);
  text-decoration: none;
  display: inline-block;
}

/* Responsive Utilities */
@media (max-width: 768px) {
  .scorm-mobile-hidden { display: none !important; }
  .scorm-mobile-full { width: 100% !important; }
  .scorm-mobile-block { display: block !important; }
}