/* ============================================================
   MagicallySoft — Layout System
   Container, grid, flexbox, spacing, and responsive utilities.
   ============================================================ */

/* ── Skip Link (Accessibility) ──────────────────────────── */
.ms-skip-link {
  position: absolute;
  top: -100%;
  left: var(--ms-sp-4);
  z-index: var(--ms-z-toast);
  padding: var(--ms-sp-3) var(--ms-sp-6);
  background: var(--ms-primary);
  color: var(--ms-text-on-primary);
  font-weight: 600;
  border-radius: 0 0 var(--ms-radius) var(--ms-radius);
  transition: top var(--ms-duration) var(--ms-ease);
}
.ms-skip-link:focus {
  top: 0;
  color: var(--ms-text-on-primary);
}

/* ── Container ──────────────────────────────────────────── */
.ms-container {
  width: 100%;
  max-width: var(--ms-container);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--ms-sp-6);
  padding-right: var(--ms-sp-6);
}

.ms-container-sm {
  max-width: var(--ms-container-sm);
}

.ms-container-lg {
  max-width: var(--ms-container-lg);
}

@media (max-width: 767px) {
  .ms-container {
    padding-left: var(--ms-sp-4);
    padding-right: var(--ms-sp-4);
  }
}

/* ── Section Spacing ────────────────────────────────────── */
.ms-section {
  padding-top: var(--ms-sp-24);
  padding-bottom: var(--ms-sp-24);
}

.ms-section-sm {
  padding-top: var(--ms-sp-16);
  padding-bottom: var(--ms-sp-16);
}

.ms-section-lg {
  padding-top: var(--ms-sp-32);
  padding-bottom: var(--ms-sp-32);
}

@media (max-width: 767px) {
  .ms-section {
    padding-top: var(--ms-sp-16);
    padding-bottom: var(--ms-sp-16);
  }
  .ms-section-sm {
    padding-top: var(--ms-sp-12);
    padding-bottom: var(--ms-sp-12);
  }
  .ms-section-lg {
    padding-top: var(--ms-sp-20);
    padding-bottom: var(--ms-sp-20);
  }
}

/* ── CSS Grid Utilities ─────────────────────────────────── */
.ms-grid {
  display: grid;
  gap: var(--ms-sp-8);
}

.ms-grid-2 { grid-template-columns: repeat(2, 1fr); }
.ms-grid-3 { grid-template-columns: repeat(3, 1fr); }
.ms-grid-4 { grid-template-columns: repeat(4, 1fr); }
.ms-grid-5 { grid-template-columns: repeat(5, 1fr); }
.ms-grid-6 { grid-template-columns: repeat(6, 1fr); }

