/**
 * RHOBIMD Utilities
 * Layout helpers and utility classes
 *
 * Reference: docs/design-system/README.md
 */

/* ========================================
   CONTAINER
   ======================================== */

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-4);
}

/* ========================================
   SECTION
   ======================================== */

.section {
  padding: var(--space-16) 0;
}

.section--alt {
  background: var(--color-surface-2);
}

/* ========================================
   SCREEN READER ONLY
   ======================================== */

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

/* ========================================
   RESPONSIVE BREAKPOINTS
   Mobile-first approach (base: 320px+)

   Usage in components:
   @media (min-width: 480px) { }  - Large mobile
   @media (min-width: 768px) { }  - Tablet
   @media (min-width: 1024px) { } - Desktop
   ======================================== */