import { style } from '@vanilla-extract/css';
import { color, config, toRem } from 'folds';

// A calm centred invite hero: full-width on mobile, a narrow reading column on
// desktop. Replaces the cramped 364px RoomCard that floated in an empty page.
export const Hero = style({
  width: '100%',
  maxWidth: toRem(440),
  margin: 'auto',
  padding: `${config.space.S700} ${config.space.S400}`,
  display: 'flex',
  flexDirection: 'column',
  alignItems: 'center',
  textAlign: 'center',
  gap: config.space.S400,
});

export const Eyebrow = style({
  display: 'block',
  textTransform: 'uppercase',
  letterSpacing: '0.1em',
  fontSize: toRem(11),
  fontWeight: config.fontWeight.W600,
  color: color.Surface.OnContainer,
  opacity: 0.5,
});

export const Topic = style({
  color: color.SurfaceVariant.OnContainer,
  opacity: 0.8,
  maxWidth: toRem(380),
  display: '-webkit-box',
  WebkitLineClamp: 5,
  WebkitBoxOrient: 'vertical',
  overflow: 'hidden',
  whiteSpace: 'pre-wrap',
});

export const MemberCount = style({
  fontFamily: 'var(--font-mono)',
  fontVariantNumeric: 'tabular-nums',
  color: color.SurfaceVariant.OnContainer,
  opacity: 0.7,
});

// Full-width action stack — comfortable touch targets on native.
export const Actions = style({
  width: '100%',
  display: 'flex',
  flexDirection: 'column',
  gap: config.space.S200,
  marginTop: config.space.S300,
});
