/* ==========================================================================
   DESA55 Layout System
   ========================================================================== */

/* ── Container ───────────────────────────────────────────────────────────── */

.container {
  width: 100%;
  max-width: var(--container-2xl);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container-sm  { max-width: var(--container-sm); margin-inline: auto; padding-inline: var(--gutter); }
.container-md  { max-width: var(--container-md); margin-inline: auto; padding-inline: var(--gutter); }
.container-lg  { max-width: var(--container-lg); margin-inline: auto; padding-inline: var(--gutter); }
.container-xl  { max-width: var(--container-xl); margin-inline: auto; padding-inline: var(--gutter); }
.container-2xl { max-width: var(--container-2xl); margin-inline: auto; padding-inline: var(--gutter); }

/* ── Section Spacing ─────────────────────────────────────────────────────── */

.section {
  padding-block: var(--section-gap);
}

.section-sm {
  padding-block: calc(var(--section-gap) * 0.6);
}

.section-lg {
  padding-block: calc(var(--section-gap) * 1.4);
}

/* ── Grid System ─────────────────────────────────────────────────────────── */

.grid {
  display: grid;
  gap: var(--space-6);
}

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

.grid-auto-sm { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.grid-auto-md { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.grid-auto-lg { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }

/* ── Flex Utilities ──────────────────────────────────────────────────────── */

.flex         { display: flex; }
.flex-col     { flex-direction: column; }
.flex-wrap    { flex-wrap: wrap; }
.flex-nowrap  { flex-wrap: nowrap; }
.flex-1       { flex: 1; }
.flex-auto    { flex: auto; }
.flex-none    { flex: none; }
.flex-shrink-0 { flex-shrink: 0; }

.items-start    { align-items: flex-start; }
.items-center   { align-items: center; }
.items-end      { align-items: flex-end; }
.items-stretch  { align-items: stretch; }
.items-baseline { align-items: baseline; }

.justify-start   { justify-content: flex-start; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around  { justify-content: space-around; }
.justify-evenly  { justify-content: space-evenly; }

.gap-1  { gap: var(--space-1); }
.gap-2  { gap: var(--space-2); }
.gap-3  { gap: var(--space-3); }
.gap-4  { gap: var(--space-4); }
.gap-5  { gap: var(--space-5); }
.gap-6  { gap: var(--space-6); }
.gap-8  { gap: var(--space-8); }
.gap-10 { gap: var(--space-10); }
.gap-12 { gap: var(--space-12); }

/* ── Positioning ─────────────────────────────────────────────────────────── */

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

.inset-0 { inset: 0; }
.top-0   { top: 0; }
.right-0 { right: 0; }
.bottom-0 { bottom: 0; }
.left-0  { left: 0; }

/* ── Overflow ────────────────────────────────────────────────────────────── */

.overflow-hidden { overflow: hidden; }
.overflow-x-hidden { overflow-x: hidden; }
.overflow-y-auto { overflow-y: auto; }

/* ── Display ─────────────────────────────────────────────────────────────── */

.block        { display: block; }
.inline-block { display: inline-block; }
.inline-flex  { display: inline-flex; }
.inline       { display: inline; }
.hidden       { display: none; }

/* ── Width / Height ──────────────────────────────────────────────────────── */

.w-full  { width: 100%; }
.h-full  { height: 100%; }
.min-h-screen { min-height: 100dvh; }
.max-w-full   { max-width: 100%; }

/* ── Z-Index ─────────────────────────────────────────────────────────────── */

.z-0   { z-index: var(--z-base); }
.z-10  { z-index: var(--z-raised); }
.z-100 { z-index: var(--z-dropdown); }

/* ── Text Alignment ──────────────────────────────────────────────────────── */

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

/* ── Spacing Utilities ───────────────────────────────────────────────────── */

.mx-auto { margin-inline: auto; }
.my-auto { margin-block: auto; }

/* ── Content Centering ───────────────────────────────────────────────────── */

.section-header {
  text-align: center;
  max-width: 700px;
  margin-inline: auto;
  margin-bottom: var(--space-16);
}

.section-header .section-desc {
  margin-inline: auto;
}

/* ── Two Column Layout ───────────────────────────────────────────────────── */

.layout-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
}

.layout-2col-sidebar {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: var(--space-12);
  align-items: start;
}

/* ── Responsive Breakpoints ──────────────────────────────────────────────── */

@media (max-width: 1280px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .layout-2col-sidebar { grid-template-columns: 1fr; }
}

@media (max-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .layout-2col { grid-template-columns: 1fr; }
}

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

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

/* ── Divider ─────────────────────────────────────────────────────────────── */

.divider {
  width: 100%;
  height: 1px;
  background: var(--color-border);
  margin-block: var(--space-8);
}

.divider-gradient {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-primary), transparent);
  border: none;
  margin-block: var(--space-8);
}

/* ── Background Patterns ─────────────────────────────────────────────────── */

.bg-grid {
  background-image:
    linear-gradient(rgba(34, 197, 94, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 197, 94, 0.04) 1px, transparent 1px);
  background-size: 40px 40px;
}

.bg-dot {
  background-image: radial-gradient(circle, rgba(34, 197, 94, 0.08) 1px, transparent 1px);
  background-size: 24px 24px;
}

.bg-noise {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
}

/* ── Glow Effects ────────────────────────────────────────────────────────── */

.glow-primary {
  box-shadow: var(--shadow-glow);
}

.glow-line {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 1px;
  background: var(--gradient-primary);
  filter: blur(4px);
  opacity: 0.5;
}