/* ==========================================================================
   AKSO — Grid & Containers
   A 12-column fluid grid (4-column on mobile) plus container utilities.
   Full-bleed and contained sections alternate deliberately — see
   sections.css — so both patterns live here side by side.
   ========================================================================== */

/* ---------------------------------------------------------------------
   Containers
   --------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--section-padding-x);
}

/* Narrower container for text-heavy sections (About, project narrative) */
.container-narrow {
  width: 100%;
  max-width: calc(var(--container-narrow) + (var(--section-padding-x) * 2));
  margin-inline: auto;
  padding-inline: var(--section-padding-x);
}

/* Edge-to-edge — no max-width, no inline padding */
.container-full {
  width: 100%;
}

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

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

/* Column span utilities (desktop, out of 12) */
.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-12 { grid-column: span 12; }

/* Mobile: everything collapses to full width unless overridden */
@media (max-width: 768px) {
  [class^="col-"],
  [class*=" col-"] {
    grid-column: span 4;
  }

  .col-mobile-2 { grid-column: span 2; }
}

/* ---------------------------------------------------------------------
   Flex utilities — used for nav, footer meta rows, form rows
   --------------------------------------------------------------------- */
.flex {
  display: flex;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }

/* ---------------------------------------------------------------------
   Two-column split — About intro, Contact layout
   --------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: start;
}

@media (max-width: 900px) {
  .split {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
}