/* Version 1.2.1 */
/*
  16-column and 15-column responsive grid system
  - grid-16: always 16 columns, use .span-1 to .span-16
  - grid-15: always 15 columns, use .span15-1 to .span15-15
  - Responsive overrides: .sm-span-*, .md-span-*, .lg-span-* (and span15- variants)
*/

:root {
  --grid-gap: 0; /* default gap */
  --container-padding-x: 1rem;

  /* Breakpoints */
  --bp-sm: 576px;
  --bp-md: 768px;
  --bp-lg: 992px;
  --bp-xl: 1200px;

  /* Container widths (optional helpers) */
  --container-sm: 540px;
  --container-md: 720px;
  --container-lg: 960px;
  --container-xl: 1140px;
  --container-xxl: 1320px;
}

/* Optional centered container helper */
.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding-x);
  padding-right: var(--container-padding-x);
}

@media (min-width: 576px) {
  .container { max-width: var(--container-sm); }
}
@media (min-width: 768px) {
  .container { max-width: var(--container-md); }
}
@media (min-width: 992px) {
  .container { max-width: var(--container-lg); }
}
@media (min-width: 1200px) {
  .container { max-width: var(--container-xl); }
}
@media (min-width: 1400px) {
  .container { max-width: var(--container-xxl); }
}

/* Base 16-column grid */
.grid-16 {
  display: grid;
  grid-template-columns: repeat(16, minmax(0, 1fr)); /* always 16 columns */
  gap: var(--grid-gap);
  align-items: stretch; /* items stretch to fill row height */
}

/* Make grid children fill their cell height */
.grid-16 > * {
  min-height: 100%;
}

/* Column span utilities (work across all breakpoints) */
.span-1  { grid-column: span 1; }
.span-2  { grid-column: span 2; }
.span-3  { grid-column: span 3; }
.span-4  { grid-column: span 4; }
.span-5  { grid-column: span 5; }
.span-6  { grid-column: span 6; }
.span-7  { grid-column: span 7; }
.span-8  { grid-column: span 8; }
.span-9  { grid-column: span 9; }
.span-10 { grid-column: span 10; }
.span-11 { grid-column: span 11; }
.span-12 { grid-column: span 12; }
.span-13 { grid-column: span 13; }
.span-14 { grid-column: span 14; }
.span-15 { grid-column: span 15; }
.span-16 { grid-column: span 16; }

/* Responsive span overrides (optional) */
@media (min-width: 576px) {
  .sm-span-1  { grid-column: span 1; }
  .sm-span-2  { grid-column: span 2; }
  .sm-span-3  { grid-column: span 3; }
  .sm-span-4  { grid-column: span 4; }
  .sm-span-5  { grid-column: span 5; }
  .sm-span-6  { grid-column: span 6; }
  .sm-span-7  { grid-column: span 7; }
  .sm-span-8  { grid-column: span 8; }
}
@media (min-width: 768px) {
  .md-span-1  { grid-column: span 1; }
  .md-span-2  { grid-column: span 2; }
  .md-span-3  { grid-column: span 3; }
  .md-span-4  { grid-column: span 4; }
  .md-span-5  { grid-column: span 5; }
  .md-span-6  { grid-column: span 6; }
  .md-span-7  { grid-column: span 7; }
  .md-span-8  { grid-column: span 8; }
  .md-span-9  { grid-column: span 9; }
  .md-span-10 { grid-column: span 10; }
  .md-span-11 { grid-column: span 11; }
  .md-span-12 { grid-column: span 12; }
}
@media (min-width: 992px) {
  .lg-span-1  { grid-column: span 1; }
  .lg-span-2  { grid-column: span 2; }
  .lg-span-3  { grid-column: span 3; }
  .lg-span-4  { grid-column: span 4; }
  .lg-span-5  { grid-column: span 5; }
  .lg-span-6  { grid-column: span 6; }
  .lg-span-7  { grid-column: span 7; }
  .lg-span-8  { grid-column: span 8; }
  .lg-span-9  { grid-column: span 9; }
  .lg-span-10 { grid-column: span 10; }
  .lg-span-11 { grid-column: span 11; }
  .lg-span-12 { grid-column: span 12; }
  .lg-span-13 { grid-column: span 13; }
  .lg-span-14 { grid-column: span 14; }
  .lg-span-15 { grid-column: span 15; }
  .lg-span-16 { grid-column: span 16; }
}

