/* ================================================================
   KikoPop — Layout System
   Containers, grids, flex helpers, responsive
   ================================================================ */

/* ── Containers ── */
.kp-container {
  width: 100%;
  max-width: var(--kp-max-w);
  margin: 0 auto;
  padding: 0 var(--kp-sp-6);
}

.kp-container-sm { max-width: 800px; }
.kp-container-lg { max-width: 1400px; }

/* ── Section Spacing ── */
.kp-section {
  padding: var(--kp-sp-24) 0;
}
.kp-section-sm { padding: var(--kp-sp-16) 0; }

/* ── Grid System ── */
.kp-grid {
  display: grid;
  gap: var(--kp-sp-8);
}
.kp-grid-2 { grid-template-columns: repeat(2, 1fr); }
.kp-grid-3 { grid-template-columns: repeat(3, 1fr); }
.kp-grid-4 { grid-template-columns: repeat(4, 1fr); }

/* ── Flex Helpers ── */
.kp-flex       { display: flex; }
.kp-flex-col   { display: flex; flex-direction: column; }
.kp-flex-center{ display: flex; align-items: center; justify-content: center; }
.kp-flex-between { display: flex; align-items: center; justify-content: space-between; }
.kp-flex-wrap  { flex-wrap: wrap; }
.kp-gap-2      { gap: var(--kp-sp-2); }
.kp-gap-4      { gap: var(--kp-sp-4); }
.kp-gap-6      { gap: var(--kp-sp-6); }
.kp-gap-8      { gap: var(--kp-sp-8); }

/* ── Responsive Breakpoints ── */
@media (max-width: 1024px) {
  .kp-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .kp-grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .kp-container { padding: 0 var(--kp-sp-4); }
  .kp-section   { padding: var(--kp-sp-16) 0; }
  .kp-grid-2,
  .kp-grid-3,
  .kp-grid-4 { grid-template-columns: 1fr; }
}