/* ============================================================
   GASPERY LIMITED — Layout System v2.1 (Refined Spacing & Rhythm)
   layout.css — Grid, Containers, Tight Section Spacing
   ============================================================ */

/* ─── Container ──────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--grid-max);
  margin-inline: auto;
  padding-inline: var(--grid-gutter);
}

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

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

.container--text {
  max-width: 680px;
}

/* ─── 12-Column Grid ─────────────────────────────────────── */
.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--grid-gutter);
}

.grid--no-gap    { gap: 0; }
.grid--gap-sm    { gap: calc(var(--grid-gutter) * 0.5); }
.grid--gap-lg    { gap: calc(var(--grid-gutter) * 1.5); }

/* 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; }

/* Column starts */
.col-start-2  { grid-column-start: 2; }
.col-start-3  { grid-column-start: 3; }
.col-start-4  { grid-column-start: 4; }
.col-start-5  { grid-column-start: 5; }
.col-start-7  { grid-column-start: 7; }

/* ─── Tighter Section Spacing & Vertical Rhythm ─────────── */
.section {
  padding-block: clamp(3.5rem, 6vw, 5.5rem);
}

.section--sm {
  padding-block: clamp(2.5rem, 4vw, 4rem);
}

.section--lg {
  padding-block: clamp(4.5rem, 8vw, 7rem);
}

.section--flush-top    { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }

/* ─── Section Header ─────────────────────────────────────── */
.section-header {
  display: flex;
  align-items: baseline;
  gap: var(--sp-20);
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}

.section-index {
  font-family: var(--f-mono);
  font-size: var(--fs-11);
  color: var(--c-text-muted);
  letter-spacing: 0.06em;
  flex-shrink: 0;
}

.section-label {
  font-size: var(--fs-11);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  flex-shrink: 0;
}

.section-rule {
  flex: 1;
  height: 1px;
  background: var(--c-border);
  min-width: var(--sp-20);
}

/* ─── Flex & Alignment Utilities ─────────────────────────── */
.flex         { display: flex; }
.flex-col     { flex-direction: column; }
.flex-wrap    { flex-wrap: wrap; }
.items-start  { align-items: flex-start; }
.items-center { align-items: center; }
.items-end    { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.gap-8  { gap: var(--sp-8); }
.gap-12 { gap: var(--sp-12); }
.gap-16 { gap: var(--sp-16); }
.gap-24 { gap: var(--sp-24); }
.gap-32 { gap: var(--sp-32); }

/* ─── Dividers ───────────────────────────────────────────── */
.rule {
  width: 100%;
  height: 1px;
  background: var(--c-border);
}

.rule--dark {
  background: var(--c-border-dark);
}

.rule--purple {
  background: var(--c-purple);
  width: 2rem;
  height: 2px;
}

/* ─── Responsive ─────────────────────────────────────────── */
@media (max-width: 1024px) {
  .col-3 { grid-column: span 6; }
  .col-4 { grid-column: span 6; }
  .col-5 { grid-column: span 6; }
}

@media (max-width: 768px) {
  .grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .col-1, .col-2, .col-3, .col-4,
  .col-5, .col-6, .col-7, .col-8,
  .col-9, .col-10, .col-11, .col-12 {
    grid-column: span 4;
  }
  [class*="col-start-"] {
    grid-column-start: auto;
  }
}