/*
  K3 Ingenieria -- layout primitives
  Container, grid utilities, and the a11y helpers (skip link, visually-hidden)
  shared by every page. Page-specific modules (hero, label-rail rows,
  category tiles, etc.) are built per-page, not here.
*/

/* ---- Container ----
   The single alignment rail used by EVERYTHING on the site -- header,
   footer, every section. Nothing is full-bleed; there are no exceptions. */
.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* ---- Generic 12/8/1 column grid ----
   --grid-cols is redefined at the plan's two breakpoints in tokens.css
   (1099.98px -> 8 cols, 759.98px -> 1 col). Page content built later
   defines its own placement (asymmetric label rails, etc.) on top of this. */
.grid {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: repeat(var(--grid-cols), 1fr);
}

/* Column-span utilities, 1-12. Above 8 or 12 columns these simply clamp to
   the available track count -- harmless on narrower grids. */
.col-span-1  { grid-column: span 1; }
.col-span-2  { grid-column: span 2; }
.col-span-3  { grid-column: span 3; }
.col-span-4  { grid-column: span 4; }
.col-span-5  { grid-column: span 5; }
.col-span-6  { grid-column: span 6; }
.col-span-7  { grid-column: span 7; }
.col-span-8  { grid-column: span 8; }
.col-span-9  { grid-column: span 9; }
.col-span-10 { grid-column: span 10; }
.col-span-11 { grid-column: span 11; }
.col-span-12 { grid-column: span 12; }

/* Below the tablet tier, label-rail-style rows stack (label above prose)
   rather than sitting side by side -- individual page CSS will apply this
   by simply letting spanned items fall to full width; this utility exists
   for the common case of forcing a full-width stack explicitly. */
@media (max-width: 1099.98px) {
  .stack-below-tablet { grid-column: 1 / -1; }
}

/* ---- Accessibility utilities ---- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--container-pad);
  top: -100px;
  z-index: 100;
  background: var(--navy);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 600;
  transition: top var(--motion-fast) var(--ease-out);
}
.skip-link:focus {
  top: 1rem;
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}