// Marketing oriented pattern classes (LP features, avatars, hero cards)

/**
 * @section Marketing Patterns
 */

/** @public Feature row - horizontal feature display */
.feature-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  padding: var(--spacing-8);
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-lg);
  transition: var(--transition-base);
}
.feature-row:hover { box-shadow: var(--shadow-soft); }

/** @public Feature row reversed - icon/image on right */
.feature-row-reverse { flex-direction: row-reverse; }

/** @public Feature icon - colored icon container */
.feature-icon {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  box-shadow: var(--shadow-soft);
  flex-shrink: 0;
}

/** @public Hero card - large gradient card for landing pages */
.card-hero {
  background: var(--gradient-muted-card, linear-gradient(135deg, hsl(var(--muted)), hsl(var(--card))));
  color: hsl(var(--card-foreground));
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-hero, 0 8px 32px 0 rgba(0,0,0,0.08));
  padding: var(--spacing-12) var(--spacing-10);
  min-height: 420px;
  margin-bottom: var(--spacing-2);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

/** @public Hero card body - content wrapper */
.card-hero-body {
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-6);
}
.card-hero .row {
  margin-top: var(--spacing-2);
}
.card-hero .btn {
  margin-right: var(--spacing-2);
}

/** @public Avatar stack - overlapping avatars */
.avatar-stack { display: flex; }

.avatar-stack .avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.875rem;
  color: white;
  border: 3px solid hsl(var(--background));
  box-shadow: var(--shadow-soft);
  background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--accent)));
}
.avatar-stack .avatar + .avatar { margin-left: -0.75rem; }

/** @public Icon tile - feature tile with icon */
.icon-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: var(--spacing-2) var(--spacing-4);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  background: hsl(var(--card));
  color: hsl(var(--card-foreground));
  font-weight: 500;
  font-size: var(--text-sm);
  gap: var(--spacing-1);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.icon-tile:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px) scale(1.03);
}
.icon-tile i {
  font-size: 1.25rem;
  margin-bottom: var(--spacing-1);
}
.icon-tile.gradient-green,
.icon-tile.gradient-fuchsia,
.icon-tile.gradient-cyan,
.icon-tile.gradient-rose,
.icon-tile.gradient-mint,
.icon-tile.gradient-primary-accent {
  color: #fff;
}

/** @public Small icon tile */
.icon-tile-sm { min-width: 2rem; min-height: 2rem; }

/** @public Medium icon tile */
.icon-tile-md { min-width: 2.5rem; min-height: 2.5rem; }

// Utility for large rounded full play button etc
/** @public Full rounded corners - duplicate utility */
.rounded-full { border-radius: var(--radius-full); }