/* Alignment helpers */
.items-start    { align-items: start; }
.items-center   { align-items: center; }
.items-end      { align-items: end; }
.justify-start  { justify-items: start; }
.justify-center { justify-items: center; }
.justify-end    { justify-items: end; }

/* Gap utilities (scoped to grid container to avoid global conflicts) */
.grid-16.gap-0   { gap: 0; }
.grid-16.gap-4   { gap: .25rem; }
.grid-16.gap-8   { gap: .5rem; }
.grid-16.gap-12  { gap: .75rem; }
.grid-16.gap-16  { gap: 1rem; }
.grid-16.gap-24  { gap: 1.5rem; }
.grid-16.gap-32  { gap: 2rem; }
.grid-16.gap-48  { gap: 3rem; }

/* 15-column grid */
.grid-15 {
  display: grid;
  grid-template-columns: repeat(15, minmax(0, 1fr)); /* always 15 columns */
  gap: var(--grid-gap);
  align-items: stretch; /* items stretch to fill row height */
}

/* Make grid children fill their cell height */
.grid-15 > * {
  min-height: 100%;
}

.span15-1  { grid-column: span 1; }
.span15-2  { grid-column: span 2; }
.span15-3  { grid-column: span 3; }
.span15-4  { grid-column: span 4; }
.span15-5  { grid-column: span 5; }
.span15-6  { grid-column: span 6; }
.span15-7  { grid-column: span 7; }
.span15-8  { grid-column: span 8; }
.span15-9  { grid-column: span 9; }
.span15-10 { grid-column: span 10; }
.span15-11 { grid-column: span 11; }
.span15-12 { grid-column: span 12; }
.span15-13 { grid-column: span 13; }
.span15-14 { grid-column: span 14; }
.span15-15 { grid-column: span 15; }

@media (min-width: 576px) {
  .sm-span15-1  { grid-column: span 1; }
  .sm-span15-2  { grid-column: span 2; }
  .sm-span15-3  { grid-column: span 3; }
  .sm-span15-4  { grid-column: span 4; }
  .sm-span15-5  { grid-column: span 5; }
  .sm-span15-6  { grid-column: span 6; }
}
@media (min-width: 768px) {
  .md-span15-1  { grid-column: span 1; }
  .md-span15-2  { grid-column: span 2; }
  .md-span15-3  { grid-column: span 3; }
  .md-span15-4  { grid-column: span 4; }
  .md-span15-5  { grid-column: span 5; }
  .md-span15-6  { grid-column: span 6; }
  .md-span15-7  { grid-column: span 7; }
  .md-span15-8  { grid-column: span 8; }
  .md-span15-9  { grid-column: span 9; }
  .md-span15-10 { grid-column: span 10; }
  .md-span15-11 { grid-column: span 11; }
  .md-span15-12 { grid-column: span 12; }
  .md-span15-13 { grid-column: span 13; }
  .md-span15-14 { grid-column: span 14; }
  .md-span15-15 { grid-column: span 15; }
}
@media (min-width: 992px) {
  .lg-span15-1  { grid-column: span 1; }
  .lg-span15-2  { grid-column: span 2; }
  .lg-span15-3  { grid-column: span 3; }
  .lg-span15-4  { grid-column: span 4; }
  .lg-span15-5  { grid-column: span 5; }
  .lg-span15-6  { grid-column: span 6; }
  .lg-span15-7  { grid-column: span 7; }
  .lg-span15-8  { grid-column: span 8; }
  .lg-span15-9  { grid-column: span 9; }
  .lg-span15-10 { grid-column: span 10; }
  .lg-span15-11 { grid-column: span 11; }
  .lg-span15-12 { grid-column: span 12; }
  .lg-span15-13 { grid-column: span 13; }
  .lg-span15-14 { grid-column: span 14; }
  .lg-span15-15 { grid-column: span 15; }
}

.grid-15.items-start    { align-items: start; }
.grid-15.items-center   { align-items: center; }
.grid-15.items-end      { align-items: end; }
.grid-15.justify-start  { justify-items: start; }
.grid-15.justify-center { justify-items: center; }
.grid-15.justify-end    { justify-items: end; }

.grid-15.gap-0   { gap: 0; }
.grid-15.gap-4   { gap: .25rem; }
.grid-15.gap-8   { gap: .5rem; }
.grid-15.gap-12  { gap: .75rem; }
.grid-15.gap-16  { gap: 1rem; }
.grid-15.gap-24  { gap: 1.5rem; }
.grid-15.gap-32  { gap: 2rem; }
.grid-15.gap-48  { gap: 3rem; }