/**
 * Layout utilities (Bootstrap-like naming with l- prefix to avoid clashes
 * with Locofy component classes such as .container and .column).
 *
 * Depends on tokens.css variables.
 */

:root {
  --l-container-max: 1280px;
  --l-gutter: var(--padding-16);
  --l-break-sm: 480px;
  --l-break-md: 768px;
  --l-break-lg: 1050px;
}

/* Max-width container, centered */
.l-container {
  width: 100%;
  max-width: var(--l-container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--l-gutter);
  padding-right: var(--l-gutter);
  box-sizing: border-box;
}

/* Flex row with gap */
.l-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-24);
  box-sizing: border-box;
}

.l-row--nowrap {
  flex-wrap: nowrap;
}

/* 12-column mental model: use grid for predictable spans */
.l-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gap-24);
  width: 100%;
  box-sizing: border-box;
}

.l-col {
  min-width: 0;
}

.l-col-12 {
  grid-column: span 12;
}

.l-col-6 {
  grid-column: span 6;
}

.l-col-4 {
  grid-column: span 4;
}

.l-col-3 {
  grid-column: span 3;
}

@media screen and (max-width: 768px) {
  .l-col-6,
  .l-col-4,
  .l-col-3 {
    grid-column: span 12;
  }
}