/* ==========================================================================
   Shared Design System — Layout & Grid Conventions
   Version: 1.0 | Date: 2026-08-03
   Load after: design-tokens.css
   ========================================================================== */

/* ── Reset & base ── */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering:          optimizeLegibility;
}

body {
  margin:           0;
  padding:          0;
  font-family:      var(--font-body);
  font-size:        var(--text-base);
  font-weight:      var(--weight-normal);
  line-height:      var(--leading-normal);
  color:            var(--text);
  background-color: var(--bg);
}

img, video, canvas {
  max-width: 100%;
  height:    auto;
}

a {
  color: var(--accent-primary);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* ── Page shell ── */

.page {
  max-width:  var(--content-width);
  margin:     0 auto;
  padding:    0 var(--page-x);
  min-height: calc(100vh - var(--nav-h) - var(--footer-h));
}

/* ── Sections ── */

.section {
  padding: var(--space-9) 0;
}

.section--hero {
  padding-top:    var(--space-11);
  padding-bottom: var(--space-9);
}

.section--compact {
  padding: var(--space-7) 0;
}

.section--stacked {
  padding-top: var(--space-6);
}

/* ── Footer ── */

.footer {
  height:       var(--footer-h);
  display:      flex;
  align-items:  center;
  justify-content: center;
  font-size:    var(--text-xs);
  color:        var(--text-muted);
  padding:      0 var(--page-x);
}

/* ── Grid systems ── */

/* Card grid — responsive autofit */
.grid {
  display: grid;
  gap:     var(--space-5);
}

/* Stats grid — smaller cards, tighter fit */
.stats-grid {
  display: grid;
  gap:     var(--space-4);
}

/* Feature grid — 2-column fixed */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                   var(--space-5);
}

/* Rooms grid — 2-column large cards (Night City pattern) */
.rooms-grid {
  display: grid;
  gap:     var(--space-5);
}

/* ── Utility layout classes ── */

.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }

/* ── Responsive breakpoints (mobile-first) ── */

/* < 480px: Default — single column, stacked */
.grid,
.stats-grid,
.rooms-grid {
  grid-template-columns: 1fr;
}

.feature-grid {
  grid-template-columns: 1fr;
}

/* >= 480px: Two columns */
@media (min-width: 480px) {
  .grid,
  .rooms-grid {
    grid-template-columns: repeat(2, 1fr);
  }

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

/* >= 761px: Full grid + horizontal nav */
@media (min-width: 761px) {
  .grid,
  .rooms-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }

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

/* >= 1040px: Max content width */
@media (min-width: 1040px) {
  .page {
    max-width: var(--content-width);
  }
}

/* ── Mobile page-x reduction ── */

@media (max-width: 480px) {
  :root {
    --page-x: 18px;
  }
}

/* ── Print styles ── */

@media print {
  body {
    background: white;
    color:      black;
  }

  .navbar,
  .footer,
  .theme-toggle {
    display: none;
  }

  .page {
    max-width: none;
    padding:   0;
  }
}