/* ============================================
   NUKA · LAYOUT v2
   Editorial grid system with asymmetric power
   ============================================ */

/* Base container */
.nuka-container {
  width: 100%;
  padding-left: var(--padding-x);
  padding-right: var(--padding-x);
}

/* Sections */
.nuka-section {
  padding-top: var(--space-section-md);
  padding-bottom: var(--space-section-md);
}

.nuka-section--tight {
  padding-top: var(--space-section-sm);
  padding-bottom: var(--space-section-sm);
}

.nuka-section--generous {
  padding-top: var(--space-section-lg);
  padding-bottom: var(--space-section-lg);
}

.nuka-section--surface {
  background-color: var(--color-surface);
}

.nuka-section--primary {
  background-color: var(--color-primary);
  color: var(--color-bg);
}

.nuka-section--primary .nuka-h1,
.nuka-section--primary .nuka-h2,
.nuka-section--primary .nuka-h3 {
  color: var(--color-bg);
}

/* ============================================
   EDITORIAL GRID SYSTEM
   ============================================ */

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

/* Auto-fill grid with minmax */
.nuka-grid--auto {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* Explicit column spans */
.nuka-grid--2 {
  grid-template-columns: 1fr;
}

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

.nuka-grid--4 {
  grid-template-columns: 1fr;
}

/* Asymmetric editorial grids */
.nuka-grid--asymmetric {
  grid-template-columns: 1fr;
}

.nuka-grid--asymmetric-reverse {
  grid-template-columns: 1fr;
}

.nuka-grid--golden {
  grid-template-columns: 1fr;
}

.nuka-grid--golden-reverse {
  grid-template-columns: 1fr;
}

/* Editorial overlap grid — text overlaps image */
.nuka-grid--overlap {
  grid-template-columns: 1fr;
}

/* Responsive */
@media (min-width: 768px) {
  .nuka-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .nuka-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .nuka-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .nuka-grid--asymmetric { grid-template-columns: 2fr 3fr; }
  .nuka-grid--asymmetric-reverse { grid-template-columns: 3fr 2fr; }
  .nuka-grid--golden { grid-template-columns: 1.618fr 1fr; }
  .nuka-grid--golden-reverse { grid-template-columns: 1fr 1.618fr; }
  .nuka-grid--overlap {
    grid-template-columns: 1.2fr 1fr;
    gap: 0;
  }
}

@media (min-width: 1024px) {
  .nuka-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .nuka-grid--4 { grid-template-columns: repeat(4, 1fr); }
  .nuka-grid--asymmetric { grid-template-columns: 2fr 3fr; }
  .nuka-grid--asymmetric-reverse { grid-template-columns: 3fr 2fr; }
  .nuka-grid--golden { grid-template-columns: 1.618fr 1fr; }
  .nuka-grid--golden-reverse { grid-template-columns: 1fr 1.618fr; }
  .nuka-grid--overlap {
    grid-template-columns: 1.4fr 1fr;
    gap: 0;
  }
}

/* ============================================
   12-COLUMN EDITORIAL GRID
   For complex asymmetric layouts
   ============================================ */

.nuka-editorial {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--grid-gap);
  width: 100%;
}

.nuka-editorial > * {
  grid-column: 1 / -1;
}

@media (min-width: 768px) {
  .nuka-editorial .nuka-col-1 { grid-column: span 1; }
  .nuka-editorial .nuka-col-2 { grid-column: span 2; }
  .nuka-editorial .nuka-col-3 { grid-column: span 3; }
  .nuka-editorial .nuka-col-4 { grid-column: span 4; }
  .nuka-editorial .nuka-col-5 { grid-column: span 5; }
  .nuka-editorial .nuka-col-6 { grid-column: span 6; }
  .nuka-editorial .nuka-col-7 { grid-column: span 7; }
  .nuka-editorial .nuka-col-8 { grid-column: span 8; }
  .nuka-editorial .nuka-col-9 { grid-column: span 9; }
  .nuka-editorial .nuka-col-10 { grid-column: span 10; }
  .nuka-editorial .nuka-col-11 { grid-column: span 11; }
  .nuka-editorial .nuka-col-12 { grid-column: span 12; }

  .nuka-editorial .nuka-start-1 { grid-column-start: 1; }
  .nuka-editorial .nuka-start-2 { grid-column-start: 2; }
  .nuka-editorial .nuka-start-3 { grid-column-start: 3; }
  .nuka-editorial .nuka-start-4 { grid-column-start: 4; }
  .nuka-editorial .nuka-start-5 { grid-column-start: 5; }
  .nuka-editorial .nuka-start-6 { grid-column-start: 6; }
  .nuka-editorial .nuka-start-7 { grid-column-start: 7; }
  .nuka-editorial .nuka-start-8 { grid-column-start: 8; }
  .nuka-editorial .nuka-start-9 { grid-column-start: 9; }

  .nuka-editorial .nuka-row-2 { grid-row: span 2; }
  .nuka-editorial .nuka-row-3 { grid-row: span 3; }
}

