/* ==========================================================================
   KillarNation — Layout
   Containers, section bands, grids, page structure.
   ========================================================================== */
   
   h1, h2, h3, h4, h5, h6{
       margin-bottom: 16px;
   }


/* Container -------------------------------------------------------------- */

.container {
    width: 100%;
    max-width: var(--kn-container);
    margin-inline: auto;
    padding: 0 20px;
}

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


/* Section bands ---------------------------------------------------------- */

.section {
  padding-block: var(--kn-section);
}
.section--sm { padding-block: var(--kn-section-sm); }
.section--lg { padding-block: var(--kn-section-lg); }

.section--alt { background: var(--kn-surface-alt); }

.section--dark {
  background: var(--kn-surface-dark);
  color: var(--kn-text-invert);
}
.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4 {
  color: var(--kn-text-invert);
}
.section--dark p,
.section--dark li {
  color: var(--kn-text-on-dark);
}


/* Grid ------------------------------------------------------------------- */

.grid {
  display: grid;
  gap: var(--kn-sp-6);
}

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

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

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

@media (min-width: 769px) and (max-width: 1024px) {
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}


/* Flex helpers ----------------------------------------------------------- */

.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-1 { gap: var(--kn-sp-1); }
.gap-2 { gap: var(--kn-sp-2); }
.gap-3 { gap: var(--kn-sp-3); }
.gap-4 { gap: var(--kn-sp-4); }
.gap-6 { gap: var(--kn-sp-6); }
.gap-8 { gap: var(--kn-sp-8); }


/* Page layout: content + sidebar ----------------------------------------- */

.page-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--kn-sp-8);
}

@media (min-width: 1024px) {
  .page-layout--sidebar {
    grid-template-columns: 1fr 320px;
  }
}


/* Breadcrumb ------------------------------------------------------------- */

.breadcrumbs {
padding: 0 0 var(--kn-sp-3) 0;
  font-size: var(--kn-fs-sm);
}
.breadcrumbs a {
  color: var(--kn-text-soft);
  transition: color var(--kn-dur) var(--kn-ease);
}
.breadcrumbs a:hover { color: var(--kn-primary); }
.breadcrumbs .sep {
  margin: 0 var(--kn-sp-2);
  opacity: .5;
}
.breadcrumbs .current { color: var(--kn-text); }


/* Spacing utilities ------------------------------------------------------ */

.mt-0 { margin-top: 0; }
.mt-4 { margin-top: var(--kn-sp-4); }
.mt-6 { margin-top: var(--kn-sp-6); }
.mt-8 { margin-top: var(--kn-sp-8); }
.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: var(--kn-sp-2); }
.mb-3 { margin-bottom: var(--kn-sp-3); }
.mb-4 { margin-bottom: var(--kn-sp-4); }
.mb-6 { margin-bottom: var(--kn-sp-6); }
.mb-8 { margin-bottom: var(--kn-sp-8); }
.text-center { text-align: center; }
.text-sm { font-size: var(--kn-fs-sm); }