/* Auto-fill responsive grids */
.ms-grid-auto-sm { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.ms-grid-auto    { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.ms-grid-auto-lg { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }

@media (max-width: 1023px) {
  .ms-grid-4, .ms-grid-5, .ms-grid-6 {
    grid-template-columns: repeat(2, 1fr);
  }
  .ms-grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .ms-grid-2, .ms-grid-3, .ms-grid-4,
  .ms-grid-5, .ms-grid-6 {
    grid-template-columns: 1fr;
  }
}

/* ── Flex Utilities ─────────────────────────────────────── */
.ms-flex       { display: flex; }
.ms-flex-col   { display: flex; flex-direction: column; }
.ms-flex-wrap  { flex-wrap: wrap; }
.ms-flex-center { display: flex; align-items: center; justify-content: center; }
.ms-flex-between { display: flex; align-items: center; justify-content: space-between; }
.ms-flex-start { display: flex; align-items: flex-start; }
.ms-items-center { align-items: center; }
.ms-items-start  { align-items: flex-start; }
.ms-items-end    { align-items: flex-end; }
.ms-justify-center  { justify-content: center; }
.ms-justify-between { justify-content: space-between; }
.ms-justify-end     { justify-content: flex-end; }
.ms-flex-1 { flex: 1; }

/* ── Gap Utilities ──────────────────────────────────────── */
.ms-gap-1  { gap: var(--ms-sp-1); }
.ms-gap-2  { gap: var(--ms-sp-2); }
.ms-gap-3  { gap: var(--ms-sp-3); }
.ms-gap-4  { gap: var(--ms-sp-4); }
.ms-gap-6  { gap: var(--ms-sp-6); }
.ms-gap-8  { gap: var(--ms-sp-8); }
.ms-gap-10 { gap: var(--ms-sp-10); }
.ms-gap-12 { gap: var(--ms-sp-12); }
.ms-gap-16 { gap: var(--ms-sp-16); }

/* ── Text Alignment ─────────────────────────────────────── */
.ms-text-center { text-align: center; }
.ms-text-left   { text-align: left; }
.ms-text-right  { text-align: right; }

/* ── Display Utilities ──────────────────────────────────── */
.ms-block   { display: block; }
.ms-inline  { display: inline; }
.ms-hidden  { display: none; }

/* ── Width Utilities ────────────────────────────────────── */
.ms-w-full  { width: 100%; }
.ms-max-w-prose { max-width: 65ch; }
.ms-max-w-sm { max-width: 480px; }
.ms-max-w-md { max-width: 640px; }
.ms-max-w-lg { max-width: 800px; }

/* ── Margin Utilities ───────────────────────────────────── */
.ms-mx-auto { margin-left: auto; margin-right: auto; }
.ms-mt-0  { margin-top: 0; }
.ms-mt-2  { margin-top: var(--ms-sp-2); }
.ms-mt-4  { margin-top: var(--ms-sp-4); }
.ms-mt-6  { margin-top: var(--ms-sp-6); }
.ms-mt-8  { margin-top: var(--ms-sp-8); }
.ms-mt-10 { margin-top: var(--ms-sp-10); }
.ms-mt-12 { margin-top: var(--ms-sp-12); }
.ms-mt-16 { margin-top: var(--ms-sp-16); }
.ms-mb-0  { margin-bottom: 0; }
.ms-mb-2  { margin-bottom: var(--ms-sp-2); }
.ms-mb-4  { margin-bottom: var(--ms-sp-4); }
.ms-mb-6  { margin-bottom: var(--ms-sp-6); }
.ms-mb-8  { margin-bottom: var(--ms-sp-8); }
.ms-mb-10 { margin-bottom: var(--ms-sp-10); }
.ms-mb-12 { margin-bottom: var(--ms-sp-12); }
.ms-mb-16 { margin-bottom: var(--ms-sp-16); }

/* ── Position ───────────────────────────────────────────── */
.ms-relative { position: relative; }
.ms-absolute { position: absolute; }
.ms-sticky   { position: sticky; }

/* ── Overflow ───────────────────────────────────────────── */
.ms-overflow-hidden { overflow: hidden; }

/* ── Two-Column Split Layout ────────────────────────────── */
.ms-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ms-sp-16);
  align-items: center;
}

.ms-split-reverse {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ms-sp-16);
  align-items: center;
}

.ms-split-reverse > :first-child {
  order: 2;
}
.ms-split-reverse > :last-child {
  order: 1;
}

.ms-split-60-40 {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: var(--ms-sp-16);
  align-items: center;
}

@media (max-width: 767px) {
  .ms-split,
  .ms-split-reverse,
  .ms-split-60-40 {
    grid-template-columns: 1fr;
    gap: var(--ms-sp-10);
  }
  .ms-split-reverse > :first-child { order: 1; }
  .ms-split-reverse > :last-child  { order: 2; }
}

/* ── Responsive Visibility ──────────────────────────────── */
@media (max-width: 767px) {
  .ms-hide-mobile { display: none !important; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .ms-hide-tablet { display: none !important; }
}

@media (min-width: 1024px) {
  .ms-hide-desktop { display: none !important; }
}

@media (max-width: 1023px) {
  .ms-hide-below-lg { display: none !important; }
}

@media (min-width: 768px) {
  .ms-show-mobile-only { display: none !important; }
}

/* ── Background Utilities ───────────────────────────────── */
.ms-bg-alt {
  background-color: var(--ms-bg-alt);
}

.ms-bg-surface {
  background-color: var(--ms-surface);
}

/* ── Divider ────────────────────────────────────────────── */
.ms-divider {
  height: 1px;
  background: var(--ms-border);
  border: none;
  margin: var(--ms-sp-12) 0;
}