/* ============================================
   CancerBrief Layout System
   ============================================ */

/* --- Container --- */

.container {
  width: 100%;
  max-width: var(--grid-max-width);
  margin-inline: auto;
  padding-inline: var(--grid-margin);
}

/* --- 12-Column Grid --- */

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

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

/* --- Sections --- */

.section {
  padding-block: var(--space-10);
}

.section--tight {
  padding-block: var(--space-6);
}

/* --- Full-bleed (breaks out of container) --- */

.full-bleed {
  width: 100vw;
  margin-inline: calc(-1 * var(--grid-margin));
  padding-inline: var(--grid-margin);
}

/* --- Mobile (< 768px) --- */

@media (max-width: 767px) {
  :root {
    --grid-columns: 4;
    --grid-gutter: 1rem;
  }

  .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;
  }

  /* Allow explicit mobile spans */
  .col-m-1 { grid-column: span 1; }
  .col-m-2 { grid-column: span 2; }
  .col-m-3 { grid-column: span 3; }
  .col-m-4 { grid-column: span 4; }

  .section {
    padding-block: var(--space-8);
  }
}