/* ============================================
   GRID.CSS — 12-Column Grid & Layout
   Rebel Co. Group — Swiss Design System
   ============================================ */

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

.container--narrow {
  max-width: var(--content-max-width);
}

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

/* ── Span utilities ── */
.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; }

/* ── Start position utilities ── */
.col-start-1  { grid-column-start: 1; }
.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-6  { grid-column-start: 6; }
.col-start-7  { grid-column-start: 7; }
.col-start-8  { grid-column-start: 8; }

/* ── Common layout patterns ── */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--grid-gutter);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--grid-gutter);
}

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

/* ── Asymmetric hero layout (7-5 split) ── */
.grid-hero {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--grid-gutter);
  align-items: center;
}

/* ── Split layout (equal) ── */
.grid-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--grid-gutter);
}

/* ── Asymmetric 5-7 (contact page) ── */
.grid-contact {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: calc(var(--grid-gutter) * 2);
}

/* ── Section spacing ── */
.section {
  padding-top: var(--space-24);
  padding-bottom: var(--space-24);
}

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

.section--dark {
  background-color: var(--color-black);
  color: var(--color-white);
}

.section--gray {
  background-color: var(--color-gray-50);
}

.section--alt {
  background-color: var(--color-gray-100);
}

/* ── Vertical alignment ── */
.align-start { align-items: start; }
.align-center { align-items: center; }
.align-end { align-items: end; }

/* ── Flex utilities ── */
.flex {
  display: flex;
}

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

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

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

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

.gap-2 { gap: var(--space-2); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }

/* ── Responsive Grid ── */
@media (max-width: 1023px) {
  .grid-hero {
    grid-template-columns: 1fr;
    gap: var(--space-12);
  }

  .grid-contact {
    grid-template-columns: 1fr;
    gap: var(--space-16);
  }

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

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

  /* Responsive column overrides */
  .col-md-6 { grid-column: span 6; }
  .col-md-12 { grid-column: span 12; }
}

@media (max-width: 767px) {
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }

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

  .grid > [class*="col-"] {
    grid-column: span 12;
  }

  .section {
    padding-top: var(--space-20);
    padding-bottom: var(--space-20);
  }

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