/* ================================================================
   05 — HEART OF HOPE UTILITIES LAYER
   Version: Phase 4.2 (Atomic Utilities — Clean & Consistent)
   Purpose: Small, reusable helpers for spacing, alignment, display,
            text, sizing, visibility, and positioning.
================================================================ */

/* ===============================================================
   1. SPACING UTILITIES
   Naming: mt = margin-top, mb = margin-bottom, pt = padding-top, etc.
================================================================ */

.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: var(--space-1) !important; }
.mt-2 { margin-top: var(--space-2) !important; }
.mt-3 { margin-top: var(--space-3) !important; }
.mt-4 { margin-top: var(--space-4) !important; }
.mt-5 { margin-top: var(--space-5) !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: var(--space-1) !important; }
.mb-2 { margin-bottom: var(--space-2) !important; }
.mb-3 { margin-bottom: var(--space-3) !important; }
.mb-4 { margin-bottom: var(--space-4) !important; }
.mb-5 { margin-bottom: var(--space-5) !important; }

.pt-1 { padding-top: var(--space-1) !important; }
.pt-2 { padding-top: var(--space-2) !important; }
.pt-3 { padding-top: var(--space-3) !important; }

.pb-1 { padding-bottom: var(--space-1) !important; }
.pb-2 { padding-bottom: var(--space-2) !important; }
.pb-3 { padding-bottom: var(--space-3) !important; }

/* ===============================================================
   2. FLEX UTILITIES
================================================================ */

.flex        { display: flex !important; }
.inline-flex { display: inline-flex !important; }

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

.flex-between {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.flex-column { flex-direction: column !important; }
.flex-row    { flex-direction: row !important; }

.flex-wrap   { flex-wrap: wrap !important; }
.no-wrap     { flex-wrap: nowrap !important; }

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

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

.text-bold    { font-weight: 700 !important; }
.text-medium  { font-weight: 500 !important; }
.text-light   { font-weight: 300 !important; }

.text-small   { font-size: 0.85rem !important; }
.text-large   { font-size: 1.25rem !important; }

/* ===============================================================
   4. DISPLAY UTILITIES
================================================================ */

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

/* Mobile visibility */
.hidden-mobile { display: block !important; }
@media (max-width: 600px) {
  .hidden-mobile { display: none !important; }
}

/* Desktop visibility */
.hidden-desktop { display: none !important; }
@media (max-width: 600px) {
  .hidden-desktop { display: block !important; }
}

/* ===============================================================
   5. WIDTH + CONTAINER UTILITIES
================================================================ */

.w-100 { width: 100% !important; }
.w-75  { width: 75% !important; }
.w-50  { width: 50% !important; }
.w-25  { width: 25% !important; }

.max-w-narrow  { max-width: var(--container-narrow) !important; }
.max-w-medium  { max-width: var(--container-medium) !important; }
.max-w-wide    { max-width: var(--container-wide) !important; }
.max-w-full    { max-width: 100% !important; }

/* ===============================================================
   6. BORDER + RADIUS UTILITIES
================================================================ */

.rounded-soft   { border-radius: var(--radius-soft) !important; }
.rounded-medium { border-radius: var(--radius-medium) !important; }
.rounded-full   { border-radius: 999px !important; }

.border      { border: 1px solid var(--color-border, #ddd) !important; }
.border-none { border: none !important; }

/* ===============================================================
   7. SHADOW UTILITIES
================================================================ */

.shadow-soft   { box-shadow: var(--shadow-soft) !important; }
.shadow-medium { box-shadow: var(--shadow-medium) !important; }
.shadow-none   { box-shadow: none !important; }

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

.relative { position: relative !important; }
.absolute { position: absolute !important; }
.fixed    { position: fixed !important; }
.sticky   { position: sticky !important; }

/* Quick centering */
.absolute-center {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}

/* ===============================================================
   9. MISC UTILITIES
================================================================ */

.cursor-pointer { cursor: pointer !important; }
.no-select      { user-select: none !important; }

.opacity-50  { opacity: 0.5 !important; }
.opacity-75  { opacity: 0.75 !important; }
.opacity-100 { opacity: 1 !important; }

.z-1    { z-index: 1 !important; }
.z-10   { z-index: 10 !important; }
.z-50   { z-index: 50 !important; }
.z-99   { z-index: 99 !important; }
.z-max  { z-index: 9999 !important; }

/* ===============================================================
   3. UTILITY FIXES (HOH-UTILITY-FIXES v1.1)
================================================================ */

/* Avatar squish fix */
@media (max-width: 480px) {
  .member-avatar img,
  .group-avatar img {
    max-width: 80px;
    height: auto;
  }
}

/* Responsive YouTube embed */
.embed-youtube {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
}

.embed-youtube iframe,
iframe[src*="youtube.com"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Menu button spacing */
.menu-button-container {
  margin-top: var(--space-1);
  margin-bottom: var(--space-1);
}

/* ===============================================================
   4. GLOBAL UTILITY CLASSES (Phase 4)
================================================================ */

/* Flex utilities */
.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

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

/* Text utilities */
.text-center { text-align: center; }
.text-right  { text-align: right; }

/* Spacing utilities */
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }

.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }

/* Visibility utilities */
.hidden-mobile { display: block; }
@media (max-width: 600px) {
  .hidden-mobile { display: none; }
}

.hidden-desktop { display: none; }
@media (max-width: 600px) {
  .hidden-desktop { display: block; }
}

/* Card utility */
.hoh-card {
  background: var(--color-surface);
  border-radius: var(--hoh-component-radius);
  box-shadow: var(--hoh-component-shadow);
  padding: var(--space-3);
}

/* Shadow utilities */
.shadow-soft   { box-shadow: var(--shadow-soft); }
.shadow-medium { box-shadow: var(--shadow-medium); }