/* =============================================================================
   layout.css — Vynovis Layout Utilities
   Container, grid, section, and spacing helpers
   ============================================================================= */

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

/* ---------------------------------------------------------------------------
   Flow — lobotomised owl for consistent vertical rhythm
   --------------------------------------------------------------------------- */
.flow > * + * {
  margin-top: var(--flow-gap, var(--space-6));
}

/* ---------------------------------------------------------------------------
   Grid Utilities
   --------------------------------------------------------------------------- */
.grid-auto-fill {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--grid-min, 280px), 1fr));
  gap: var(--grid-gap, var(--space-8));
}

/* ---------------------------------------------------------------------------
   Section Padding
   --------------------------------------------------------------------------- */
.section     { padding-block: var(--space-16); }
.section--sm { padding-block: var(--space-10); }
.section--lg { padding-block: var(--space-24); }

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

/* Skip to main content — visible on focus only */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  z-index: calc(var(--z-nav) + 10);
  background: var(--color-brand-primary);
  color: var(--color-text-on-dark);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  font-weight: 600;
  text-decoration: none;
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: var(--space-4);
}

/* ---------------------------------------------------------------------------
   Text Alignment
   --------------------------------------------------------------------------- */
.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

/* ---------------------------------------------------------------------------
   Flex Utilities
   --------------------------------------------------------------------------- */
.flex         { display: flex; }
.flex-center  { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-col     { display: flex; flex-direction: column; }

.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }

/* ---------------------------------------------------------------------------
   Display Utilities
   --------------------------------------------------------------------------- */
.block        { display: block; }
.inline-block { display: inline-block; }
.hidden       { display: none; }

/* ---------------------------------------------------------------------------
   Width Utilities
   --------------------------------------------------------------------------- */
.w-full  { width: 100%; }
.mx-auto { margin-inline: auto; }

/* ---------------------------------------------------------------------------
   Responsive Helpers
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .hide-mobile { display: none !important; }
}

@media (min-width: 768px) {
  .hide-desktop { display: none !important; }
}