/* ==========================================================================
   UNVRSL Design — Layouts v1
   Usage: <link rel="stylesheet" href="/design/layouts/v1.css">
   Requires: design/standards/v1.css (design tokens)
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1.  PAGE SHELL
   --------------------------------------------------------------------------- */
.page {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

.page__header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.page__body {
  flex: 1;
}

.page__footer {
  background: var(--surface-2);
  border-top: 1px solid var(--border);
}

/* ---------------------------------------------------------------------------
   2.  SIDEBAR LAYOUT
   --------------------------------------------------------------------------- */
.layout-sidebar {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 0;
  min-height: 100%;
}

.layout-sidebar__aside {
  background: var(--surface);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  position: sticky;
  top: 0;
  height: 100dvh;
}

.layout-sidebar__main {
  padding: var(--space-l);
  overflow-y: auto;
}

@media (width <= 768px) {
  .layout-sidebar {
    grid-template-columns: 1fr;
  }

  .layout-sidebar__aside {
    position: static;
    height: auto;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
}

/* ---------------------------------------------------------------------------
   3.  STACK
   --------------------------------------------------------------------------- */
.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}

.stack--xs  { gap: var(--space-xs); }
.stack--s   { gap: var(--space-s); }
.stack--l   { gap: var(--space-l); }
.stack--xl  { gap: var(--space-xl); }
.stack--xxl { gap: var(--space-xxl); }

/* ---------------------------------------------------------------------------
   4.  INLINE / ROW
   --------------------------------------------------------------------------- */
.inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-s);
}

.inline--xs  { gap: var(--space-xs); }
.inline--m   { gap: var(--space-m); }
.inline--l   { gap: var(--space-l); }
.inline--xl  { gap: var(--space-xl); }

.inline--nowrap {
  flex-wrap: nowrap;
}

/* ---------------------------------------------------------------------------
   5.  CENTER
   --------------------------------------------------------------------------- */
.center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* ---------------------------------------------------------------------------
   6.  TWO-COLUMN / SPLIT
   --------------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-l);
}

@media (width <= 600px) {
  .split {
    grid-template-columns: 1fr;
  }
}

.split--3-1 {
  grid-template-columns: 3fr 1fr;
}

.split--1-3 {
  grid-template-columns: 1fr 3fr;
}

/* ---------------------------------------------------------------------------
   7.  HOLY GRAIL (header + nav + main + aside + footer)
   --------------------------------------------------------------------------- */
.holy-grail {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 220px 1fr 220px;
  grid-template-areas:
    "header  header  header"
    "nav     main    aside"
    "footer  footer  footer";
  min-height: 100dvh;
}

.holy-grail > header { grid-area: header; }
.holy-grail > nav    { grid-area: nav; }
.holy-grail > main   { grid-area: main; }
.holy-grail > aside  { grid-area: aside; }
.holy-grail > footer { grid-area: footer; }

@media (width <= 900px) {
  .holy-grail {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "nav"
      "main"
      "aside"
      "footer";
  }
}

/* ---------------------------------------------------------------------------
   8.  FULL BLEED SECTION
   --------------------------------------------------------------------------- */
.full-bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

/* ---------------------------------------------------------------------------
   9.  AUTOFIT GRID
   --------------------------------------------------------------------------- */
.grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-m);
}

.grid-auto--narrow {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.grid-auto--wide {
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
}

/* ---------------------------------------------------------------------------
   10. HERO SECTION
   --------------------------------------------------------------------------- */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-xxl) var(--space-m);
  text-align: center;
  gap: var(--space-l);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}

.hero--brand {
  background: var(--brand);
  color: var(--text-on-brand);
}

.hero--brand * {
  color: inherit;
}

/* ---------------------------------------------------------------------------
   11. SECTION
   --------------------------------------------------------------------------- */
.section {
  padding: var(--space-xl) 0;
}

.section--sm { padding: var(--space-l) 0; }
.section--lg { padding: var(--space-xxl) 0; }

/* ---------------------------------------------------------------------------
   12. MEDIA QUERY PRESETS (responsive utilities)
   --------------------------------------------------------------------------- */
@media (width >= 768px) {
  .hide\@md { display: none !important; }
}

@media (width <= 767px) {
  .show\@md { display: none !important; }
}