/* ============================================================
   MU LAYOUT SYSTEM — STRUCTURE ONLY (NO TYPOGRAPHY, NO COLORS)
   ============================================================ */

/* ---------------------------
   1. GENERAL CONTENT BLOCKS
   --------------------------- */

.mu-block {
  padding: var(--mu-surface-spacing, 1rem);
  margin-block: 1.5rem;
  background: inherit;
  border-radius: 0.5rem;
}

/* ---------------------------
   2. CARD LAYOUT
   --------------------------- */

.mu-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: var(--mu-surface-spacing, 1rem);
  margin-block: 1.5rem;
  background: inherit;
  border-radius: 0.5rem;
}

/* ---------------------------
   3. ROWS & COLUMNS
   --------------------------- */

.mu-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
}

.mu-col {
  flex: 1 1 0;
  min-width: 0;
}

/* ---------------------------
   4. GRID LAYOUTS
   --------------------------- */

.mu-grid {
  display: grid;
  gap: 1.25rem;
}

.mu-grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

.mu-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.mu-grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

/* ---------------------------
   5. FLEX LAYOUTS
   --------------------------- */

.mu-flex {
  display: flex;
  gap: 1rem;
}

.mu-flex-column {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

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

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

/* ---------------------------
   6. SECTION WRAPPERS
   --------------------------- */

.mu-section-hero {
  padding: calc(var(--mu-surface-spacing) * 3) var(--mu-surface-spacing);
}

.mu-section-content {
  padding: calc(var(--mu-surface-spacing) * 2) var(--mu-surface-spacing);
}

.mu-section-sidebar {
  padding: var(--mu-surface-spacing);
}

.mu-section-footer {
  padding: calc(var(--mu-surface-spacing) * 2) var(--mu-surface-spacing);
}

/* ---------------------------
   7. INLINE ALIGNMENT HELPERS
   --------------------------- */

.mu-left {
  text-align: left;
}

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

.mu-right {
  text-align: right;
}

.mu-middle {
  vertical-align: middle;
}

/* ---------------------------
   8. SPACING UTILITIES
   --------------------------- */

.mu-pad-sm {
  padding: 0.5rem;
}

.mu-pad-md {
  padding: 1rem;
}

.mu-pad-lg {
  padding: 2rem;
}

.mu-gap-sm {
  gap: 0.5rem;
}

.mu-gap-md {
  gap: 1rem;
}

.mu-gap-lg {
  gap: 2rem;
}

.mu-margin-top-sm {
  margin-top: 0.5rem;
}

.mu-margin-top-md {
  margin-top: 1rem;
}

.mu-margin-top-lg {
  margin-top: 2rem;
}

/* ---------------------------
   9. SIZING UTILITIES
   --------------------------- */

.mu-full-width {
  width: 100%;
}

.mu-max-width-narrow {
  max-width: 48rem;
  margin-inline: auto;
}

.mu-max-width-wide {
  max-width: 90rem;
  margin-inline: auto;
}

/* ---------------------------
   10. RESPONSIVE HELPERS
   --------------------------- */

@media (max-width: 36rem) {
  .mu-hide-mobile {
    display: none !important;
  }
  .mu-grid-2,
  .mu-grid-3,
  .mu-grid-4 {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 64rem) {
  .mu-show-desktop {
    display: block !important;
  }
}

/* ---------------------------
   11. JOOMLA COMPONENT LAYOUT HELPERS
   --------------------------- */

.mu-article-layout {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.mu-users-layout {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.mu-tags-layout {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* ---------------------------
   12. GANTRY SECTION HELPERS
   --------------------------- */

.mu-gantry-section {
  padding: calc(var(--mu-surface-spacing) * 2) var(--mu-surface-spacing);
}

.mu-gantry-section-wide {
  max-width: var(--mu-wide-width);
  margin-inline: auto;
}

.mu-gantry-section-narrow {
  max-width: var(--mu-narrow-width);
  margin-inline: auto;
}