/* ============================================
   LAYOUT CLASSES
   Shared layout primitives for all apps
   Only 6 classes - use sparingly
   ============================================ */

/* Vertical stack with gap */
.vertical {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Horizontal row with gap */
.horizontal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
}

/* Space between items */
.between {
  justify-content: space-between;
}

/* Center items */
.center {
  justify-content: center;
}

/* Auto-fit grid */
.grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* Variant marker - styled in app CSS via context */
.featured {
  /* No styles here - each app defines .featured appearance */
}