/*! 9ui Layout v1.0 | MIT License | https://9ui.dev */

/* ─── Container ─── */
.wp-container,
.ui-container {
  width: 100%;
  max-width: var(--ui-container-xl);
  margin-inline: auto;
  padding-inline: var(--ui-space-6);
}

.ui-container-sm     { max-width: var(--ui-container-sm); margin-inline: auto; padding-inline: var(--ui-space-6); }
.ui-container-md     { max-width: var(--ui-container-md); margin-inline: auto; padding-inline: var(--ui-space-6); }
.ui-container-lg     { max-width: var(--ui-container-lg); margin-inline: auto; padding-inline: var(--ui-space-6); }
.ui-container-narrow { max-width: var(--ui-container-narrow); margin-inline: auto; padding-inline: var(--ui-space-6); }
.ui-container-wide   { max-width: var(--ui-container-wide); margin-inline: auto; padding-inline: var(--ui-space-6); }
.ui-container-full   { width: 100%; padding-inline: var(--ui-space-6); }

@media (max-width: 640px) {
  .ui-container, .ui-container-sm, .ui-container-md,
  .ui-container-lg, .ui-container-narrow, .ui-container-wide,
  .wp-container { padding-inline: var(--ui-space-4); }
}

/* ─── Section ─── */
.wp-section,
.ui-section {
  padding-block: var(--ui-space-20);
}

.ui-section-sm { padding-block: var(--ui-space-10); }
.ui-section-lg { padding-block: var(--ui-space-32); }

/* ─── Grid ─── */
.wp-row,
.ui-grid {
  display: grid;
  gap: var(--ui-space-6);
}

.ui-grid-1  { grid-template-columns: repeat(1, 1fr); }
.ui-grid-2  { grid-template-columns: repeat(2, 1fr); }
.ui-grid-3  { grid-template-columns: repeat(3, 1fr); }
.ui-grid-4  { grid-template-columns: repeat(4, 1fr); }
.ui-grid-5  { grid-template-columns: repeat(5, 1fr); }
.ui-grid-6  { grid-template-columns: repeat(6, 1fr); }
.ui-grid-auto-sm { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.ui-grid-auto-md { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.ui-grid-auto-lg { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }

/* Column spans */
.wp-col-1  { grid-column: span 1; }
.wp-col-2  { grid-column: span 2; }
.wp-col-3  { grid-column: span 3; }
.wp-col-4  { grid-column: span 4; }
.wp-col-5  { grid-column: span 5; }
.wp-col-6  { grid-column: span 6; }
.wp-col-full { grid-column: 1 / -1; }

/* ─── Flex ─── */
.ui-flex         { display: flex; }
.ui-flex-col     { display: flex; flex-direction: column; }
.ui-flex-wrap    { flex-wrap: wrap; }
.ui-flex-nowrap  { flex-wrap: nowrap; }
.ui-items-start  { align-items: flex-start; }
.ui-items-center { align-items: center; }
.ui-items-end    { align-items: flex-end; }
.ui-items-stretch{ align-items: stretch; }
.ui-justify-start   { justify-content: flex-start; }
.ui-justify-center  { justify-content: center; }
.ui-justify-end     { justify-content: flex-end; }
.ui-justify-between { justify-content: space-between; }
.ui-justify-around  { justify-content: space-around; }
.ui-gap-1  { gap: var(--ui-space-1); }
.ui-gap-2  { gap: var(--ui-space-2); }
.ui-gap-3  { gap: var(--ui-space-3); }
.ui-gap-4  { gap: var(--ui-space-4); }
.ui-gap-6  { gap: var(--ui-space-6); }
.ui-gap-8  { gap: var(--ui-space-8); }
.ui-gap-12 { gap: var(--ui-space-12); }
.ui-flex-1   { flex: 1 1 0%; }
.ui-flex-auto{ flex: 1 1 auto; }
.ui-flex-none{ flex: none; }

/* ─── Sidebar Layout ─── */
.ui-layout-sidebar {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--ui-space-8);
  align-items: start;
}

.ui-layout-sidebar-right {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: var(--ui-space-8);
  align-items: start;
}

/* ─── Sticky Sidebar ─── */
.ui-sticky {
  position: sticky;
  top: var(--ui-space-20);
}

/* ─── Dividers ─── */
.ui-divider {
  height: 1px;
  background: hsl(var(--ui-border));
  border: none;
  margin: var(--ui-space-8) 0;
}

.ui-divider-vertical {
  width: 1px;
  background: hsl(var(--ui-border));
  align-self: stretch;
}

/* ─── Responsive ─── */
@media (max-width: 1024px) {
  .ui-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .ui-grid-6 { grid-template-columns: repeat(3, 1fr); }
  .ui-layout-sidebar,
  .ui-layout-sidebar-right { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .ui-grid-2, .ui-grid-3 { grid-template-columns: 1fr; }
  .ui-grid-4, .ui-grid-5, .ui-grid-6 { grid-template-columns: repeat(2, 1fr); }
  .wp-col-2, .wp-col-3, .wp-col-4 { grid-column: span 1; }
  .ui-section { padding-block: var(--ui-space-12); }
  .ui-section-lg { padding-block: var(--ui-space-20); }
}

@media (max-width: 480px) {
  .ui-grid-4, .ui-grid-5, .ui-grid-6 { grid-template-columns: 1fr; }
}