/* ============================================
   OVERLAP UTILITIES
   ============================================ */

.nuka-overlap-left {
  position: relative;
  z-index: 2;
}

@media (min-width: 768px) {
  .nuka-overlap-left {
    margin-right: calc(var(--space-3xl) * -1);
  }
}

.nuka-overlap-right {
  position: relative;
  z-index: 2;
}

@media (min-width: 768px) {
  .nuka-overlap-right {
    margin-left: calc(var(--space-3xl) * -1);
  }
}

/* ============================================
   STICKY UTILITIES
   ============================================ */

.nuka-sticky {
  position: sticky;
  top: calc(var(--nav-height) + var(--space-lg));
  align-self: start;
}

/* ============================================
   FULL BLEED
   ============================================ */

.nuka-fullbleed {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

.nuka-fullbleed--breakout {
  width: 100%;
  margin-left: 0;
  position: relative;
  left: 0;
  transform: none;
}

/* ============================================
   FLEX UTILITIES
   ============================================ */

.nuka-flex {
  display: flex;
}

.nuka-flex--between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nuka-flex--center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.nuka-flex--column {
  display: flex;
  flex-direction: column;
}

/* ============================================
   SPACING UTILITIES
   ============================================ */

.nuka-mt-sm { margin-top: var(--space-sm); }
.nuka-mt-md { margin-top: var(--space-md); }
.nuka-mt-lg { margin-top: var(--space-lg); }
.nuka-mt-xl { margin-top: var(--space-xl); }
.nuka-mt-2xl { margin-top: var(--space-2xl); }
.nuka-mt-3xl { margin-top: var(--space-3xl); }
.nuka-mt-4xl { margin-top: var(--space-4xl); }

.nuka-mb-sm { margin-bottom: var(--space-sm); }
.nuka-mb-md { margin-bottom: var(--space-md); }
.nuka-mb-lg { margin-bottom: var(--space-lg); }
.nuka-mb-xl { margin-bottom: var(--space-xl); }
.nuka-mb-2xl { margin-bottom: var(--space-2xl); }
.nuka-mb-3xl { margin-bottom: var(--space-3xl); }
.nuka-mb-4xl { margin-bottom: var(--space-4xl); }

.nuka-pt-sm { padding-top: var(--space-sm); }
.nuka-pt-md { padding-top: var(--space-md); }
.nuka-pt-lg { padding-top: var(--space-lg); }
.nuka-pt-xl { padding-top: var(--space-xl); }
.nuka-pt-2xl { padding-top: var(--space-2xl); }
.nuka-pt-3xl { padding-top: var(--space-3xl); }
.nuka-pt-4xl { padding-top: var(--space-4xl); }

.nuka-pb-sm { padding-bottom: var(--space-sm); }
.nuka-pb-md { padding-bottom: var(--space-md); }
.nuka-pb-lg { padding-bottom: var(--space-lg); }
.nuka-pb-xl { padding-bottom: var(--space-xl); }
.nuka-pb-2xl { padding-bottom: var(--space-2xl); }
.nuka-pb-3xl { padding-bottom: var(--space-3xl); }
.nuka-pb-4xl { padding-bottom: var(--space-4xl); }

/* Gap utilities */
.nuka-gap-sm { gap: var(--space-sm); }
.nuka-gap-md { gap: var(--space-md); }
.nuka-gap-lg { gap: var(--space-lg); }
.nuka-gap-xl { gap: var(--space-xl); }
.nuka-gap-2xl { gap: var(--space-2xl); }

/* ============================================
   DIVIDERS
   ============================================ */

.nuka-divider {
  width: 100%;
  height: 1px;
  background-color: var(--color-border);
}

.nuka-divider--accent {
  background: linear-gradient(to right, var(--color-accent), transparent);
  height: 2px;
}

.nuka-divider--vertical {
  width: 1px;
  height: 100%;
  background-color: var(--color-border);
}

/* ============================================
   EDITORIAL HELPERS
   ============================================ */

.nuka-kicker {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.nuka-kicker::before {
  content: '';
  display: block;
  width: 32px;
  height: 1px;
  background-color: var(--color-accent);
}

.nuka-kicker--reverse::before {
  order: 2;
}

.nuka-number {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--color-text-secondary);
}

.nuka-pull-quote {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-primary);
  border-left: 2px solid var(--color-accent);
  padding-left: var(--space-lg);
  margin: var(--space-2xl) 0;
}

/* ============================================
   VISUAL RHYTHM
   ============================================ */

.nuka-rhythm > * + * {
  margin-top: var(--space-lg);
}

.nuka-rhythm--tight > * + * {
  margin-top: var(--space-md);
}

.nuka-rhythm--loose > * + * {
  margin-top: var(--space-xl);
}