/* ================================================
   RAWNAQ — LAYOUT CSS
   Grid, containers, section structure
   ================================================ */

/* ================================================
   CONTAINER
   ================================================ */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 clamp(24px, 5vw, 80px);
}

.container--narrow {
  max-width: 900px;
}

.container--wide {
  max-width: 1600px;
}

/* Full-bleed with inner safe-area */
.container--flush {
  width: 100%;
  max-width: 100%;
  padding: 0;
}

/* ================================================
   GRID SYSTEM
   ================================================ */
.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
}

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

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

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

/* Column spans */
.col-1  { grid-column: span 1; }
.col-2  { grid-column: span 2; }
.col-3  { grid-column: span 3; }
.col-4  { grid-column: span 4; }
.col-5  { grid-column: span 5; }
.col-6  { grid-column: span 6; }
.col-7  { grid-column: span 7; }
.col-8  { grid-column: span 8; }
.col-9  { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }

/* ================================================
   SECTION STRUCTURE
   ================================================ */
.section {
  position: relative;
  width: 100%;
}

.section--full {
  min-height: 100vh;
}

.section--pad {
  padding: var(--space-3xl) 0;
}

.section--pad-lg {
  padding: var(--space-4xl) 0;
}

/* ================================================
   CHAPTER WRAPPER
   Base for all story chapters
   ================================================ */
.chapter {
  position: relative;
  width: 100%;
}

.chapter__label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: var(--space-xl);
  color: var(--c-muted);
}

.chapter__label::before {
  content: '';
  display: block;
  width: 24px;
  height: 1px;
  background: var(--c-emerald);
  flex-shrink: 0;
}

/* ================================================
   PINNED SECTION WRAPPER
   Used for scroll-pinned storytelling sections
   ================================================ */
.pin-container {
  position: relative;
  /* Height is set by JS based on content count */
}

.pin-target {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

/* ================================================
   HORIZONTAL SCROLL WRAPPER
   ================================================ */
.h-scroll-container {
  position: relative;
  overflow: hidden;
}

.h-scroll-track {
  display: flex;
  will-change: transform;
}

.h-scroll-panel {
  flex-shrink: 0;
  width: 100vw;
  height: 100vh;
}

/* ================================================
   SPLIT LAYOUT
   ================================================ */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: center;
}

.split--60-40 {
  grid-template-columns: 6fr 4fr;
}

.split--40-60 {
  grid-template-columns: 4fr 6fr;
}

.split--70-30 {
  grid-template-columns: 7fr 3fr;
}

/* ================================================
   FLEX UTILITIES
   ================================================ */
.flex        { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between{ display: flex; align-items: center; justify-content: space-between; }
.flex-col    { display: flex; flex-direction: column; }
.flex-end    { display: flex; align-items: flex-end; }
.gap-sm      { gap: var(--space-sm); }
.gap-md      { gap: var(--space-md); }
.gap-lg      { gap: var(--space-lg); }

/* ================================================
   OVERFLOW CONTROLS
   ================================================ */
.overflow-hidden { overflow: hidden; }
.overflow-clip   { overflow: clip; }

/* ================================================
   POSITION UTILITIES
   ================================================ */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed    { position: fixed; }
.inset-0  { inset: 0; }

/* ================================================
   DISPLAY UTILITIES
   ================================================ */
.block           { display: block; }
.inline-block    { display: inline-block; }
.inline          { display: inline; }

/* Mobile visibility */
.desktop-only { display: block; }
.mobile-only  { display: none; }

/* ================================================
   RESPONSIVE
   ================================================ */
@media (max-width: 1024px) {
  .grid {
    grid-template-columns: repeat(8, 1fr);
  }

  .split,
  .split--60-40,
  .split--40-60,
  .split--70-30 {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
}

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

  .col-1, .col-2, .col-3, .col-4 { grid-column: span 4; }
  .col-5, .col-6, .col-7, .col-8 { grid-column: span 4; }
  .col-9, .col-10, .col-11, .col-12 { grid-column: span 4; }

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

  .section--pad-lg {
    padding: var(--space-2xl) 0;
  }

  .desktop-only { display: none; }
  .mobile-only  { display: block; }

  .h-scroll-panel {
    width: 100vw;
    height: auto;
    min-height: 100vh;
  }
}